Category: S2026 – Aya

Concept

For this week’s assignment, I decided to draw a bit from the skills I learned in Intro to CS back in my freshman year. I chose to implement a very simplified version of Pac-Man, something I always wanted to recreate.

Here is the final sketch (use the right arrow key to begin moving Pac-Man):

The idea is simple: you use the left and right arrow keys to move Pac-Man, and it eats the ghosts once it approaches them. Once all the ghosts are eaten, and Pac-Man returns to his starting position on the left side of the screen, the ghosts regenerate. This creates a sort of infinite loop.

Pac-Man:

The Pac-Man figure is created using the arc() function. On the p5 reference page for the function, there is a sample code for a biting Pac-Man. So, I used that in my assignment. I used Claude.ai to understand what each line of code was doing, specifically how the sin function works and how it enables the model to open and close its mouth. Building on this knowledge, I was able to adjust the speed at which Pac-Man was biting. I also added a boolean that checks if he is moving, so that he is only biting when he is moving.

Pac-Man’s movements are based on the pressing of the right and left arrow keys. From my Intro to CS class, where we built a sample Super Mario Bros game, I knew there must be a way to trigger movement when a specific key is pressed. With a Google search, I found that you can use

if (keyCode === LEFT_ARROW)

However, this function made it difficult to make Pac-Man move when the key is pressed and stop when the key is released. I had a bug where he would just keep moving on his own. I asked Claude.ai for a different function that is specifically for detecting if a key is held down or not, and it gave me the keyIsDown() function. This function returns true if the key is pressed, and false if not. This function fixed my bug and made Pac-Man stop and go correctly.

Ghosts:

For the ghosts, I found PNG images on Google and uploaded them to the sketch. Then, I found this sketch online, which includes a tutorial on how to load and display images.

I faced some difficulty with getting the ghosts to disappear when Pac-Man eats them. At first, I was just looping through the image names and displaying each image, then checking if the x position of Pac-Man and the image aligned, and deleting the image, but this was not doing anything. I asked Claude.ai why my code was not working, and it pointed out to me that images cannot hold x variables; therefore, I cannot check conditions using them. So, I created a simple Ghost class to store each ghost image’s x and y positions, its size, and image name. I made each ghost image an instance of the Ghost class, and stored them in a ghosts[] array. This allowed me to use the dist() function to see if Pac-Man was close to the ghost and delete that ghost instance from the array, which makes the ghost disappear from the sketch.

I was initially just going to leave the sketch with one iteration of displaying, then eating the ghosts, but then I decided to make it regenerate the ghosts every time they are all eaten. I did this by checking if the ghosts[] array is empty, because that indicates that all ghosts have been eaten. Adding only this condition gave me a small bug where the ghosts do not generate when the sketch first loads. It also would re-display the ghosts as soon as the last ghost is eaten, and since Pac-Man would be in proximity of the last and before last ghosts, it eats them immediately, making all the ghosts disappear as soon as they appear. Therefore, I added a condition that ensures that not only must the array be empty, but Pac-Man must also be on the left side of the screen (back at his starting position).

Code Snippet I am Proud of:

//loop backwards through the ghost objects to delete from the back of the array, otherwise you skip items in the array
 for (let i = ghosts.length - 1; i >= 0; i--) {
   let ghost = ghosts[i];

   //display the ghost image
   image(ghost.imgName, ghost.x, ghost.y, ghost.size, ghost.size);

   //if the distance between the center of pacman and the center of the ghost is smaller than 50
   if (dist(pacman.x, pacman.y, ghost.x + 40, ghost.y + 40) < 50) {
     //delete that ghost object from the array so that it is not displayed
     ghosts.splice(i, 1);
   }
 }

This is the code to display the ghost images and delete them when Pac-Man eats them. I am most proud of it because it took me the longest to figure out, and I made LOTS of edits until I reached the final version that worked.

Reflection

Overall, I am extremely happy with my work. Pac-Man has always been one of my favorite games, and I am thrilled I got the chance to recreate it. Despite running into a lot of bugs, they taught me a lot along the way, helped me discover new functions, and expanded my knowledge on how certain things are done in JavaScript since I have never coded using it before. For the future, I would definitely love to properly implement a full Pac-Man game, maybe for my final project 🙂

