Pens from Dan Gries https://codepen.io/RectangleWorld/ en nospam@codepen.io Copyright 2024 2017-05-01T04:59:48-07:00 A Pen by Dan Gries https://codepen.io/RectangleWorld/pen/LyyQXr https://codepen.io/RectangleWorld/pen/LyyQXr Dan Gries

See the Code - See it Full Page - See Details

]]>
A Pen by Dan Gries 2017-05-01T04:59:48-07:00
ColorBoids: boids in five dimensions https://codepen.io/RectangleWorld/pen/DLWoXb https://codepen.io/RectangleWorld/pen/DLWoXb Dan Gries

See the Code - See it Full Page - See Details

The <a href="http://en.wikipedia.org/wiki/Boids">boid algorithm</a> in five dimensions: Two dimensions for position, three dimensions for color.

]]>
ColorBoids: boids in five dimensions 2013-06-10T18:14:17-07:00
Use a dark gray background! https://codepen.io/RectangleWorld/pen/kBQbro https://codepen.io/RectangleWorld/pen/kBQbro Dan Gries

See the Code - See it Full Page - See Details

If you're fading out your animation frames by painting a transparent black rectangle over the top, you're leaving behind ugly gray remnants. You won't see them in Safari, but you'll see them in Chrome. The difference is in the way these browsers round to whole number color values. So use a gray background of the same color as the remnants. The gray to use is floor(255 - 1-(2*alpha)), where 'alpha' is the alpha of the black you're coloring over the top. If you're interested, there's more info at http://rectangleworld.com/blog/archives/871

]]>
Use a dark gray background! 2013-05-02T19:19:39-07:00
Endlessly Scrolling Random Braids https://codepen.io/RectangleWorld/pen/kXXLLb https://codepen.io/RectangleWorld/pen/kXXLLb Dan Gries

See the Code - See it Full Page - See Details

Randomly generated braids in HTML5 canvas. More information (and variations) at http://rectangleworld.com/blog/archives/733

]]>
Endlessly Scrolling Random Braids 2013-02-25T19:31:57-07:00
A Pen by Dan Gries https://codepen.io/RectangleWorld/pen/DKdXPq https://codepen.io/RectangleWorld/pen/DKdXPq Dan Gries

See the Code - See it Full Page - See Details

forked from http://codepen.io/anon/pen/pijdg

]]>
A Pen by Dan Gries 2013-01-20T02:45:35-07:00
Randomized Fractal Gradient Texture in Canvas https://codepen.io/RectangleWorld/pen/krNYbJ https://codepen.io/RectangleWorld/pen/krNYbJ Dan Gries

See the Code - See it Full Page - See Details

Gradients with many color stops defined by a fractal subdivision process are layered on top of each other to produce some interesting textures. More notes on the code at http://rectangleworld.com/blog/archives/654

]]>
Randomized Fractal Gradient Texture in Canvas 2012-08-20T18:14:08-07:00
Colorful Cellular Automaton https://codepen.io/RectangleWorld/pen/nJWZdk https://codepen.io/RectangleWorld/pen/nJWZdk Dan Gries

See the Code - See it Full Page - See Details

Cellular automaton based on some flocking algorithm ideas. Cells change RGB values depending on only four neighbors (up, down, left, and right). Cells try to stay close to the same color as their neighbors, but not too close, while also trying to move in a color direction (in RGB space) similar to the color motion of their neighbors. I've left it running for long periods of time, and have observed no apparent steady state or periodic behavior. (It's a little complicated to explain here...see <a href="http://rectangleworld.com/blog/archives/587">here</a> for more details.)

]]>
Colorful Cellular Automaton 2012-06-25T15:10:11-07:00
Imperfect Rectangles https://codepen.io/RectangleWorld/pen/njBVzn https://codepen.io/RectangleWorld/pen/njBVzn Dan Gries

See the Code - See it Full Page - See Details

More exploration with coded imperfection. Imperfect rectangles created with randomized subdivision. A very subtle color gradient is created with the same subdivision algorithm. [Update: the gradient before was done by changing alpha. I decided I liked having the r, g, and b values independently change according to their own subdivision-generated variations.] Similar to my <a href="http://codepen.io/RectangleWorld/pen/imperfectcircles1">Imperfect Circles</a>, but the code has been modified considerably to be better suited to (imperfect) straight line drawing.

]]>
Imperfect Rectangles 2012-06-25T03:04:31-07:00
Imperfect Circles https://codepen.io/RectangleWorld/pen/napvqA https://codepen.io/RectangleWorld/pen/napvqA Dan Gries

See the Code - See it Full Page - See Details

Pleasantly imperfect spots drawn on the canvas. Imperfection created by fractal subdivision. [Updated: I forgot to close the curves with context.closePath();]

]]>
Imperfect Circles 2014-03-07T04:43:43-07:00