2021-12-31-planets.md

layout	title	thumbnail	tagline	sort-key	meta-title	meta-description	meta-image	tags	includeP5jsWidget	previousPost	redirect_from	discourseEmbedUrl
tutorial	Planets	/tutorials/p5js/creating-classes/images/planets-1.png	Show planets orbiting a sun	1110	Orbiting Planets - p5.js Example	Show planets orbiting a sun 🪐	/tutorials/p5js/creating-classes/images/planets-1.png	example p5.js javascript creating-classes	true	/tutorials/p5js/creating-classes	/examples/p5js/creating-classes/planets	/examples/p5js/creating-classes/planets

This sketch shows planets orbiting a sun. Click to add another planet!

{% include p5js-widget.html width=400 height=400 %} const planets = [];

function setup() { createCanvas(400, 400);

planets.push(new Planet(width * 0.75, height * 0.5)); }

function mousePressed() { planets.push(new Planet(mouseX, mouseY)); }

function draw() { background(32);

// sun fill(255, 255, 0); circle(width / 2, height / 2, 50);

for (const planet of planets) { planet.draw(); } }

class Planet { constructor(x, y) { this.x = x; this.y = y;

// random size
this.size = random(10, 50);

// random speed
this.deltaX = random(-10, 10);
this.deltaY = random(-10, 10);

// random color
this.c = color(random(128, 255), random(128, 255), random(128, 255));

}

draw() { const sunX = width / 2; const sunY = height / 2; const distanceFromSun = dist(this.x, this.y, sunX, sunY);

// planets accelerate faster when they're closer to the sun
// this simulates gravity pulling them in faster and faster
this.deltaX += (sunX - this.x) / distanceFromSun;
this.deltaY += (sunY - this.y) / distanceFromSun;

this.x += this.deltaX;
this.y += this.deltaY;

fill(this.c);
ellipse(this.x, this.y, this.size);

} } </script>

Click here to view this code in the p5 editor.

Remix Ideas

• Make a more realistic simulation of our solar system
• Create a sketch where a planet orbits a sun, and a moon orbits the planet
• Instead of the planets only orbiting the sun, make it so their orbits are affected by each other as well