References

keyIsDown(): https://p5js.org/reference/p5/keyIsDown/

Image upload tutorial: https://editor.p5js.org/FAAH/sketches/8s1g0vilF 

arc(): https://p5js.org/reference/p5/arc/

Claude AI: https://claude.ai/new

• Claude was used to understand the biting Pac-Man code from the arc() reference page, for debugging when the ghosts were not disappearing, and for finding the keyIsDown() function. It gave me the solution of creating a ghost class, which I then implemented on my own.

Reading Chris Crawford’s chapter made me realize that I never really thought deeply about what “interactivity” actually means. I always assumed anything on a screen was interactive, but Crawford explains that real interactivity is like a conversation where both sides listen, think, and respond. When I compare that to the apps and games I use the most, like TikTok, Tetris, and Block Blast, I can see how they fit his definition. These apps react to what I do, and I react back, so it becomes a cycle. Crawford also talks about how the word “interactive” gets thrown around too much, and I agree because I’ve seen products or websites call themselves interactive even when they don’t respond to the user at all. Sometimes a site has so many buttons, menus, or pop‑ups that it feels more overwhelming than interactive. His point about needing two “actors” made sense to me because a system that only shows information without responding to the user isn’t really interacting. It made me think about how much I value visuals, animations, and feedback because those things make a system feel alive and responsive, not just decorative.

The reading also made me reflect on my own p5 sketches and how they fit into Crawford’s idea of interactivity. So far, I’ve made things like my panda portrait and class exercises with bouncing balls and patterns. These sketches react in small ways, but they don’t fully “listen, think, and speak” back to the user yet. Crawford’s definition made me realize that I want my sketches to respond more directly to what the user does. I want to add animation, movement, and user‑controlled elements so the sketch feels like it is reacting to the person using it. I also want to make something that feels more like a small game or a mini‑movie, where characters move and interact with each other. The reading helped me understand that interactivity is not just about visuals but about creating a back‑and‑forth experience. By the end of the semester, I hope my sketches feel more alive and fun, and I want users to enjoy interacting with them. I’m inspired by old pixel games from the 2000s because they feel nostalgic, simple, and playful, and I want to bring that feeling into my work while also making sure the interaction follows the cycle Crawford describes.

My concept:

For this week’s assignment, I created a generative artwork using arrays and objects. I followed the bouncing bubbles example we worked on in class, but I changed it to make something more colorful and fun. The main idea is that the user can click anywhere on the canvas to add bouncing circles. Each circle has a different size, speed, and color because all of those values are random.  I wanted to keep the idea simple while practicing the coding concepts we learned, especially storing objects in arrays and updating them inside a loop.

let shapes = [];

Embedded Sketch:

Code Highlight:

One part of the code I’m proud of is the loop that updates all the shapes:

for (let i = 0; i < shapes.length; i++) {
  shapes[i].move();
  shapes[i].bounce();
  shapes[i].display();
}

The inspiration for this is the cyber Matrix. It normally has green strings of number falling down. I wanted to use that concept and make circles of strings. and then have some thing that highlights if a certain number of digits get randomly aligned. I didn’t not think of any user interactivity in this. After mapping it out in terms of pseudocode, I decided on on squared path instead of a circular one.

I started of by making a class for the number trains. The creation of the trains was the easiest thing. I set a length attribute that decides what it will be each string will look like. It start with 2, and each string has a random pattern of this length numbers which repeats all the way. it leaves a trail equal to its each side of the squared path. it vanishes at the end of each side and creates a new one after. This was not the planned behavior but as the code treats each side a single unit, I was not able to make the trail of persistent between sides. One of the ways to achieve this was to make the trail vanish as the new one generates.

The hardest part to code was the movement and making sure it work in the right order at the right time. the first problem I encountered was off by one error. After a lot of hit and trial, I asked chatgpt to look at it. it suggested me to add a lastStop attribute. I used that to as the starting point for the next side. The down side for that was the corner overlapped. This visual change is not noticeable.

Here is how it looks,

