Creative Coding: Celestial Patterns

Hanna lipski
TylerGAID
Published in
9 min readApr 22, 2021

--

Coding the movements of the planets in relation to one another as they travel around the sun.

Coded planets making patterns around the sun

Purpose

I chose to pursue coding a solar system because I am very inspired by the symbolism of planets, the universe and the unique aspects of it that are unknown. Within the Milky Way Galaxy, little is known about each planet, but their paths around the solar system have been documented by scientists throughout history. When looking at one of their paths around the sun combined with that of another planet, a beautiful pattern is made, creating an invisible piece of artwork in the sky. I was inspired by these unique patterns and wanted to create a series of artworks that visualize the movements between multiple planets. My goal was to be experimental and illustrative in this series while also educating about how the planets move in relation to each other around the sun.

Inspiration

Upon doing more research on this topic, I found other people who have created similar projects based on planetary motion. I found their projects to be inspirational on showing how the planets move in an educational and creative way. 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 I wanted my project to make a series of art pieces that reflected the planetary movements. I found their use of color, light, and contrast very inspirational as well as the focus they put on nature in some of their pieces. I found these sources of inspirations helpful in thinking about showing movement using code but wanted to be more experimental and illustrative with my project.

Initial sketches, inspiration, and thoughts on starting my project

Assets

I originally made planets that looked more graphic but they were not reflective of the illustrative style I wanted to show, so I adjusted their style.

Original assets on left, new and more illustrative assets on right

My new approach to creating the planets was to be more abstract and reflective of watercolors. I referenced the highly detailed pictures taken by NASA when making each planet so they were more detailed and illustrative.

Plan

Original Plan

I originally had a few ideas for my final creative coding project. One was to create a music visualizer, the second was planetary motion, and the third was to create generative art using code. I felt very divided on all of these ideas and could not put my focus on one. After reviewing my goals and the work I wanted to complete, I decided to combine all the ideas into one to create a series of artworks based off of planetary motion with additional music.

New Plan

My new approach involved combining all of my ideas in a cohesive way that felt connected as one big project instead of multiple. I began by mapping out where each planet sits in relation to Earth. I chose Earth to be the consistent planet among all as I felt it was relevant since humans live on it. I knew I was not going to make their orbits exact as I wanted this project to be more experimental. The orbits act as a visual representation of the planets’ path that we cannot see. I felt this would help bring more focus to the art the patterns create as well. I also made the aspects of the coded solar system more visually interesting by including digital paintings to represent the planets and adding stars and an asteroid field.

Experimentation

Experimenting and research were the most important parts of this project. It allowed me to learn the most and find solutions to problems I ran into. Tutorials were very helpful in learning how to solve current and future problems as well as inspire new ideas to implement into my own project. These ranged from tutorials and references on how to connect two dots with a line, rotation, and more specifically with how to make an asteroid belt. Finding these resources and experimenting took a lot of time but once I began using them they streamlined my process. The resources I used helped me with coding moving patterns and mathematical roses made with trigonometry along with attempting a music visualizer. I also learned how to translate code from other programs like Processing to the p5.js program I used. Some of the tutorials I used that help me during my process were:

Research

Focusing on my own project, I researched the speed and patterns of the planets to see if I could create a replica of their paths in the sky. I implemented trigonometry into my code through tutorials and references to allow the planets to orbit the sun. Understanding this and how to adjusting the equations for each planet was a challenge but I practiced and improved. I also researched mathematical roses more to see if I could implement them into the paths of each planet to make them more unique. I found a tutorial by The Coding Train on YouTube that was very helpful and linked to pages about them that furthered my understanding as well. I would like to experiment with this idea in the future.

Here are some more resources I found inspirational and helpful to my own process and development of my ideas:

Image of code and artwork made from the planetary patterns

Process:

Approach and Setting up the Solar System:

After adjusting my plan, I began setting up the code and doing further research. I decided to put in illustrations of the planets to act as the points of each planet on the canvas instead of dots. To do this, I started with the original code I set up for each planet as colorful ellipses. This consisted of an ellipse that had its location and size already set up using X and Y coordinates with no stroke and a color fill. Then the rotation and lines were added to connect them to Earth and I finished by replacing the ellipses with my illustrations. Here is the code for Neptune as an example. 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 circlevar scalar7 = 230;
//Neptune
var startM = 300; // x-coordinate for the circle centervar startN = 300; //y-coordinate for the circle center
Code for drawing of the ellipse on the 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); }

