My Concept:
For some reason, the one thing in my head when I was making the code was the meteor that killed the dinosaurs, so I knew I  wanted to make something with that concept. I tried to stack the circles on top of each other and really liked how they looked when they were put together, and wanted to see what would happen if they started out from the same place but separated as part of the animation. Thus, my little art piece was born. And as I was playing around with the radius size, I managed to figure out the bursting effect.

Of course, the warm sun-like colors of the animation is meant to depict the fiery meteor, and the burst effect is the explosion when it reached earth.

Code I’m proud of

for (let i = 0; i< 100; i++){
  sun[i].move();
  sun[i].show();
  frameRate(25);
}
//second circle is smaller, is the inner layer
for (let i = 0; i< 90; i++){
  sun[i].move();
  sun[i].show();
  frameRate(15);
}

I was honestly really happy when I figured out how to do the bursting animation, and then adding to it by making a second loop so the impact feels bigger. Even if this isn’t the main part of the code, I was still happy with how it made the animation look.

Embedded Sketch

How this was made:
All of it was done by watching the Coding Train’s video. I watched the entirety of his lessons from 6.1 to 7.3. Anything that wasn’t explained in those videos I came up with myself (like the warm coloring and the explosion effect)

Reflection:
I wish I could’ve made the background a lot more fun! I was so focused on the animation itself that I couldn’t think of what the background should look like, so it is unfortunately just plain black.

I also wanted to add in a mouse clicked feature that would reset the animation, but I couldn’t figure out how to do it, and am very frustrated with my lack of progress with that specific function. Hopefully I’ll be able to add it into the next assignment.

This week, I spent more time debugging than actually coding. After countless exasperated sighs and ‘break’ walks, I finally came up with something I am satisfied with. Looking back now, I feel like I got a better grasp of object-oriented programming after going through this debugging process.

Concept:

For this assignment, I was inspired by Giovanni Giacometti’s artwork, titled “Vue de Capolago” (View of Capolago). I came across this painting during my visit to Louvre Abu Dhabi. Its playful use of repeated, colorful lines stuck with me.

I tried to recreate the sky, mountain, and field in p5. Since we were assigned the Crawford reading this week, I also tried to incorporate some level of interactivity (‘fridge light level’, so it does not overpower my intention of staying true to the feelings evoked by the original painting). Therefore, I tried to create a change of hues as the user makes the sun set behind the mountains. Clicking anywhere regenerates the whole composition with new random stripe counts, widths, and heights, so each click produces a different but similarly-styled painting.

Embedded Sketch:

Process:

I had so many tabs open in the creation process of this week’s sketch. I referred to articles like this one (Link) and the p5 website in order to use functions like map. This Coding Train video (Link) and this Patt Vira video (Link) were particularly useful in exploring classes and changing gradients. Simply speaking, I built a small set of functions, each describing how to draw one shape given its size, position, and color. Then I used randomness to stamp out a bunch of these shapes with slightly different sizes and positions, and kept them all in lists. Every time, the program walks through each list and redraws every shape in it, but recalculates each shape’s color by blending two preset color sets together. What I am really proud of is how the blend ratio depends on where your mouse currently is on the screen. Clicking throws out all three lists and randomly generates a brand new set of shapes, so you get a totally different layout to look at. Here is a code excerpt of the color blend:

//Mixing the colors according to position of cursor
function drawSky(Mood, HorizonY) {
  background("#cfe3ea");
  for (const s of SkyStripes) {
    const from = color(SkyMidDay[s.ColorChoice % SkyMidDay.length]);
    const to = color(SkySunSet[s.ColorChoice % SkySunSet.length]);
    s.display(lerpColor(from, to, Mood), HorizonY);
  }
}

function drawMountain(Mood, HorizonY) {
  for (const r of MountainStripes) {
    const from = color(MountainMidDay[r.ColorChoice % MountainMidDay.length]);
    const to = color(MountainSunSet[r.ColorChoice % MountainSunSet.length]);
    r.display(lerpColor(from, to, Mood), HorizonY);
  }
}

It took me a while to figure out this logic. This is why I am so proud of it.

