NOC – Week 1: Basic p5.js – Katie Pellegrino

Assignment 1

Link to Assignment

For this assignment, I just opened a window and began playing around. I first created the circle which, on the initially black background, reminded me of the moon. So I continued to create a very basic scene of the grass and sky, allowing the ‘moon’ to follow the mouse. 

I then used the map() function to map the mouseY position to a value between 0 and 255 (or whatever the maximum color value I wanted). I stored a series of these variables and used them to describe the scenery, allowing it to get fuller/brighter or darker based on the position of the mouseY. This allows the environment to change based on how high the moon is in the sky.

For fun, I decided to split the screen to allow for both a rising ‘moon’ and a rising ‘sun.’ So on the left, the higher mouseY, the brighter the environment. The opposite is true on the right.

Although it’s not designed well to be intuitive to click, if the user does venture in this direction, I created a counter variable that cycles through different ‘scenes’ whenever mousePressed() is called. So after the simple moon/sun scene, the central line simply expands to a black screen followed by an infinite reprinting of various randomly colored, spaced, and sized circles. 

IMG_9276

(The above link is a video. It’s supposed to be in the post directly, but I’m not sure if it will load correctly).

Leave a Reply