Picking Up Challenging Concepts: Creative Coding
Role
Designer
Project Type
Coding
Art Direction
Jenny Kowalski
Scientific advancements have given us unprecedented knowledge of the planets in the Milky Way, unlocking new possibilities for space exploration. Yet for centuries, mathematicians, astronomers, and artists have documented the cosmos to reveal a history of deep connection between human observation and creativity. Since the dawn of our civilization, our solar system has shaped cultural identities and human belief systems. While modern astronomy views our planets through a purely scientific lens, our solar system also possesses a hidden artistry that has inspired scientists and artists throughout human history.
Many ancient maps and astronomical drawings depict patterns and illustrations created by the planets, revealing a hidden language of the cosmos. When lines are drawn connecting planets as they orbit the sun, their movements reveal intricate and invisible Mandala-like patterns in the sky. The patterns are unique to each planetary combination. My goal was to bring this hidden cosmic art to life by using p5.js to code the planet’s rotation around the sun in relation to earth in a visualization of their celestial dance.
Project Goal
I began the project by mapping each planet’s position relative to Earth and the Sun, using this as a foundation for building the program. Rather than replicating exact orbital scales, which would make the outer planets appear incredibly slow, I adjusted their speeds for a more balanced representation. After researching planetary motion and relative distances, I applied trigonometry to define their orbits. Learning mathematical roses (a polar graph that forms petal-like patterns) was particularly helpful, as it informed how planetary paths could generate similar repeating visuals. Experimenting played a critical role in helping me understand both the code and the behaviors of the solar system.
Inspiration
I started my discovery phase by seeking other artists who have created similar projects on planetary motion. Videos like those by CaptainGranit show a realistic depiction of planetary motion while Tyler Hobbs was a great source of inspiration on generative art, algorithms, and how mathematics and art are interconnected.
Research
Trigonometry 😳
I used trigonometry to model each planet’s orbit, defining their rotations and relative speeds to approximate how they travel around the sun. After researching each planet’s orbital rotation, I translated those values into proportionate ratios to establish their paths. I then adjusted the sine and cosine functions (scaling their angles through multiplication and division) to accurately reflect the differences in orbital speed, resulting in motion that is both mathematically accurate and visually coherent.
Creating the Orbiting Lines
I began by coding lines to connect Earth with other planets to generate the visual patterns, but ran into challenges when trying to link multiple moving points on a single canvas. The motion caused the lines and planets to leave behind heavy trails, disrupting the clarity of the patterns. To resolve this, I separated the system into two layered canvases, one dedicated to rendering the orbit lines and another for the planets and sun. This approach allowed both elements to display simultaneously while preserving clean, continuous line work.
Here is the rotation and orbiting lines for Neptune(m,n), and to Earth (e,f):
if (developer === true) {
//Neptune
extraCanvas.line(e, f, m, n);
}
This line of code is saying that if Neptune is “On” (visually on the canvas with active code) then Neptune (m, n) should connect to Earth (e, f) with a line on the extraCanvas.line (extraCanvas is a clear canvas layer that the lines move on as to not block the bottom canvas with the background and planets)
I began by constructing the solar system on a canvas that functioned as a graph, coding each planet as an ellipse positioned and scaled using precise X and Y coordinates. Once their placement was established, I introduced orbital motion and drew lines connecting each planet to Earth to generate the evolving patterns. The planets were initially represented as simple ellipses, which I later replaced with the custom illustrations I created.
Process
The planets were created using digital watercolor to capture their characteristics without preventing the program from running due to large files. I referenced imagery from NASA to ensure each planet was represented as accurately as possible. After completing the illustrations, I exported each planet and the sun as transparent PNGs and uploaded them into the code, replacing the original ellipses with more detailed, expressive visuals.
Visual Design
At the start of this project, I had a limited understanding of programming, and under a tight deadline, I needed to quickly learn both coding and complex mathematical concepts to achieve my goal. While the final piece successfully visualizes planetary motion, there are areas where the execution could be refined. Some portions of the code remain inefficient or difficult to follow, and certain visual elements feel slightly unpolished on the canvas.
With more time and experience, I would tidy up the code to improve clarity and performance, making the system easier to understand and maintain. I would also revisit the underlying equations to better synchronize the planets and their connecting lines to create more cohesive motion. Despite these limitations, the project successfully demonstrates the potential of combining mathematics and art to reveal the otherwise unseen patterns of our solar system.
Reflections
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
Link to Code on p5.js
The final result is a program that brings together art, science, and mathematics to visualize the motion of the planets across the sky. Through extensive research, along with learning coding and trigonometry, I achieved my goal of modeling planetary movement in a way that is both accurate and visually engaging.
This project expanded my understanding of design, demonstrating how creativity, science, and mathematics can work together to produce meaningful experiences. History reflects this intersection- figures like Galileo Galilei, Maria Clara Eimmart, and Leonardo da Vinci all combined scientific and cosmic curiosity with artistic expression. By engaging with complex concepts like planetary motion through code, we can not only deepen our technical skills but also expand our ability to think creatively and approach problems from new perspectives.