Reflection:

I would have loved to spend more than a week on this assignment. This is only because I believe it would have allowed me to experiment more with the aesthetics after having figured out the logic of things. For instance, I imagine changing the fields into a sea with wavy lines as the user clicks on the screen. Nonetheless, I believe I have learnt a lot through this assignment.

Concept

For this project, I was honestly feeling a little lost at first because I did not know what I wanted to create. I was staring at my laptop wallpaper, which has jellyfish that slowly move around, and that gave me the idea to make my own version of it. I wanted to create a simple underwater scene with jellyfish floating upward. I made each jellyfish slightly different by giving it a random position, size, speed, and color. I also added a small interaction where clicking the screen creates another jellyfish.

(My wallpaper)

My Artwork – Jellyfish

Click the screen!

Code I’m Proud Of

I am most proud of the code I made for the jellyfish tentacles. At first, I was confused about how to place the lines so they would stay connected to the jellyfish when it moved. I used this.x and this.y with different numbers to place the three tentacles under the body. I like this part because it makes the jellyfish actually look like jellyfish instead of just being a circle.

// Draw the three tentacles underneath the body
  stroke(this.jellyColor);
  line(this.x - 8, this.y + 10, this.x - 8, this.y + 30);
  line(this.x, this.y + 10, this.x, this.y + 30);
  line(this.x + 8, this.y + 10, this.x + 8, this.y + 30);
}

Debugging

I struggled a lot with understanding how the class, objects, and array were connected because this was still pretty new to me. At first, I understood how to make one jellyfish, but I did not really understand how to make multiple jellyfish from the same class and have each one be different. I also got confused by this.x and this.y and what the numbers like +8, +10, and +30 were doing when I was making the tentacles. To help me, I went back to the car sketch code we did in class and looked at the way the class was structured. I also used the Ball Class Example 2 – using a class (p5editor) and Ball Class Example 3 – multiple instances using a class (p5editor) to understand how classes can be used to create objects and how multiple objects can exist at the same time. Looking at these examples helped me understand that each jellyfish can use the same class while still having its own position, size, speed, and color. I had to keep going back to the examples while coding because I am still getting used to this way of programming and it was quite frustrating.

Reflections

This project helped me understand objects and classes more because before this I was confused about how one class could create multiple things that are still different from each other. The bouncing ball example from class helped me understand how this.x and this.y belong to each individual object. I also struggled a little with understanding the array and how it connects to the objects, but once I understood that the array holds all the jellyfish it made more sense. I kept the artwork simple because I am still getting comfortable with coding, but I like that it still has movement, randomness, and interaction. If I continued working on it I would probably make the jellyfish look more realistic or add more interaction to their movement especially the tentacles.

After reading The Art Of Interactive Design , I think a strongly interactive system is something that actually feels like a exchange between the user and the computer. The part that stood out to me most was the idea of listening, thinking, and speaking. I usually think of something as interactive if I can click on it or move something around, but the reading made me realize that this does not necessarily mean it is strongly interactive.

For example, if I click somewhere and a shape immediately appears there, the system is listening to me, but it is not really doing much with what I gave it. A stronger system would take my action, process it in some way, and then give me a response that makes me want to interact with it again. I think the most important part is that the user’s actions actually change what happens next. It should feel less like I am controlling a button and more like the system is responding to me.

This made me think about my own p5 sketches because most of the interaction I have made so far is pretty simple like clicking to change size and color or adding new objects or using the mouse to control an object. I think I could make my sketches more interactive by making the computer remember what I do instead of just responding to one action at a time.

For example in my previous laser sketch, I could make the lasers change depending on where I move my mouse including the speed of it or how many times I interact with the sketch. I could also make the lasers slowly react to my previous movements instead of immediately following the mouse. Another idea would be having the colors or movement change after I interact with the sketch a certain number of times. This would make it feel like the sketch is actually responding and changing over time.

I also think I could experiment with sound or other types of input eventually. I like the idea that the sketch could react to something I do without me just clicking a button. I want my sketches to feel like the computer is actually responding to me and giving me a reason to keep interacting with it.

