Week 4

Project file 1
Project file 2
Project file 3
Project file 4
Project file 5
Live Demo

For Week 4, I was able to better understand how sound works within the variable system I developed in the previous weeks. I also became more comfortable understanding the different steps in my code and how each part contributes to the overall interaction. I continued developing the visual aspect of the project by experimenting with different design elements, movement, and color combinations to make the animation more visually engaging. The concept connects each square to a different sound from the sound files. As the squares move around the circle, the code continuously tracks their position. When a square reaches the center, it triggers its assigned sound to play. The angle controls the movement of the squares, while shiftingAngle gives each square a different position and path. In this way, the movement of the squares determines when the sounds are triggered, creating a visual rhythm that responds to and works together with the audio. I also began building a narrative around the idea of music and dancing pixels which I developed further through the visual language of my poster. During the critique, I received feedback to explore the visual poster further and experiment with a wider range of colors. I will be applying this feedback in the next stage of development while continuing to refine the relationship between the sound, movement, and visuals.

Credits & References

-

Week 3

Project file 1
Project file 2
Live Demo

For Week 3, I began identifying an area of interest within coding that I would like to explore further. In class, we worked with concepts such as randomness, conditional statements, and transformations. I chose to focus on variables and their relationship with sound and musical notes. I started by building a basic system that uses variables to control and organize different musical notes and sound elements, while also exploring how these variables could be used to create visually engaging and beautiful animations that respond to sound. Through this process, I became more comfortable understanding how variables can be defined, manipulated, and connected to different parts of a p5.js sketch. I also developed a basic code framework that I can continue building on and experimenting with in the following weeks as I work toward my final review. Each square is connected to a different sound from the sound files. As the squares move around the circle, the code constantly checks their position. When a square reaches the center, it triggers its assigned sound to play. The angle controls the square’s movement, while the shiftingAngle gives each square a different position and path. This means the movement of the squares controls when the sounds are triggered, creating a visual rhythm that matches the audio.

Credits & References

Claude for code understanding and refinement

Week 1

Project file 1
Project file 2
Live Demo

I wanted to experiment with motion because I was still struggling to understand and get comfortable with the basics we learned in the first class. For this project, I decided to focus only on the fundamentals and explore how simple motion could be created through mouse movement. I experimented with coding different interactions and used the process to better understand how movement and responsiveness work.

Credits & References

Referred to: freeCodeCamp.org Youtube

Week 2

> file:///C:/Users/Meera/Downloads/Assignment%201_2026_09_29_17_23_43/index.html

For Week 2, I explored variable and random systems in p5.js to understand how changing values can create movement and visual patterns. I experimented with using the mouse position to control movement based on which quadrant of the canvas the cursor was in. This helped me understand how variables, conditional statements, and mouse interaction can work together to create dynamic behavior. Through this exercise, I also learned how repeated movements and changing variables can be used to generate a pattern rather than creating each element manually. I referenced a YouTube tutorial to understand the basic approach and then experimented with the system in p5.js to understand how the movement and pattern changed in response to the mouse position.

Credits & References

https://www.youtube.com/@pattvira

Week 1

Project file 1
Project file 2
Project file 3
Project file 4
Project file 5

> -

Writing Assignment Creative Cryptography I wanted to explore the meaning of code in everyday life. I think code is the systems, patterns, symbols, and languages around us that often go unnoticed. The examples I have shared are things that I have seen around me, but stopped and looked at more closely, which I found really interesting. Through these examples, I wanted to explore how people recognize, interpret, and decode the different systems around them. That is what I have tried to explain through my examples as well.

Credits & References

None