Week 3 – Object-Oriented Programming Genarative Artwork

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:

Leave a Reply