Category: Nature of Code

Posted on

NOC – Week 2: Petals in Flames – Tiger Tian

Date: 02-24-2019

Click here to visit on p5 Web Editor

Before starting with this assignment, I thought a little bit about what “Nature of Code” could mean, and it occurred to me, why not begin with something that is most commonly deemed beautiful in nature – flower?

So the flower looks like this, with five red petals around a yellowish center. Each petal is made up of 200 squares randomly generated from a class, wandering in all directions and forming a flame-like shape. Interestingly, fire is also a production of nature! translate( ) and rotate( ) function allows me to duplicate one petal and make five. I initially wanted to make the petals spin around the center, but it would make it a lot messier since the “burning flames” are already visually striking. The center comprises 200 shivering little circles. The shiver effect is realized through giving the circles a constantly changing random speed between -1 and 1. So the two classes here are Petal and Flower (the center).

The first method I gave Petal is called wind( ). What it does is to “blow away” the squarish pieces in the petals – by giving them a faster speed towards outside the screen, as shown below. This method is triggered when the mouse is pressed.

The second method color( ) changes the color of petals from red into blinking pinkish colors, as shown below. It happens when the mouse touches the center of the flower.

And thanks to rotate( ) function, it’s very easy to modify the number of petals. A new petal appears upon every mouse click, until it reaches the maximum I set of nine petals, after which the number decreases.

Posted on

NOC – Week 1: p5 basics (Wentao)

For this assignment, I mostly focused on the function of mouse position and mouse pressed function.

When moving the mouse around the canvas, you can change the background color according to the position of the mouse.

When you click the mouse, a white ellipse will appear at the position of the mouse and will move around with the moving of the mouse.

When you press the mouse, the size, color, and transparency of the ellipse will change randomly. And when you stop pressing the mouse, the color will change back to white again.

Posted on

NOC – Week 1: p5.js Sketch – Yang Gao

Assignment: 

For my first week Nature of Code project, I created a sketch of mimicking how we stir the pearl red bean milk tea – when you put the straw in the bubble tea, it will separate the pearl and the red bean.

Sketch: https://editor.p5js.org/yg1273@nyu.edu/present/LcvSi1QMl

Question:

  1. For p5 web editor, how can we add music?
  2. If I type print() in the p5 web editor, it will pop up the web print page, how can we prevent it?
Posted on

NOC – Week 1: dancing line – Susan Xu

My experience with p5.js seldom touched upon interaction or animation, so I incorporate mouse in my code. I move a small circle across the screen repeatedly, forming a thin line with trajectory. When the mouse is pressed, the line will dance up and down. You are the one to decide whether the electrocardiogram is live or dead.

A screenshot of the code. With trajectory in the background and a dancing ball in the front.

Posted on

NOC-Week 1: p5 basics (Skye)

For assignment 1, I made my sketch based on the course example “bouncing ball_fixed”, and made the following changes:

  1. Instead of only having one ball bouncing around, I used array and for() loop to create several balls and let them move together. 
  2. I changed the color and size of the balls with reference to their moving position. 
  3. I set the frameRate() to 60 to slow the movement slow so that the bouncing effect looks more naturally. (I wonder if change the value of gravity can have the same outcome.)
  4. Besides bouncing balls, I added several random lines which will appear when mouse is pressed to add on the effect. 
      1. Notes: Based on all the changes, I also played around with some variables and made two different effects:

assigment1 demo1

This one is made with the diameter of the ellipse as (x[I]/i*5).

assignment1 demo2

This one is made with the diameter as (x[I]/I/5).