To change the ellipses to digital drawings, I uploaded each drawing I made to p5.js. Then I added the images’ code to the file and created larger ellipses to act as the orbit around the sun the planets drew.

Image of code for Neptune along with orbiting ellipse it will draw on the second canvas

Creating the Orbiting Lines

I then began coding lines that connected Earth and another planet’s points together, this is what creates the pattern in the canvas. I ran into trouble figuring out how to connect the points, but after research and watching additional tutorials I was able to figure it out. Here are the rotation and lines set up for Neptune(m,n), connecting it to Earth (e,f):

if (developer === true) {    //NeptuneextraCanvas.line(e, f, m, n);}
Set up for orbiting lines and example of the lines of Mercury, Venus, and Mars, connecting them to Earth

Using Trigonometry for Planetary Rotation

Following this, I set each planet to move at different speeds that reflected how they do in space. To do this, I researched how many years it takes a planet to make one rotation around the sun compared to one year it takes Earth. Keeping this ratio consistent, I adjusted the speed for each planet to loosely replicate that. I used trigonometry to make the rotations occur and then multiplied or divided the angles for the sine and cosine to achieve the appropriate rotation speed. Here is the rotation of Neptune created by dividing the angle of the sine and cosine by the speed:

if (developer === true) {
//Neptune
var m = startM + scalar7 * cos(angle/6.5);var n = startN + scalar7 * sin(angle/6.5);}
Section of code using Trigonometry to get the angles and speed for each planet

Adding Music and Background Problems

Planets creating a ring around the sun when all objects were places on one background with a low opacity

I added music as an additional detail to my project. I used the song “Gold Moon” with permission from the artist, Ryan Bossio. To create the artwork, I lowered the background’s opacity so the marks made by each line were visible, creating the pattern on the canvas.

However, this became a challenge when lowering the opacity also left the planets behind and created thick, colorful rings. This made the piece look messy and patterns hard to see, taking away from all of the artworks.

Solution

To solve this problem, I coded a second canvas below the original with no color or opacity for the orbit lines and kept the planets and sun on the original canvas. This was successful except the stars I coded could not longer be seen. I had to replace the code with an image of the stars for the background instead.

Visuals of coded star background and with png star background while using two canvases

Final Results

Link to Code on p5.js and Directions

Directions for Changing Which Planets are Shown On the Canvas

  • Starting on lines 157 to 164, comment ( // ) and uncomment each line that correlates to the planets below. Each of them 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 for the program to run.
  • To comment or uncomment a group of lines at the same time, press the keys command ⌘ and / at the same time on a Mac computer and the keys Ctrl and / at the same time on a PC
Location of code to comment ( // ) and uncomment to show certain planets and their connecting lines
Mockup of artwork created by the planetary patterns as posters and the code on the computer

Video Demonstrations

All Planets
Mercury, Earth, Mars, and Saturn
Venus, Earth, Jupiter, and Uranus
Earth, Neptune, and Pluto

Final Thoughts and Moving Forward

I found this project very exciting to make as coding is something I have a limited experience with. Reviewing all I have worked on so far, there are parts of my project that need improvement and other aspects I would like to include to push it further. I want to incorporate a way for the music’s amplitude to determine the speed of the planets and their patterns. I also think it would be beneficial to include buttons for the viewer to choose which planets are connected on the canvas together to make it more interactive as well. Overall I am very happy with how this project turned out as I was able to explore a different area of image making and experiment with new ideas as well. This project gave me creative freedom to explore many areas of interest outside of design and bring them into coding. I hope to continue to do so in the future.

Poster mockup of artwork created by the planetary patterns

Credits

Design

Hanna Lipski

Art Direction

Jenny Kowalski

Institution

Tyler School of Art and Architecture

This project was completed as a part of the Spring 2021 Creative Coding class at Tyler School of Art and Architecture. For more projects from this class, visit the Creative Coding medium feature page.

--

--

Hanna lipski
TylerGAID

Graphic and Interactive Design Student at Tyler School of Art, Temple University