The most fun part of the code was when I integrated functions of a class into my final function that controls the working of the code

  round(startx, starty) {
    let sideLen = (this.length ** 2) * this.charSize;
    let loopLen = sideLen * 4;

    let h = this.head % loopLen;

    if (h < sideLen) {
      this.movex(startx, starty, 1, h);
    } 
    else if (h < sideLen * 2) {
      this.movey(starty, startx + sideLen, 1, h - sideLen);
    } 
    else if (h < sideLen * 3) {
      this.movex(startx + sideLen, starty + sideLen, -1, h - sideLen * 2);
    } 
    else {
      this.movey(starty + sideLen, startx, -1, h - sideLen * 3);
    }

    this.head += this.speed;
  }
}

What I will add in this is to decrease the space between the strings and make it more chaotic.

From the reading, I understood interactivity as a cyclic process where two actors continuously listen, think, and speak. I would say that I agree with his idea he explains the full idea in the reading clearly and uses relevant examples when introducing a new phrase or concept and I found myself easily understanding what he was saying and connecting it to my own works for example in my assignment 3 I responded to The idea of interactivity by allowing the users to generate new stars which fast like a small version of the listening and speaking and thinking cycle Crawford describes.

I really liked Crawford’s examples and his use of scenarios because they helped me visualize his concept instead of just reading a definition. His conversation example, especially the moment where “Step One: Fredegund listens to Gomer, paying close attention to Gomer’s words…,” made the idea much easier for me to grasp. The refrigerator door example also challenged one of my assumptions; before reading this, I probably would have called anything that reacts “interactive,” but now I see the difference between low interactivity (technically responsive but shallow) and high interactivity (meaningful and thoughtful). What stood out most is that strong interactivity requires all three parts to work well with no trading off. It reminded me of how frustrating it feels when someone “responds” to me without actually listening. A step in the reading I think would be hard to implement in my coding would be making the sketch respond in a meaningful and impactful way. While I can handle simple outputs, creating a system that truly “listens, thinks, and speaks” without weakening any part is more complicated than it sounds, especially as someone still new to code.

One thing that surprised me while reading was how much Crawford’s ideas made me reflect on my own life and experiences, both in coding and in everyday communication. I realized that I naturally focus on the part producing something visually interesting without fully thinking about how well my sketches are actually listening or thinking. It made me more aware of how limited my interactions can feel when the system only reacts in a basic way. But at the same time, that doesn’t make them any less satisfying.

Crawford’s refrigerator example reminded me that even simple reactions can feel rewarding when they respond at the right moment. Kids opening and closing a fridge door aren’t experiencing deep interactivity, but the responsiveness still feels good. That idea felt almost self contradicting at first, but it helped me understand that my sketches don’t need to be extremely complex to feel interactive they just need to respond in a way that feels intentional and connected to the user. That shift in perspective helped me appreciate the small interactions I’m already creating, while also motivating me to push them further.

To improve my sketch, I want to increase the “level” of conversation between the user and the system. Crawford’s idea that interactivity depends on how well something listens, thinks, and speaks made me realize that my sketches mostly stop at the listening stage. Since I’m still new to coding, the hardest part for me is creating a response that feels thoughtful rather than mechanical. One idea I’m excited about is having the sketch interpret the user’s “words” in a more complex way. For example, I want the code to listen to sound input and translate different volume levels into different colors, creating an evolving color palette. This would make the sketch feel like it’s actually responding to the user’s presence and energy, not just reacting to a single input. It’s a small step toward completing the “thinking” part of the cycle, but it feels like a meaningful way to push my work closer to the kind of interactivity Crawford describes.

Concept:

