Warning: Declaration of Jetpack_IXR_Client::query() should be compatible with IXR_Client::query(...$args) in /home/clients/7267bc096562fcdb78c0ab60d3ac51fb/web/blog/wp-content/plugins/jetpack/class.jetpack-ixr-client.php on line 91
{"id":921,"date":"2016-11-17T12:48:09","date_gmt":"2016-11-17T12:48:09","guid":{"rendered":"http:\/\/barradeau.com\/blog\/?p=921"},"modified":"2016-11-17T12:48:09","modified_gmt":"2016-11-17T12:48:09","slug":"triangle-grid-breakdown","status":"publish","type":"post","link":"https:\/\/barradeau.com\/blog\/?p=921","title":{"rendered":"Triangle grid breakdown"},"content":{"rendered":"

this is a reply to @upupzealot asking for more details about this pen<\/a>.<\/p>\n

there is no random so to speak, the PRNG (Pseudo Random Number Generator) creates a seed-based (& therefore reproductible) series of seemingly random numbers.
\nthe first thing I do, line 1 is to create a self contained PRNG object (it’s a Mersenne twister<\/a> btw):<\/p>\n

var PRNG = function( exports )<\/pre>\n
then I set up a canvas \/ context, nothing special.<\/p>\n
in the update() function, the first thing I do is to reset the PRNG value: `PRNG.setSeed(3);` to make sure I’ll get the same random sequence each time.<\/p>\n
then the first loop creates vertices (2D points)
\nit’s done in 2 steps, first create count<\/em><\/strong>\u00a0points (lattices) around the center at a random angle a<\/em><\/strong> and a random radius r<\/em><\/strong>.
\nthen create spawn<\/strong><\/em>\u00a0points around this lattice also at a random angle but with a much smaller radius offset<\/em><\/strong>.<\/p>\n
var r, a, v, o;\r\nvar count = 20;\r\nvar spawn = 40;\r\nvar offset = 100;\r\nvertices = [];\r\nfor( var i = 0; i < count; i++ ){\r\n\r\n    r = ( PRNG.random() - .5 ) * window.innerWidth \/ 2;\r\n    \/\/ NB (i%2==0?-1:1) flips the direction of every other particle.\r\n    \/\/ the \"even\" lattices rotate clockwise \r\n    \/\/ and \"odd\" lattices rotate counter clockwise.\r\n    a = (i%2==0?1:-1) * Date.now() * 0.0001 + PRNG.random() * Math.PI * 2;\r\n\r\n    \/\/create a vertex: an array where [0] is x and [1] is y\r\n    v = [\r\n        Math.cos( a ) * r,\r\n        Math.sin( a ) * r\r\n    ];\r\n    \/\/ unshift() is like push() but at the biginning of the array\r\n    vertices.unshift( v );\r\n\r\n    \/\/this is where the \"children\" are build around the lattice\r\n    for( var j = 0; j < spawn * ( .5 + PRNG.random() ); j++ ){\r\n\r\n        r = PRNG.random() * offset;\r\n        a = (j%2==0?-1:1) * Date.now() * 0.0002 + PRNG.random() * Math.PI * 2;\r\n\r\n        \/\/ as the lattice was \"unshifted()\" to vertices and not pushed,\r\n        \/\/ it is at position 0 in the array, so vertices[0] is the point we created above\r\n        o = vertices[ 0 ];\r\n\r\n        \/\/we use it as the center to position this vertex\r\n        v = [\r\n            o[0] + Math.cos( a % r ) * r,\r\n            o[1] + Math.sin( a % r * 2 ) * r\r\n        ];\r\n        vertices.push( v );\r\n    }\r\n}<\/pre>\n
then we have some context reset and we call yolo a given amount of times so it renders at different scales.<\/p>\n
var m = size\/8;\r\nfor( i = 8; i <= m; i *= 2 ){\r\n    ctx.globalAlpha = (1 - i\/m) * .1;\r\n    yolo( vertices, i, size, size );\r\n}<\/pre>\n
the yolo() method will build a virtual equilateral triangles’ grid to determine the closest lattices of the grid to each vertex then decide how to render it. it can be either:<\/p>\n