- Week 1: Intern's Greetings!
- Week 2: Refining the MVP
- Week 3: Diving Into Shaders
- Week 4: From 2D to 3D
We continued with our 3D room from the last week by adding another shader to be buffered to another wall of the room. Additionally, we placed a sphere in the middle of the room. We found out that one can actually manipulate the vertices of a SphereGeometry with noise, meaning that the 3D primitives of Three.js are much more editable than I thought.
for (const vertex of ballGeometry.vertices) {
vertex.normalize();
const distance = 20 + simplex.noise3D(vertex.x + timer * 0.1, vertex.y + timer * 0.1, vertex.z + timer * 0.1);
vertex.multiplyScalar(distance);
}
ballGeometry.computeVertexNormals();
ballGeometry.computeFaceNormals();
ballGeometry.verticesNeedUpdate = true;
ballGeometry.normalsNeedUpdate = true;
However, Nikolai had a suggestion: before diving deeper into 3D shapes and deformations, he recommended me to go back to visual planning regarding the textures and the feeling I wanted to express in the app. By doing so now, we would know the exact tools we would need to learn to reach the desired result. This was a great piece of advice and also good decision regarding the workflow. Despite the endless amount of 3D and shader tutorials, there is a lot to digest as a beginner and it felt good to direct my energy to something different for a while.
As an example, Thabi, Nikolai and I had the fun challenge to build some animations for a client website from scratch. Working as group of three, debugging <spans>
and testing CSS animations was a refreshing change.
Finding Anything.io
Added to that, I wanted to take a quick look into my Flask app in order to have the different parts of my project fresh in my mind. These couple of hours ended up being very effective. I’m still in the process of learning Flask, Ninja and forms.
Currently the app is able to firstly analyze each tweet separately, returning the number of negative, positive and neutral tweets. Secondly, it appends all the tweets into one text file, enabling a handy access to some text traits like the most common words and the average sentence length.
textMass = open("textMass.txt", "w")
for tweet in posts[:199]:
cleanedText = cleanTxt(tweet.full_text) # cleaning each tweet first
textMass.write(cleanedText) # adding tweets to text file
textMass.close()
file = open("textMass.txt")
t = file.read()
whole_text_sample = TextBlob(t) # Ready to analyze the text file as TextBlob
I ended the week by searching for visual inspiration online. Nikolai provided me with an amazing source, anything.io, which takes one into a beautiful rabbit hole of inspiration images from Pinterest, Instagram and so on.
I'm after a visual that looks like an abstract room filled with brain cells. I don’t want the visual to be too realistic: it's rather a stage for abstract shapes and clutter to collide. I want the look to be sweet and sticky, capturing the adrenaline rushes of social media likes. There's a lot of room (pun intended) for expression: the amount of interaction the user has with the outside world could be translated to the amount of feedback in the shaders or, for example, to some holes on the walls, bringing in some new air to breathe.
Some visuals and shaders that felt inspirational in this context:
- Torus animation by Kynd
- Untitled from Anything.io
- Inline Webworker Thread from Cake23.de
- Shader mashup from Cake23.de
- Another Shader Mashup from Cake23.de
- Turing fluid from Cake23.de