Archives for Rectangle World – HTML5 Canvas and JavaScript: Tutorials and Experiments

Smooth HTML5 Canvas Gradients with Floyd-Steinberg Dithering


Create very smooth gradients in the canvas with this easy to use JavaScript class. Subtle gradients across a wide area can be produced without noticeable banding.

Read more…

Interesting textures with layered fractal gradients


Some interesting gradient textures are created with a fractal subdivision process.

Read more…

Updated With New Features: Beautiful Fractals in HTML5 Canvas


A newly updated fractal flame generator in HTML5 canvas, with more controls and features. Apply rotational or mirror symmetries, or a non-linear variation which can produce pretty swirls. Try out the eight different presets for a quick start.

Read more…

A Colorful Cellular Automaton in HTML5 Canvas


Watch a cellular automaton create a pleasantly evoloving tapestry of color. The algorithm makes use of some ideas from a flocking algorithm. It is completely deterministic but the resulting color changes appear to be unpredictable.

Read more…

HTML5 Canvas: Beautiful fractals with the chaos game.


Beautiful fractals are rendered in the HTML5 canvas with a simplified fractal flame algorithm. Have fun generating fractals with randomized maps while saving the images you like.

Read more…

More Generative Art in HTML5 Canvas – Sweeping Fractal Lines, version 2


More generative art experiments with smoothly transitioning lines drawn on the canvas. Parameters for drawing the lines are determined by a fractal subdivision process similar to my earlier art experiments.

Read more…

Generative Art in HTML5 Canvas – Sweeping Fractal Lines


Slowly morphing fractal curves sweep across the canvas, creating very pretty evolving and flowing structures. I present seven different variations on this theme, using different colors, gradients, and drawing parameters. Included is the necessary code for exporting images from the canvas to a saveable format.

Read more…

Pleasantly imperfect rectangles using fractal subdivision


I extend the ideas in my post on drawing imperfect circles, now to draw imperfect rectangles. I tweak the fractal subdivision process used to determine the randomness, and create a couple more examples of simple but pleasant shapes that appear to be drawn by a human.

Read more…

Imperfect Circles – Aesthetic imperfection with fractal subdivision


Getting a computer to draw a shape in the way that a human would requires programming in some imperfection. I show you how a fractal subdivision algorithm can be used to draw some pleasantly imperfect circles.

Read more…

Fire Trails – colorful fading trails in a particle effect


I modify an earlier particle effect to create colorful, fiery trails behind the particles as they fly around and bounce off circular walls.

Read more…