Starting off this assignment, I began by brainstorming ways of incorporating the array into my artwork, and I ended up deciding that I wanted to create a shooting star effect, as I felt that, it was the most straightforward idea I could think of and it would allow me to have more creative freedom if I wanted to add more aspects as I developed my code. So the first thing I started with was creating the shooting stars array and the code for it. I wanted to create a generative night sky scene that felt calm, as if you were looking out a window during a star shower. The main idea was to use arrays and objects to animate shooting stars across the sky, inspired by the example we practiced in class. I chose shooting stars because they allowed me to use randomness, movement, and interaction in a simple but visually interesting way. As the project grew, I expanded the scene by adding a glowing moon and mountains with snowy peaks, which helped create a full landscape instead of just a blank sky. The mountains were created using the same loop structure we learned in class, where each mountain’s height comes from an array value. The glow effect around the moon was inspired by an example I found online that used layers of transparent shapes to create a soft halo. I further understood arrays by watching a YouTube video, since it is a somewhat complex concept, the video clarified what we learned in class and helped me feel more confident in implementing the code I was overall satisfied with my outcome. My goal was to mix static elements, the moon and mountains, with dynamic elements, the shooting stars, so the artwork feels alive but still peaceful. After the reading, it also made me think about user interaction, so I decided to let the viewer interact with the piece by clicking to add new stars. Depending on where the user clicks, a star is generated there, but its size, height, and speed are randomized. This allows the user to have some control while still keeping a random effect, which connects to the idea of the “thinking” part of the code referenced in the reading. Overall, the concept was to build a simple canvas that allowed me to apply what we learned in class, using arrays, loops, and object oriented programming to achieve my idea.

Code Highlight:

show(){
   stroke(250,250,200);
   strokeWeight(3);
   line(this.x,this.y,this.x-this.length,this.y-this.length/4);
 }

