Week 3 – OOP Assignment (Magic of Light)

Concept:

For this project, I created a generative artwork inspired by the idea of light and movement from a scene found in the movie Encanto. I asked my friends to tell me their favorite Disney movies, some mentioned Tangled, Moana, but one of them said Encanto. I started searching for movie clips to get inspiration from the scenes and movements but none of the Disney movies caught my attention until I looked at Encanto. While looking through images and clips from the film, I was drawn to the candle and flame that symbolized magic and hope. Looking at the circles and light around the candle made me wonder if I could also create the same scene through code which I titled Magic of Light.

Instead of creating the same exact image, I wanted to add my personal twists to create the feeling of movement and energy by making the flames move around a lot and also adding interactivity when clicking on the canvas.
Inspo: Encanto

Embedded sketch:

How the Artwork Was Made:
I first started by creating the base of my code, which to me is the background and candle. I then started creating the arrays and class for the lights and candlelight to start focusing closely on the code and specific movements of the balls which are the flames. I used a class to define each object that is moving included lots of codes and numbers so that the balls would bounce and move left/right or up/down in an array. Each object has its own position, speed, and behavior, which allows them to move independently across the canvas.

I organized my code using functions and clear variable names (light and candlelight) to keep it structured and smooth when I press play. I also added comments in the code (this is probably the best advice I got because when my code kept messing up and not working, I was easily able to look back and understand my thought process).

Resources:

Hardest Part of the Code (and the Part I’m Most Proud Of):
The hardest part of the code was figuring out how I wanted the objects to move and bounce around the canvas. I struggled at first because I didn’t fully understand how to use the array, loop, and class the same way we did in class but especially when trying to figure out how to make the balls bounce on from the edge using the reverse code.

move() {
    this.x += this.xspeed; //moves left/right
    this.y += this.yspeed; //moves up/down

    //using IF and || (OR) to make it bounce, when the ball hits the edge it is reversed by x-1
    if (this.x < 0 || this.x > width) this.xspeed *= -1;
    if (this.y < 0 || this.y > height) this.yspeed *= -1;
  }

I’m proud of this because it took me a while to fully understand what was happening instead of just copying the code. I went back to Professor Aya’s google slides and was able to follow exactly how to create the bounce but also looking at the Ball Class Example 1 helped me create the bounce. Once I understood how multiplying the speed by -1 reversed the direction, I was able to control the movement more intentionally.

Full Code:

let lights = []; //Creating my Array/list that will include all my candleLight

function setup() {
  createCanvas(400, 400);
  
  //Creating my loop for the balls/flames to fill the array with 150x objects (the circles)
  for (let i = 0; i < 250; i++) {
    let light = new candleLight(//candleLight is the new class I'm using for this section
      random(width), //Random x position
      random(height), //Random y position
      random(7, 13) //random size for the object
    );
    lights.push(light); } // To make the balls continue to come and move around the 'push' will push out a new object into the array
}

function draw() {
  background(0);

  // draw candle
  drawCandle();

  //The Loop through the list to update every ball of light
  for (let i = 0; i < lights.length; i++) {
    lights[i].move(); //updating position of ball
    lights[i].show(); //showing the ball
  }
}

function drawCandle() { //Creating the candle+flame
  fill("#E7BE42");
  rect(125, 200, 150, 200);

  fill("#E7BE42");
  ellipse(200, 200, 150, 50);

  fill("#FAF6D0");
  ellipse(200, 180, 20, 40);
}
//What each light will follow and be programmed as
class candleLight {
  constructor(x, y, size) {//everytime a new obkect is created
    this.x = x; //using this to give each ball its specific position
    this.y = y;
    this.size = size;
    
    //playing around with the speed
    this.xspeed = random(-1, 1); //left/right
    this.yspeed = random(-1, 1); //up/down
    
    //creating the array of 3 different color values    
    let colors = ["#FFD700", "#FF8C00", "#FAF6D0"];
    this.color = random(colors); 
  }

 move() {
    this.x += this.xspeed; //moves left/right
    this.y += this.yspeed; //moves up/down

    //using IF and || (OR) to make it bounce, when the ball hits the edge it is reversed by x-1
    if (this.x < 0 || this.x > width) this.xspeed *= -1;
    if (this.y < 0 || this.y > height) this.yspeed *= -1;
  }
  
  show() {
    noStroke();
    fill(this.color); //going back to the random colors above
    ellipse(this.x, this.y, this.size);
  }
}

function mousePressed() { //interactive aspect, when someone clicks on the sketch a new ball appears
  let newLight = new candleLight(
    mouseX,
    mouseY,
    random(5, 10)
  );
  lights.push(newLight); //add to the array
}

Problems I Ran Into:
One major issue I faced was constant errors in p5.js where the code would turn red, and I couldn’t figure out what was wrong. At one point, when I pressed play, the sketch would run but only show the black background with no objects. So I tried looking back from top to bottom and commenting again on the functions while also using // to remove the codes I assumed were causing the problem. I was the able to debug it and play it smoothly.

Final reflection:
I am proud of my final artwork because not only is this my first time writing a lot of code (lines 1–78), but I was also able to have fun with my friends throughout the process. Since we all have different majors, I usually show them what I’m learning and creating in Intro to IM. This time I asked them about their favorite movies and used that to create something that could connect us in a meaningful way.

I got my inspiration from the Disney movie Encanto and built my code around that idea. For future improvements, I want to create more realistic versions of my work because even though I’m proud of how far I’ve come and how I used the code, I know I can push myself further and make it look closer to the original inspiration.

 

Leave a Reply