This week we paired up in groups of two and used p5.js to create graphical patterns that involves both random elements and a controller that changes the performance of the piece.
We first began by testing with random lines and random colors, within a restricted canvas. In this case, the “line” function is used to create each individual line. The start point (x1,y1) and end point (x2,y2) are random values taken from within the range of canvas width and canvas height. The “stroke” function also involves random RGB value, though with a greater emphasize on blue, and allows each line drawn to have a different color.
We then experimented further with the “line” function. Instead of drawing one per draw loop, we decide to draw two lines each time, and the (x1,y1) and (x2,y2) of the two lines should share some common parameters.
Eventually we combined those aforementioned features, along side a scaling bar that controls the size of the “canvas”, and thus controlling the generated pattern.
This week I coded a small game called “Kill the Bugs” using P5.js.
A dozen of flies are randomly mapped onto the computer screen each time when the program is refreshed. Those flies randomly shivers and moves around, while slowly straying away from the edge of the frame. The goal is to kill as many files as possible before they get away.
There are currently two separate versions of the code: the first version shows the cursor, and leaves a stain and dead body of the fly when it is killed; the second version shows the right hand, and the fly disappears when it is clicked on.
(Photo credit: Eadweard Muybridge. Woman. Jumping on “step-stones”, 1887.)