//every shooting star in the array goes through this loop 
 for(let i = 0; i <shootingStars.length; i++) {
   //moves the stars across the sketch
   shootingStars[i].move();
   //allows the starts to be drawn
   shootingStars[i].show();
   //allows the starts to be respawned when the leave the sketch canvas
   shootingStars[i].respawn();

for (let i = 0; i < mountainSizes.length; i++) {
    
    //x position formula for the triangles
    let x = 100 + i *180;
    
    //color of triangle
    fill('rgb(20,75,20)');
    noStroke();
    
    //upside down triangle to make it look like a mountain
    triangle(
      //bottom left corner of the mountain subtracted 100 from x to shift position left 
    x-100, 640, 
      //bottom right added 100 to x to shift the point right
    x+100, 640,
      //peak lifted up by subtracting the height comes from the mountain size array just like the nums[] example from class
    x, 640 - mountainSizes[i]
    );
    
    //small white triangle which is the snow cap
    fill(255);
    triangle(
    x-30,640 - mountainSizes[i] +40,
    x+ 30, 640 - mountainSizes[i] +40,
    x, 640 - mountainSizes[i] );
}

The first part of the code Im proud of is with the shooting stars . I am proud of this because the loop is based directly on the example from class where we used a loop to move and display each bubble. I was able to fully understand and adapt that example to my own objects, showing how arrays and objects can work together, which was my main goal. This loop controls the entire animation, without it, nothing would move, and it made me feel more confident in my coding abilities and in managing objects. I also learned how to make the shooting star look like it was actually stars by making them tilted. The shooting star looked tilted because the end of the line is drawn at this. x – this. length and this. y – this. length/4, which moves the line diagonally instead of straight across. Changing both x and y creates the angled streak that makes it look like a real shooting star.

Another is the respawn function and setting up the functions in general to restart the stars when they leave the screen. This was the trickiest part for me to understand, especially because it was what I started with. I spent the most time on it since it required checking conditions like if (this.x> width) and resetting values. In the respawn() function, I used an if statement to check when the star leaves the screen and then reset its position and speed. I learned the idea from the car example we were given, where the car resets once it goes off the screen, and I adapted that logic to my project by resetting the stars positions and giving them a random speed. This made the artwork feel alive and helped me understand how to use if statements inside a class, which felt like a big improvement for me.

Lastly, I am proud of an aesthetic addition involving the mountains. I used arrays similarly to the numbers example we did in class but applied it differently. Using the same structure, I created mountains instead of circles, with the mountainSizes array controlling the height of each mountain. I used the index variable to space the mountains evenly across the bottom of the canvas and added a second triangle as a snow cap to make them look more realistic and artistic. To add the snow cap I lifted it up by subtracting the height from the bottom of the canvas. This allowed the white triangle to sit exactly on top of the green mountain since the peak position is calculated using 640 – mountainSizes[i]. This section let me show my creativity and how I could take a class example and transform it into something that fit my assignment.

Reflection/future improvements:

Overall, this assignment helped me understand arrays and object-oriented programming in a clearer and deeper way than before. At first the concept felt confusing, but once I started applying it to something visual, it became easier to absorb and understand. The most challenging part for me was getting the shooting stars to respond correctly, along with small issues like spelling errors that I had to revise. I struggled with the logic at first, especially the conditions inside the class, but once I connected it to the car example I could directly see the cross reference. I also learned how important it is to break the code into smaller functions. Having separate move, show, and respawn functions made the project easier to manage, which reflects what we discussed in class. Adding the mountains  also taught me how flexible arrays and loops can be, since I reused the same structure from the nums[] example but created something completely different. I am proud of how the final work looked because it feels like a complete sketch rather than just an individual final assignment. This project made me more confident experimenting with visuals, trying new ideas, and structuring code in different ways. In future work, I hope to add more interactive elements and experiment with new animations or even sound effects, such as a soft wind or chime when a new star is added. I also want to code more visually complex shapes to add depth to the piece, for example giving the star a diamond shape and an opaque trail. I think adding a more complex feature where the user can somehow remove a star would allow for more interactivity.

References:

Glow affect:

https://editor.p5js.org/_o.line/sketches/09NFFDGea

Youtube Video Arrays:

https://www.youtube.com/watch?v=fBqaA7zRO58

Arrays and loops code from class:

https://editor.p5js.org/maa9946/sketches/pNkSsqH_L

Car example for loop:

https://editor.p5js.org/aaronsherwood/sketches/eYFQE9EZa

1. Sketch and Code

Code

2. Overview

For this assignment, I moved beyond a simple coordinate grid to a more swarm like idea. The project uses Object-Oriented Programming (OOP) to simulate a collection of 80 independent particles. The artwork transitions between a chaotic “dispersion” state and a focused “magnetic” state based on mouse interaction, utilizing internal memory for each object to draw fluid trails.

3. Concept

My goal was to simulate “digital ink” or bio-luminescent trails. I wanted the movement to feel viscous—as if the particles were swimming through a thick fluid. The pink-on-black aesthetic remains, but the focus shifted from “pointers” to “pathways” to emphasise the beauty of the movement itself rather than the final position.

4. Process and Methods

My process was centered on encapsulation — hiding the complex math inside the object so the main program remains clean.

• • Instead of global variables for x and y, I created a Particle class to manage individual behaviors, positions, and memory.
  • Each particle has its own history array to store previous coordinates, allowing for the rendering of custom “ribbon” shapes rather than relying on screen-wide trails.
  • I used conditional logic to switch the “force” applied to particles.
    • Wander: Driven by perlin noise for smooth, non-linear dispersion.
    • Magnetize: Driven by vector subtraction to seek the cursor when mouseIsPressed.

5. Technical Details

• • For the “brain” of each particle, I used conditional logic to toggle between two distinct mathematical forces. When the mouse is clicked, it employs Vector Subtraction (p5.Vector.sub) to calculate a direct path between the particle’s current position and the cursor. Then, using setMag(0.6), it normalizes this vector to a constant strength, making sure that the magnetic pull is smooth and predictable regardless of distance.
  • Conversely, when the mouse is released, the code samples perlin noise based on the particle’s unique (x, y) coordinates to find a value in a multi-dimensional field. This value is mapped to an angle and converted into a force via p5.Vector.fromAngle. This causes the particles to disperse in organic, flowing motions rather than random lines.
  • Both behaviors conclude by adding these forces to the acceleration vector (this.acc.add) which queues up the physical move that will be executed in the next frame.

// 1. BEHAVIOR SELECTION
if (mouseIsPressed) {
  // --- MAGNETIC MODE ---
  let mouse = createVector(mouseX, mouseY);
  // Subtract current position from mouse position to get the "toward" vector
  let attraction = p5.Vector.sub(mouse, this.pos);
  // Normalizing the pull force to 0.6 keeps the movement constant and non-erratic
  attraction.setMag(0.6);
  this.acc.add(attraction);
} else {
  // --- DISPERSE MODE ---
  // Sampling the noise field based on local coordinates for organic flow
  let n = noise(this.pos.x * 0.006, this.pos.y * 0.006, frameCount * 0.01);
  // Convert the noise value (0 to 1) into a steering angle
  let wander = p5.Vector.fromAngle(n * TWO_PI * 2);
  // Apply a weaker force for a graceful, drifting dispersion
  wander.mult(0.3);
  this.acc.add(wander);
}

• • I implemented a three-tier physics system based on acceleration, velocity, and position. Instead of moving objects by fixed pixels, I applied forces to the acceleration vector to create momentum.

// 2. PHYSICS
this.vel.add(this.acc);          // Acceleration changes Velocity
this.vel.limit(this.maxSpeed);   // Cap speed for smoothness
this.pos.add(this.vel);          // Velocity changes Position
this.vel.mult(0.97);             // Damping (Friction) for a liquid feel
this.acc.mult(0);                // Reset for next frame

• • To create the intricate trails, each particle records its movement. I used push() to add new coordinates and shift() to remove old ones, ensuring the “ribbon” has a constant length without filling up the computer’s memory.

// 3. HISTORY TRACKING (The "Ribbon" Logic)
let v = createVector(this.pos.x, this.pos.y);
this.history.push(v);            // Record position

// If the ribbon gets too long, remove the oldest point
if (this.history.length > this.maxHistory) {
  this.history.shift();          // Remove the tail end
}

this.checkEdges();

6. Reflection

This project served as a major evolution from my previous work, shifting from basic coordinate manipulation to more a sophisticated force-based physics system. My main challenge was mastering the balance between the magnet and wander behaviors; while my earlier projects used simple if statements to bounce objects off walls, this one uses vector math and perlin noise to create a viscous, liquid-like motion. I spent significant time troubleshooting a glitch I was having, where ribbon trails would stretch across the canvas during edge-wrapping, which eventually taught me to “wipe” the object’s internal memory to keep the visuals clean — that was how I came up with the history array inside the Particle class; I was able to move away from robotic, linear paths. Learning to use functions like setMag() for constant pull and drag for fluid friction allowed me to fine-tune the “feel” of the interaction, resulting in a piece that responds to the user with an organic grace that feels more like a living organism than a set of lines.

7. Resources

• • https://p5js.org/

Thinking of interactivity in general, I understand it as an object or device that actively responds to the user, allowing engagement, or as the word mentions, interaction. However, reading the first chapter of The Art of Interactive Design made me realize how much deeper this concept can be. Although I sometimes found the author too critical, especially when they seemed to give less importance to actions that are not considered interactive, the examples used in the text to demonstrate what is and is not considered “interactive” expanded my understanding. The idea that interactivity involves listening, thinking, and responding helped me better grasp the characteristics of a strongly interactive system. Such a system should not simply respond, but rather fully process what the user is inputting, without disregarding any part of it, correctly fulfill the demands, and respond in a complete and effective way.

One part of the text that strongly made me connect to my own work stated, “The designer does a slam-bang job with two of the three steps but blows the third step … But one weak area in an interactive product is like a weak link in a chain. The chain breaks regardless of the strength of the rest of the links.” This made me think of how I could avoid similar weaknesses in my own code. When considering how to enhance the degree of user interaction in my future P5 sketches, I began thinking of ways to ensure that my code can accept a wider range of user input and respond effectively. Some ideas I would like to try include allowing users multiple possible commands rather than limiting their options. As well as ideas such as incorporating audio interaction, whether responding with sound or responding to the voices of the users, or using cameras to influence and engage with the sketch. I now understand that a strong interactive system depends on multiple well-developed elements working together, and I hope to be able to create work that reaches that level of interaction.

My Concept:

I started this assignment by thinking about the idea of night and day and how they slowly transition into each other, and I wanted to make something that shows both in one single sketch. I also wanted the user to have some control over what they’re seeing, and since we learned about objects and arrays in class this week, I knew I wanted to use those instead of just drawing everything individually. The final idea was to have the left side of the screen feel more like night and the right side feel more like day, all controlled by the mouse and the user. At night there are stars, and during the day there are clouds. The sketch changes depending on how the user interacts with it, which makes it feel more alive and interactive.

Highlight of Sketch:

class Star {
  constructor(x, y) {
    // x and y store the position of the star.
    this.x = x;
    this.y = y;

for (let i = 0; i < clouds.length; i++) {
   clouds[i].move();
   clouds[i].wrap();
   clouds[i].show(dayAmount);
 }

// blending between night and day colors. I used lerp to smoothly transition values.
let skyR = lerp(nightR, dayR, dayAmount);
let skyG = lerp(nightG, dayG, dayAmount);
let skyB = lerp(nightB, dayB, dayAmount);

background(skyR, skyG, skyB);

// same idea for ground at the bottom of the canvas.
let grassR = lerp(20, 40, dayAmount);
let grassG = lerp(40, 170, dayAmount);
let grassB = lerp(30, 70, dayAmount);

One part of the sketch that I am most proud of is my use of object-oriented programming for the stars and clouds. This was something new for me, and at first it was confusing, but once it worked it made the sketch feel much more organized. I am also proud of learning and using lerp to blend colors smoothly.

Embedded Sketch:

How this was Made:

I started by deciding what the sketch would visually look like before writing any code. Once I had the idea of night and day, I planned how to break it into smaller parts. I first created two arrays, one for stars and one for clouds. Then I made separate class files for each, just like how we used ball.js in class. Each class has its own variables for position, speed, and functions. After that, I used for loops in setup() to create multiple stars and clouds and store them in the arrays. In draw(), I used mouseX to control whether the scene should be more night or more day. I then looped through each array and called the move and show functions for every object, which created the animation. I also added a cute and simple sun and moon so the theme is easier to understand for the user. Finally, I used mousePressed() to add interaction, where clicking adds either a star or a cloud depending on the time of day. Overall, my sketch came together quite nicely by combining loops, arrays, objects, and interaction, all based on what we learned in class.

Reflection and Future Ideas:

Overall, I am happy with how this project turned out, especially since object-oriented programming was something very new to me. There were definitely moments where things didn’t work the way I expected, and i faced a lot of trial and error, especially with juggling between the different class files, and choosing the different number values for all the variables and functions, but fixing those issues helped me understand the code alot better. And, for this assignment in particular, I really went out of my way and experimented with learning new things to elevate my code. Using different articles and references helped me create a more advanced final piece, which I am extremely proud of. I think the night and day transition came out really well and feels smooth without being too complicated. In the future, I would like to experiment more with animation and movement in p5, and create pieces that feel even more dynamic and interactive.

Refrences:

• https://p5js.org/reference/p5/alpha/
• https://p5js.org/reference/p5/frameCount/
• https://p5js.org/reference/p5/lerp/
• https://p5js.org/reference/p5/sin/
• https://p5js.org/reference/p5/constrain/
• https://www.youtube.com/watch?v=8uLVnM36XUc
• Generative AI was used to help me by suggesting the use of lerp() in order to smoothly transition between colors, and help me identify bugs when the number values I used were causing too much chaos in the sketch.

Author’s framework for an interactive design, at its core is a system which takes in user input in great detail, comes up with something meaningful based on it, and delivers it in a effortlessly comprehensible fashion. For a strongly interactive system indeed all three make up the skeleton. That might be the reason, author didn’t mention anything about the aesthetics or visual elements of it. What comes up to my mind is Wikipedia, it does fulfill the above criteria, but is it really interactive. I’m not referring to the reading part of that website but the user experience. Obviously, its goal is productivity not interactivity. But it does highlight the of visual to beautify the skeleton. On the contrary, there is ilovepdf.com, its goal is productivity but it is a lot more  interactive.

For the sketches, I will want to highly focus on gathering user input data. Instead of getting a lot of different inputs, I want to choose a particular point, and get very detailed input on that part, and then create as much as processing and interaction from it. I remember a artwork by a student, it made birds move on the canvas, based on the people walking in front of it. It worked for multiple people independently. The amount of detail in it was amazing. For every action of user, like walking raising hands, jumping etc had somewhat interaction embedded, and it was not random. The focus on detail was prominent. That was I want my sketches to have, the scale is irrelevant. I want to keep them simple but sophisticated.