Category: Nature of Code

Posted on

Week 1 : Basic Sketch on p5js – Ji Hwan Shin

Link: https://editor.p5js.org/jihwanshin96/sketches/oRqYJp0Mf

For my basic sketch, I wanted to familiarize myself with some functions I’ve learned in class as well as incorporate some new ones I learned in the references page. I wanted to make an interactive sketch that has text and image files. So in order to wrap my text in moving shapes I set a width and height variable to frameCount + 200, allowing the shapes to grow in the frame. I set the text in the center by using textAlign in the set up function. I also utilized a conditional to command and image to show up once mouse is pressed.

Posted on

NOC – Week 1: P5.js practice – Andrew Joslyn

Link: https://editor.p5js.org/adj311/sketches/Oiz7i0tcU

I’ve always just liked stuff that looks cool, and I wanted to practice using variables and conditionals rather than simple(r) things like mouseX,Y and mouse clicks, so I tried to make something abstract that changed over time. I like the idea of having some shapes move constantly while others move sporadically, because there are always patterns in the randomness. The initial few seconds after starting the sketch are completely chaotic, and I could have done a bit to tidy it up, but after a while the concept begins to form, and black space is randomly created while being constantly filled in every few seconds. I added a focal point to both direct the eye to the middle of the sketch and so to remind the viewer to stay there. There is a pretty clear indication that the sketch changes over time, but it does kind of “expire” after letting it run for a while (a minute or two), which will reduce the random and chaotic element to essentially nothing, and the sketch will just be four rectangles growing from the center.

Posted on

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).