Concept:
For this assignment, I honestly had no clue what to create, at first, I wanted to create generative text data; however, I couldn’t think of a sketch, so I decided to do visualization data instead. My concept was straightforward as I was still trying to understand the codes, so I decided to do a simple solar system, but the data wasn’t accurate it was just for the sketch and the placements in p5. I first started with a blank black background with the planets orbiting, which was too basic, so I decided to use the Lerp function, which I got my inspiration from Jheel’s assignment last week, to change the color to blue gradually. Furthermore, I added shooting stars and normal starts, to make it look more appealing.
Highlight:
The highlight of my code is the animation of the planets and setting the planets, as it was the hardest to figure out. However, the PowerPoint and previous in-class work helped a lot, and without them, I would still be trying to make it work.
// Draw and animate planets orbiting the sun
for (let i = 0; i < planets.length; i++) {
let planet = planets[i];
// planet position based on orbit
angles[i] += planet.speed;
let x = sun.x + cos(angles[i]) * planet.distance;
let y = sun.y + sin(angles[i]) * planet.distance;
// Draw the orbit path
stroke(255, 255, 255, 50);
noFill();
ellipse(sun.x, sun.y, planet.distance * 2);
// Draw the planet
noStroke();
fill(planet.color);
ellipse(x, y, planet.diameter);
// Display planet name
fill(255);
textSize(12);
text(planet.name, x + planet.diameter / 2 + 5, y);
}
Reflection:
For improvements , as you can see the planet, are going out of the canavs, i tried fixing it by making the orbit smaller, but then everything look tight, so i left it as it is. Also I believe some user interaction would’ve been a great addition, as of now there isn’t any interaction, I should’ve maybe allowed the users to control the orbiting of the planets using the mouse, or maybe the shooting stars.
My design: