Creative Coding: Celestial Patterns
Coding the movements of the planets in relation to one another as they travel 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.
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.
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:
- Coding Challenge #55: Mathematical Rose Patterns
- Coding in the Cabana 1: Maurer Rose
- Coding Challenge #7: Solar System in Processing — Part 1
- Code an Audio Visualizer in p5js (from scratch)
- Creative Coding — Week 12 — Audio and p5.Sound
- https://openprocessing.org/ was also a great source of inspiration
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:
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;
//Neptunevar 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.
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);}
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) {
//Neptunevar m = startM + scalar7 * cos(angle/6.5);var n = startN + scalar7 * sin(angle/6.5);}
Adding Music and Background Problems
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.
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
Video Demonstrations
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.
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.
