SOLAR SYSTEM

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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);
}
// 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); }
// 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:

Leave a Reply