A system is strongly interactive when the user can change its outcome. Crawford simplified interactivity as listening, thinking, and speaking, which can also be understood as input, processing, and output. For example, take a storybook. A book is not interactive, as the reader cannot influence anything that happens in its narrative. A video game, however, is interactive because the player can control the character with an input, altering its journey. In my opinion, this is what makes a strong interactive system: the user’s input has a noticeable impact on the system’s response.

While making future sketches, I plan to incorporate interactivity by using functions on P5.JS such as mousePressed and mouseX/mouseY to give my projects more interactivity. I have already started this in my last artwork, as I used mousePressed and a boolean variable to change the color of the piece.

Concept

For this artwork, I wanted to use the ball example that we did in class and talked about. I wanted to take the basic idea and make it more interactive by giving the user more ways to interact with the artwork. Basically, when the user presses the screen, a new ball is created at the position where they clicked. Each ball has its own different properties, such as its speed, size, gravity, bounce, and color. Because these properties are randomly generated, every ball is slightly different from the others. I also added another interaction where the user can press C to change the color of all the balls. This makes the artwork change even after the balls have already been created. I wanted the artwork to feel like something the user is creating themselves rather than something that is completely automatic.

References and Inspiration

I first got my idea from this video from The Coding Train: [LINK]. I liked the concept of creating and moving objects, and I wanted to use a similar idea but add more interactivity to it. I also used the W3Schools website to understand more about arrays and references and to learn about things that I could use to improve my Object-Oriented Programming: [LINK] [LINK].

Code

//array for balls
let balls = [];

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(240);
//some instructions
  fill(0, 0, 0, 40);
  textAlign(CENTER);
  textSize(16);
  text("Click the screen to create a ball!", 250, 30);
  textSize(10);
  text("Press C to change color", 250, 60);

  line(0, 450, 500, 450);

  // Update every ball in the array
  for (let ball of balls) {
    ball.update();
    ball.display();
  }
}


// Click the mouse to create a new ball
function mousePressed() {

  let newBall = new Ball(mouseX, mouseY);
  balls.push(newBall);

  console.log("New ball:", newBall.color, newBall.speed);
}


// Press C to change the color of all the balls
function keyPressed() {

  if (key == 'c' || key == 'C') {

    for (let ball of balls) {
      ball.changeColor();
    }
  }
}

//Ball Class
class Ball {

  constructor(x, y) {

  this.x = x;
  this.y = y;

  this.size = random(20, 60);
  this.speed = 0;

  this.gravity = random(0.1, 0.3);
  this.bounce = random(0.85, 0.95);

  this.color = color(
    random(255),
    random(255),
    random(255),
    128
  );
}
//updates the balls movements
  update() {

    this.speed = this.speed + this.gravity;
    this.y = this.y + this.speed;


    if (this.y + this.size / 2 >= 450) {

      this.y = 450 - this.size / 2;
      this.speed = -this.speed * this.bounce;
    }
  }

  display() {

    noStroke();

    fill(this.color);

    circle(this.x, this.y, this.size);
  }

  
  //change the color of the ball
  changeColor() {

    this.color = color(
      random(255),
      random(255),
      random(255),
      128
    );
  }
}

Embedded Sketch

Problems I Ran Into

One of the main things I had to figure out was how to make every ball have its own properties while still using the same Ball class. I solved this by giving each new ball random values for its size, gravity, bounce, speed, and color inside the constructor. I also had to figure out how to change the color of all the balls at the same time. Since all of the balls are stored inside an array, I used a loop to go through every ball and call the changeColor() function when the user presses C. Another part I had to understand was how the balls could keep updating and displaying themselves while being stored in the array. I used the update() and display() functions for this, which made the code more organized.

Concept

For this week’s generative artwork, I decided to create a fireworks effect. The idea was inspired by something that happened recently back home in Fiji. My home football team, Ba FA, won the league, and my dad was showing me videos of the fireworks that were happening that night to celebrate the win. With that in mind, I thought it would be interesting to create my own digital version of fireworks using p5.js.

