Triangular Patterns With Animation

Screenshot 2016-03-09 16.23.29

http://dereknassler.com/creative-coding/triangles2/build/

This P5 sketch involves constantly shifting triangle patterns with an invisible grid of possible triangle positions where only a single triangle may occupy a particular grid location at a given moment.

Various attributes can be changed with the control panel on the right but the changes will not be applied until the user clicks on the ‘resetScene’ button in the same control panel. There are a few exceptions including: the scale of the scene can be modified in realtime and the sounds are controllable with immediate affect (i.e. try changing sounds by modifying the ‘useAlternateSounds’ control, by changing the volume or muting it entirely).

Decreasing the number of rows or columns will increase the size of the triangles. Increasing the number of rows/columns will decrease their size and will result in a more sparse layout of shapes unless the ‘numBlocksOnReset’ attribute is increased as well.

To get a feel for some of the possibilities, try clicking on the ‘randomConfiguration’ button.

Also try changing the colour mode before changing or resetting the configuration to see its effect.

 

Advertisements
Triangular Patterns With Animation

Triangle Patterns in Grid Of Time-Delayed Frames

Screenshot 2014-11-16 17.32.47

I wanted to experiment with image buffers and repetition and movement with simple geometric shapes. So I built this javascript, p5js, HTML5 canvas thing.

You can view the live running code here:

http://dereknassler.com/p5/graphics-exp/exp6/index.html

Here is a capture of a run:

Triangle Patterns in Grid Of Time-Delayed Frames