Divination: Night Sky
Description
Above you see a parameterized rendition of the night sky. Stars sparkle in random places and sizes across the canvas. Move your mouse left to right, and the phases of the moon change accordingly. Move your mouse up and down, and the shade of the moon changes from red-orange to a pale yellow. Click on the canvas to see the sky shade change to random shades of blue and purple.
Design Process
Thinking about forms that can be parameterized, the sky and phases of the moon came to mind. I sketched out a general idea I had for the divination machine below:
First, I worked on the stars, and initialized different random variables to create a variance in their x-positions, y-positions, and size. I used a for-loop so that thirty stars will appear on the canvas at any given time.
Next, I worked on the moon. The moon moves diagonally across the screen and changes phases with the mouseX variable. Additionally, the moon glow increases as the moon becomes fuller. The second circle that creates the moon crescent moves at a faster rate than the moon itself to result in a phase change. The moon color also changes with the mouseY variable, with the red-value increasing as one moves their cursor up the screen.
Last, I worked on the sky color, which changes with mousePressed. Each click of the mouse results in a random variable between 0 and 255 for the background's blue value, and a random variable between 0 and 50 for the background's red value.
The following details took the most amount of trail & error:
- 1. Range adjustment of R & B (from RGB) in the background to limit randomization to different shades of blue and purple
- 2. Range adjustment of R to limit moon color to different shades of red-orange and pale yellow
- 3. Star arrangement: Should they be circles or rotated squares? At what frame rate?
Reflection
Through this assignment, I have discovered how to leverage function draw's looping to my advantage. I also discovered how to play with ratios, while still using the same variable, to get different rates of change for different variables. For example, I used a ratio to increase the rate at which the ellipse that creates the moon crescent so that it moves faster than the actual moon, thus creating a moon-phase effect. Overall, creating each variable with intentionality reminded me how different the night sky can at any time, and all the factors at play to create the scenes we see when we look up.