CONCEPT
I was inspired by the Solar System, specifically by Saturn. I wanted to draw a planet in the night sky, however, I don’t really know how to do smooth gradients and complex coloring in p5.js, so instead, I took the shape of one of the most easily recognizable planets to create my own version of it.
IMPLEMENTATION
My sketch may not look too complicated, but it took me a long time to figure it out. The main challenge was “filling” the body of the planet with parallel lines. I thought that I could imitate volume by drawing a circle out of parallel ellipses. However, I didn’t know how to make them change their width in a smooth way so as to form a circle (look at the reference image below). I have tried checking the coordinate ranges with if-statements and manipulating X points of the ellipses there, but it didn’t quite behave as I expected it to. I then moved on to using lines instead, expecting that it could be easier to implement, which it was, but it took me at least 10 minutes of staring at the screen expecting to recall something useful from math classes. The answer to my question was the Pythagorean theorem, where c^2 = a^2 + b^2. In my case, I have c and a and am looking for b, so the function that I have used to find X_1 and X_2 for a line was:
//use Pythagorean theorem to find point X_n
function differenceOfSquares(num1, num2) {
let diff = num1 * num1 - num2 * num2;
return sqrt(abs(diff));
}
My sketch uses two classes to build planet body stripes and planet rings. Sketch elements are drawn in the next order: stars -> planet body -> planet rings -> arc to cover the back side of planet rings -> planet rings. I found it to be the easiest scheme. Planet rings and body rings have random red values in the stroke color, and random stroke weight (0 or 1) to imitate rotation. Planet rings have a wider range of red values than body rings. I figured that it look better this way. On top of the rings, there are floating rocks drawn as points with random stroke weights and coordinates. These rocks make the planet feel more alive and less plain. Rotating the whole thing was easier this time, now that I know that rotate function uses radians and not degrees as I assumed when working on my first homework submission. The frame rate is 8, which is fast enough to feel like the planet is rotating and slow enough to see the details and get overwhelmed by the picture.
ASPECTS TO WORK ON
There is a feeling of movement in the sketch. However, I can’t tell where or how exactly it is moving. Everything is “rotating” at the same time at the same speed, making me feel disoriented. I feel like I could have used Perlin noise for the sky and the planet’s body stripes to make the picture move smoother. I also feel like there could have been some text there because it gives me wall poster vibes but that’s just a thought.