Moire Pattern on p5

I tried to play with more “for loop” here while incorporating functions. It was a bit tough but with more practice I think I can move on to the more complex stuff – like arrays and classes.

* Demystify For Loop*  The uncommented code is the same as the for loop below!

// line(0 + (0 * 20) , 0, (0 * 20) , height);

// line(0 + (0 * 20) , 0, (0 * 20) , height);

// line(0 + (1 * 20) , 0, (1 * 20) , height);

// line(0 + (2 * 20) , 0, (2 * 20) , height);

for (var i = 0; i < width/10; i++) {

line(0 + (i * 10) , 0, (i * 10) , height);

}

 http://alpha.editor.p5js.org/embed/SymOZWj2b

I wanted to add a moving circle that animates vertically on its own to show the real effect of a moire pattern!

 

Leave a comment