Orbiting Bodies Sketch, Part I

This is the first stab at making a sketch that shows multiple particles orbiting around a single point. I’m partially inspired by the talk by Carter Emmart¬†and also inspired by the visualizations in Interstellar. I’m also fascinated by particle¬†movements that are defined by mathematical equations, like orbital dynamics. Finally, I wanted to see if I could fake something that looks 3D while only using 2-dimensional math.

This is a purportedly scientifically accurate visualization of a black hole from the movie Interstellar.

The week 2 assignment objectives are as follows:


  • Create a sketch that includes one element controlled by the mouse,
  • one element that changes over time, independently of the mouse, and
  • one element that is different every time you run the sketch.

Not the most complicated task, but I have a special talent for overcomplicating. The gif above shows that I’ve managed to get the ‘controlled by a mouse’ part down in that the mouse controls the ‘view’. I’ve also got the ‘changes over time’ part down because the particle is orbiting through space. What I need to do is have the sketch add additional particles that will all have slightly different orbital speeds, sizes, and paths. I don’t expect it to be physically accurate, but if I can remember the way mass, orbital radius, and distance are related, I’d love to be able to add that into the code. What I have sketched out below is just two-dimensional and is, therefore, kind of faking something that looks and feels three-dimensional. The mouse X location pans the view and the mouse Y location changes the pitch of the view.

let aX;
let aY;
let fC;

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

function draw() {
 background(0, 50);

aX = mouseX;
 aY = (height / 2 - mouseY) / 6;
 fC = frameCount * 0.02;

 stroke(255, 100);
 ellipse(width - aX, height / 2, width, aY * 2);

strokeWeight((sin(fC * PI / 2 + PI / 2) + 1) * 10 + 5);
 stroke(255, 50);
 ellipse(width / 2 * sin(fC * PI / 2) + width - aX, aY * cos(fC * PI / 2) + height / 2, (sin(fC * PI / 2 + PI / 2) + 1) * 10 + 5, (sin(fC * PI / 2 + PI / 2) + 1) * 10 + 5);


The hardest part of this was to establish the relationship of sine and cosine functions with respect to the x and y values of a given particle and then how to manipulate those functions in relation to the mouse coordinates. The elliptical path of the particle is based on the sine and cosine values of the frame count times half pi, with constants multiplied against it to change the amplitude of the wave and additional values added to it to represent the translation towards the center of the space. The size of the particle is also a function of sine which allows it to get smaller to make it look farther away and larger to make it look closer.

Leave a Reply

Your email address will not be published. Required fields are marked *