I wanted the artwork to feel active and unpredictable, so instead of having the fireworks appear in the exact same way every time, I used randomness to control their position, size, colour, and speed. I also added a mouse interaction so the user can click anywhere on the canvas to create a firework.

Code I Am Proud Of

The part of my code that I am most proud of is how I implemented the Firework class and made each firework have its own properties. Doing object oriented programming particularly in p5.js was new to me but with the help of Coding Train tutorials, I managed to pull this off. Each firework has its own position, size, maximum size, colour, and speed. This allowed me to create multiple fireworks that behave slightly differently from each other.

// Firework Class
class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;

    // Starting size and the maximum size of the firework
    this.size = 5;
    this.maxSize = random(40, 100);

    // Random color for the firework
    this.r = random(100, 255);
    this.g = random(100, 255);
    this.b = random(100, 255);

    // For random speed of the fireworks
    this.speed = random(0.5, 2);
  }
  
  // Method for making the firework bigger
  update() {
    this.size += this.speed;
  }

  // Method for displaying the firework
  display() {
    noFill();
    stroke(this.r, this.g, this.b);
    strokeWeight(3);
    circle(this.x, this.y, this.size);
    // Small center of the firework
    fill(this.r, this.g, this.b);
    noStroke();
    circle(this.x, this.y, 5);

}
  // Returns true when the firework reaches its maximum size, otherwise false
  finished() {
    return this.size >= this.maxSize;
  }

I am also really proud of how I made the fireworks finish and then get removed from the array. I used a finished() method to check when a firework reaches its maximum size:

function draw() {
  // Goes backwards through the array and removes any fireworks that have finished
  for (let i = fireworks.length - 1; i >= 0; i--) {
    if (fireworks[i].finished()) {
      fireworks.splice(i, 1);
    }
  }
}

This part took me quite a while to figure out. I initially found it really tough to remove fireworks from the array while also going through the array. I eventually realized that I could go through the array backwards. This allows me to safely remove a firework . The finished method checks whether the firework has reached its maximum size. Once it has, the loop removes it from the array.

Implementation

I used an array called fireworks to store all of the firework objects. New fireworks are automatically created at random positions, and the user can also create one by clicking on the canvas.

I also used a transparent background to create the fading effect: background(10, 10, 30, 25);

The 25 is the alpha value, so the background is partially transparent rather than completely covering the previous frame. This allows parts of the previous frames to remain visible and gradually fade away, creating a trail effect behind the fireworks.

I also used random() throughout the program so that the fireworks do not all look or behave exactly the same. Their colours, speeds, maximum sizes, and positions can all be different, which makes the artwork generative.

Reflection

I enjoyed making this artwork because I was able to connect a personal experience from home with what I have been learning in p5.js. It also helped me understand object-oriented programming and arrays better.

The most challenging part was figuring out how to remove finished fireworks from the array. I initially found this confusing, but going through the array backwards and using splice() helped me understand better how fireworks with different speeds that finish at different times can be removed correctly.

If I were to improve this artwork in the future, I would like to make the fireworks look more realistic by adding individual particles that explode outward instead of just making the circle grow. I would also like to experiment with different shapes, sounds, and more mouse interactions to make the celebration feel more dynamic.

 

click to change scene

Concept

 

 

 

 

 

 

The idea came from jet skiing, which I do casually, so I already had a clear picture in my head of what the water looks like from the seat, the way the surface keeps moving underneath you and the horizon never sits still. I also took inspiration from the car example that was posted for the class. That example uses a simple object moving across the screen against a background, and I used the same basic structure here, but replaced the car with a jet ski and the road with a moving sea.

I extended the idea in two ways. The first is the water itself; instead of one flat background, the ocean is built from four Wave objects stored in an array, each one drawn lower, darker and moving at a slightly different speed. Drawing them in order means the closer waves cover the ones behind, which gives a sense of depth, and the topmost wave doubles as the horizon so the sky meets the sea along a curve rather than a straight line. The second addition is time of day. Clicking the canvas switches the whole scene between daytime and nighttime, changing the sky and water colours and swapping the sun for a crescent moon with stars behind it. I wanted the piece to have more than one state so there was a reason for the viewer to interact with it rather than just watch it.

