Creative Coding: Celestial Patterns

Creative Coding: Celestial Patterns

Coding the movements of planets in relation to each other as they travel around the sun.

Within the Milky Way Galaxy, little is known about each planet, but their paths around the solar system have been documented by scientists. When looking at one of their paths around the sun combined with another planet’s, an pattern is made, creating an invisible piece of artwork in the sky. I wanted to create a visualization of these unique patterns inspired by the movements between multiple planets using code in the p5.js editor.

Read the Full Case Study Here

Role
Designer

Institution
Temple University, Tyler School or Art and Architecture

Art Direction
Jenny Kowalski

Inspiration for Code — Inspiration

I found other people who have created similar projects based on planetary motion. Videos like those by CaptainGranit shared a realistic depiction of how the planetary movements look in the solar system. Tyler Hobbs was another inspiration when looking at generative art as well.

Assets of Planets for Project — Assets

The planet illustrations were created using digital watercolor. I referenced pictures taken by NASA when creating them so the colors were consistent.

The Plan, Experimentation, and Research

Some helpful tutorials and resources included:

I began the project by mapping where each planet sits in relation to Earth. I chose not to make their orbits exact because I wanted to focus on experimentation. I created digital paintings to represent the planets, stars, and asteroid field.

Experimenting allowed me to learn the most about code. I used tutorials and references to help with aspects of the code like moving patterns.

I researched the planets’ speed and location and used trigonometry to create the planets’ orbits. Researching mathematical roses also helped me in creating the planet’s paths. I followed a tutorial by The Coding Train as well.

Set up of the code and image of the planet pattern — Process:

I began setting up the solar system by coding each planet’s points on the canvas. I set them as ellipses with locations and size using X /Y coordinates. Then the rotations and lines were added connecting them to Earth. I replaced the ellipses with the illustrations I uploaded to p5.js.
I learned trigonometry to make the rotations and speeds to replicate how each planet rotates once around the sun.

Code Example: Neptune

Earth is represented by the coordinates e, f/E, F and Neptune by m, n/ M, N

if (developer === true) { 
// Neptune, set the radius of circle
var scalar7 = 230;

//Neptune
var startM = 300; // x for circle center
var startN = 300; //y for circle center

Code for drawing ellipse on canvas:
//Neptune
// fill(“blue”)
//noStroke();
// ellipse(300,300,460);

//Changed code with Image for planet:
stroke(“white”);
noFill();
extraCanvas.ellipse(m,n,.1);
rectMode(CENTER);
image(neptune,m,n,10,10); }

Trigonometry

To make the planets move, I researched how long it takes each planet to rotate once around the sun. With this ratio consistent, I adjusted the planets’ speeds to replicate that. I used trigonometry to make the rotations and multiplied or divided the angles of the sine and cosine to achieve the rotation speed.

Creating the Orbiting Lines

I began coding lines to connect Earth with another planet to create the patterns. I had trouble figuring out how to connect the points, but after research and watching tutorials I figured it out. Here is the rotation and lines for Neptune(m,n), and to Earth (e,f):

if (developer === true) {
    //Neptune
extraCanvas.line(e, f, m, n);
}

Problems with the Code — Background Problems

To create the artwork, I lowered the background’s opacity so the marks made by each line were visible. However, this left marks from the planets behind and created thick rings that looked messy.
Solution:
I coded a second canvas above the original for the orbit lines and kept the planets and sun on a second canvas below it. After some trial and error, I got both elements to show.

Finished Image Created by the Code — **Link to Code on p5.js**

**Directions:**
Starting on lines **157 to 164,** comment **( // )** and uncomment each line that correlates to the planets below. Each is named in a comment on the same line.
From lines **174–232**, uncomment **( // )** the lines for each planet you want to see, there must be at least one other planet besides Earth uncommented
To comment/uncomment a group of lines at the same time, press the keys **command** ⌘ and / at the same time on a Mac computer and **Ctrl** and / at the same time on a PC

Creative Coding: Celestial Patterns

Inspiration