Canvas: Strange, Creepy Cables

Ciprian on Thursday, March 24, 2022 in Canvas
Last modified on Monday, July 8, 2024

A while ago I was playing with some basic trees drawn in Canvas using JavaScript. The longer I played, the stranger the shapes got. Here’s my experiment below, along with some code explanations.

Scroll down to see the final result.

This article is part of the JavaScript Canvas series where I post experiments, JavaScript generative art, visualizations, Canvas animations, code snippets and how-to’s.

Two objects – Branch and BranchCollection – are required. The information of the branch currently being drawn is stored in the Branch object, while all branches are stored in BranchCollection.

First, I set the initial settings for the Canvas:

var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('canvastree');
canvas.width = width;
canvas.height = height;

I then set the number and radius of the initial branch:

// Set the initial number
var n = 2 + Math.random() * 3;

// Set the initial radius
var initialRadius = width / 50;

I then create a new BranchCollection object to place all branches:

branches = new BranchCollection();

The BranchCollection object here has the following methods:

add(): add a new element
remove(): removes an element
process(): For each element in the collection, call the element’s own processing method in turn

For the created BranchCollection object, I add the initial branches in turn and initialize them:

for (var i = 0; i < n; i++) {
    branch = new Branch();
    // Based on the midpoint of the canvas, the left and right occupy the width of an initialRadius
    // Calculate the initial x coordinate branch.x according to the serial number
    i = width / 2 - initialRadius + i * 2 * initialRadius / n;
    branch.radius = initialRadius;

    // Add the new branch to the set to
    branches.add(branch);
}

Branch objects have these properties:

x, y: coordinate values
radius: Each branch displayed on the screen is actually a combination of circles with gradually decreasing radius, radius is the radius of the circle
angle: the angle at which the branch extends upward from the bottom, the initial value is PI/2
speed: a parameter that controls the speed at which the branch extends
generation: The current branch is the first generation. When a fork occurs, the generation will increase by one.
distance: the length of the current branch, used to control the probability of bifurcation
fillStyle, shadowColor, shadowBlur: drawing parameters

The methods of the Branch object are:

process(): The main processing part, calling several other methods
draw(): Draw a circle at the current coordinates
iterate(): Extend the branch up, update the coordinate value, reduce the radius, and add a random value to the angle
split(): According to the distance value to determine whether the current can be forked, if possible, create several Branch objects to join the collection, and delete the current parent object
die(): Determine whether the current object needs to be deleted

Finally, the setInterval() function is used to generate an image, and all branches are traversed every time interval to draw graphics, update coordinates, generate offspring, etc.

var interval = setInterval(function () {
    // Process each element in the collection
    branches.process();

    if (branches.branches.length == 0 ) {
        clearInterval(interval);
    }
}, 20);

See the final result below. Reload the page to see another generated blob.