StarryNight Reimagined.
Project Overview
This project was inspired by The Starry Night and the visual qualities of the night sky, but reimagined in a different emotional context. Instead of a calm and dreamy atmosphere, I explored how the sky might look if it expressed anger. The project merges environment and emotion into a single visual system.
The design and intention developed throughout the process rather than being fully planned from the beginning. As I experimented, the idea of intensity became central, which led me to use a red color palette and a more minimal, abstract visual style.
Milestones:
- This was my initial experiment from the proposal stage. It was simple, but it marked the starting point of my idea:
- Here, I was experimenting with creating a background similar to The Starry Night, but I wasn’t satisfied with the result:
- In this video, I started exploring intensity and motion more deeply. This is where the main direction of my project began to form. I really liked the movement here and considered it close to my final outcome, but I felt that something was missing; which was color:
- Final outcome: In the final version, I introduced color to represent intensity and emotion. I chose red because it strongly represents anger and energy, which aligns with the concept of the project
Video Documentation
Code snippet:
let finalAngle = noiseAngle + wave * oscStrength + swirlAngle * lerp(0.05, 0.22, e) + (noise(time * 2.0, i * 0.1) - 0.5) * jitter; let endX = startX + cos(finalAngle) * lineLength; let endY = startY + sin(finalAngle) * lineLength; line(startX, startY, endX, endY);
I am most proud of the part of my code where I calculate the final angle of each line using a combination of noise, oscillation, swirl, and subtle randomness. In this section, I am not relying on a single technique, but instead layering multiple systems together to create more complex and expressive motion. The noise provides an organic flow, the sine wave adds rhythmic movement, the swirl introduces a sense of direction around the center, and the jitter prevents the motion from feeling too predictable. By blending all of these into one angle, the lines feel alive and continuously evolving rather than static or repetitive. This part of the code reflects my understanding of key concepts from the course, especially noise, vectors, and oscillation, and shows how I can combine them creatively to produce a visually rich and emotionally responsive result.
Canva designing:
I used Canva to design the button because I wanted a customized visual element. This process was relatively simple, and I exported the design as a PNG and uploaded it into p5.js.
Test printing:
Before the war, I contacted the inkjet printing team to test print my work and ensure the resolution was correct. I was able to partially test the print, and below is an image (not the best quality) of how it would have looked when printed.
Challenges:
One of the main challenges I faced was controlling the balance between calm and chaotic motion in the flow field. At first, small changes in parameters like speed, noise scale, and oscillation made the animation feel too chaotic too quickly, which made it difficult to achieve a smooth transition using the slider. I had to experiment with different ranges and easing functions to slow down the beginning and make the buildup feel more gradual and intentional.
Reflection:
Overall, I think the user experience of my project feels smooth and engaging, especially because the slider makes it easy to see how your input affects the visuals in real time. I like that the transition from calm to intense doesn’t feel sudden, but instead builds gradually, which makes it more satisfying to interact with. The motion and fading trails also help make the piece feel more alive and less static. At the same time, I feel like there’s still room to improve. Right now, the interaction is limited to just one slider, so in the future I’d like to add more controls, like changing colors, line thickness, or different motion styles, to make it more playful and customizable.
Link to drive for high resolution images: Afra Binjerais
Final Sketch
References:
- https://en.wikipedia.org/wiki/The_Starry_Night
- Openai was used to fix issues in code and to write comments
- Canva was used to design button
- Class material was also used in the early stages