- Week 1: Intern's Greetings!
- Week 2: Refining the MVP
- Week 3: Diving Into Shaders
- Week 4: From 2D to 3D
- Week 5: Back to Inspiration Images
- Week 6: Blended Approach
- Week 7: Restructuring the Project
Now that we had a nice app architecture, Nikolai advised me to sketch the room's interiors further. We needed to have an idea of the essential elements of the room. I really enjoyed going back to prototyping on paper, just like I did throughout my studies at Goldsmiths:
I also collected a few Shadertoy examples that captured the simple but intriguing visuals that I was after. These examples are based on fragment shaders and buffers, not Three.js, but I wanted to share them with Nikolai as a visual reference:
- Ball Room Dance by shau
- Mirror Room by DiLemming
- PBR Column Room by geoff
- Reality Warp by tomaes
- Mirror room by Yrau
- Grey Room by lz
- Dobrar a meta by mmutai
Getting All the Tweets
On the Flask side, I was looking into Tweepy API docs. As a default, Tweepy’s api.user_timeline
returns 200 newest tweets from an account. However, I want all the tweets from a certain account, and possibly the ability to filter them based on date. I did some research on Stackoverflow and found that Tweepy’s Cursor
object is a way to achieve this.
Before:
posts = api.user_timeline(screen_name=username, count = 200, lang ="en", tweet_mode="extended")
for tweet in posts[:199]:
cleanedText = cleanTxt(tweet.full_text)
After:
for tweet in tweepy.Cursor(api.user_timeline, screen_name=username, tweet_mode="extended").items(): # Returns all the tweets
cleanedText = cleanTxt(tweet.full_text)
This worked, however, it had a major impact on the performance. Whereas api.user_timeline
returns 200 tweets almost instantly, Cursor
object might spend one minute extracting thousands of tweets from the account. Even when limiting the number of tweets to 500, the process is very slow. This is something that needs to be solved when I focus more on the data side of the project again.
By using our new project structure, we built a very simple starter scene with Nikolai. It has walls and a bunch of spheres and cubes. We agreed that I take some time to build a GUI for the scene and to create “organic” random numbers. For example, I might want to place a plant on the floor and within a certain distance from the left wall, but not always at the same x,y,z position.
I was able to build a simple GUI to control minimum and maximum position coordinates and minimum and the number of spheres or cubes that would be generated. I also studied some Perlin noise implementations in order to map noise values from 0 to 1 to bigger distances in the room. With Nikolai, we went through the code that I had so far. To make the visual experiments easier, I wanted the app to remember the newest GUI settings instead of returning to default values with every page refresh. The solution was this:
const saved = JSON.parse(localStorage.getItem("params") || "{}");
const params = {
minSpheres: 4,
maxSpheres: 10,
minX: -50,
minY: -50,
maxX: 50,
maxY: 50,
minZ: -50,
maxZ: 50,
minRadius: 2,
maxRadius: 20,
...saved
};
function save() {
localStorage.setItem("params", JSON.stringify(params));
}