How it was made

The sketch is built from four classes: Wave handles one band of water, Bubble is a small circle that floats upwards, Star is a dot in the sky, and Jet ski draws the craft and its rider. Each class stores its own values in the constructor and has its own move and display methods, so the draw function stays short; it just loops through the arrays and tells each object to move and draw itself.

The objects are created once in setup using for loops and stored in three arrays: waves, bubbles and stars. Doing it this way means I can change how busy the scene is by editing a single number. Asking for seventy stars instead of twenty is one character in a loop condition, not seventy lines of code, and this is the main reason the program uses objects and arrays.

The most important part of the code

beginShape();
    vertex(0, height);
    for (let x = 0; x <= width; x += 10) {
      vertex(x, this.y + sin(x * 0.02 + this.offset) * this.waveHeight);
    }
    vertex(width, height);
    endShape(CLOSE);

This builds one wave as a single filled shape. The loop walks across the canvas and places a point every ten pixels. The height of each point comes from sin, which rises and falls smoothly between -1 and 1, so multiplying it by the wave height turns that into a rise and fall measured in pixels. Adding the offset shifts where the curve starts, and because the move method increases that offset a little every frame, the whole wave appears to travel sideways. The two extra vertex calls at the bottom corners close the shape off so it fills downwards instead of being just a line.

What makes this the key part is that everything else in the artwork depends on it. Each Wave object is given its own wave height, speed and starting offset, so the same six lines produce four waves that all look different and move at different rates. That difference in speed is what creates the sense of depth, since the nearer waves move faster than the ones further away. Without this one piece of code the scene would just be flat blocks of color.

Reflection

The hardest part of this project was not writing the classes themselves but getting the layers to sit correctly on top of each other. My first version drew the sky as a plain rectangle ending at a fixed height, and the result looked wrong straight away; there was a hard straight line cutting across the middle of the canvas where the sky stopped, which broke the illusion completely. I fixed this by changing how the background is built. Instead of drawing a sky rectangle and a water rectangle, the sky color now fills the entire canvas and the waves are drawn over the bottom half of it, with the topmost wave acting as the horizon. Because that wave is made with sin like all the others, the edge between the sky and the sea is a curve rather than a straight line, and the whole scene reads as one thing instead of two blocks stacked on top of each other.

Looking back, most of my difficulties were about order and timing rather than logic; which order things are drawn in, when the canvas gets cleared, and when an object is moved relative to when it is visible. The classes and arrays were the straightforward part once I understood that a class is written once and an object is created from it many times. If I were to take this further I would like the jet ski to actually sit on the surface of the wave and tilt with it, rather than bobbing independently, since that is the one part of the scene that still gives away that the jet ski and the water are not really connected.

I really liked this text because of the way Crawford approaches interactivity as a whole and gives it a more three-dimensional aspect. I especially liked how he shows that there are different levels of interactivity, from low to high rather than treating something as simply interactive or not interactive. I think this gives a clearer way of understanding interactivity. Based on Crawford’s idea of listening, thinking and speaking, I think a strongly interactive system should have all three, but I would consider thinking and speaking especially important. The more the user can think, make decisions and respond to the system through their actions, the more interactive the object becomes. At the same time the system should listen and respond to what the user is doing. I also think a strong interactive system should give the user something back, whether that is learning something new, being influenced by the system or simply having fun.

When I think about my own p5 sketches, I feel like they suffer from a lack of interactivity because they sometimes fall into the same kind of low interaction Crawford describes with his refrigerator example. Usually, the interaction is limited to following a rule, such as pressing a button to see something else or moving the cursor to see a new colour. I could improve my p5 sketches by moving away from simple mouse clicks and allowing the system to respond differently based on what the user has already done. For example, instead of choosing colours randomly from a fixed array, the sketch could remember previous interactions and use that information to create different responses. This would make the system feel more responsive rather than just random. I also want to experiment with more complicated forms of interaction such as storing information from the users previous actions. Overall, this reading made me think about interactivity as more than just making something respond to the user. It made me think about whether the system is actually listening, thinking and responding in a way that gives the user a reason to continue interacting with it.