Week 3: Drawing Bauhaus Patterns

Screen Shot 2016-10-11 at 11.19.30 AM.png

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.

Screen Shot 2016-10-11 at 11.07.40 AM.png

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.

14502111_10210983598010141_485909198_n.png

Eventually we combined those aforementioned features, along side a scaling bar that controls the size of the “canvas”, and thus controlling the generated pattern.

https://alpha.editor.p5js.org/embed/SJmA92r6

Screen Shot 2016-10-11 at 11.19.17 AM.png