The Setup: Laying the Foundation

The first part of the code initializes the environment and sets up the essential parameters, such as colors and the number of tree-like branches, which are splattered across the canvas.

const ratio = 1 / 1;
const prefix = 'cyPollock';
const features = {}; 
let resizeTmr = null; 
let thumbnailTaken = false;

• Ratio & Prefix : We define a square canvas (1:1 ratio) and give the artwork a prefix for file naming.
• Features : This object will store random parameters, such as colors and the number of branches.
• Resize Timer & Thumbnail Flags : These help with the responsiveness of the canvas and ensure that a thumbnail preview is captured.

The Color Scheme: Embracing the Abstract

Next, we dive into the random selection of background and branch colors that will set the tone of the artwork.

const backgroundColours = ['#2F0909', '#2B1B17', '#040720', '#151B54', ...];
const branch1colors = ['#DADBDD', '#EEEEEE', '#98AFC7', '#1589FF', ...];
const backgroundIndex = Math.floor($fx.rand() * backgroundColours.length);
features.backgroundColour = backgroundColours[backgroundIndex];

• Random Backgrounds & Branch Colors : Using arrays of hex color codes, we randomly select shades for the background and branch elements.
• Branch Variations : To ensure no two branches are alike, multiple color selections are made, creating a dynamic visual explosion.

The Structure: Building Trees with Recursive Algorithms

Now, the magic begins with the recursive drawTree function, which mimics the fractal-like growth of branches.

function drawTree(ctx, w, h, color, x , y, depth) {
    ctx.strokeStyle = color;
    ctx.lineWidth = $fx.rand() * w / 100 + w / 200;
  
    if (depth < 13) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y - h / 50);
        ctx.stroke();

        const newX = x;
        const newY = y - h / 10;
        angle = Random(-Math.Pi, Math.Pi);
        ctx.save();
        ctx.translate(newX, newY);
        ctx.rotate(angle);

        if ($fx.rand() < 0.3) {
            ctx.rotate(0.6);
            drawTree(ctx, w, h, color, 0, 0, depth + 1);
        } else {
            drawTree(ctx, w, h, color, 0, 0, depth);
        }
        ctx.restore();
    }
}

• Recursive Branching : Each branch can "split" into smaller branches, and the process repeats recursively to create a natural growth pattern.
• Randomized Angles : The branches rotate at random angles, mimicking the unpredictable nature of tree branches in the wild.
• Depth Control : The recursion stops after a depth of 13 is reached, limiting the fractal depth to ensure balanced visuals.

Painting the Canvas: Drawing the Trees

The drawCanvas function is the heart of our visual creation, controlling how each tree is drawn across the canvas with varying sizes and positions.

const drawCanvas = async () => {
    window.cancelAnimationFrame(nextFrame);
    const canvas = document.getElementById('target');
    const ctx = canvas.getContext('2d');
    const w = canvas.width;
    const h = canvas.height;

    ctx.fillStyle = features.backgroundColour;
    ctx.fillRect(0, 0, w, h);

    for (let i = 0; i < features.numofBranches; i++) {
        const color1 = features.Branchcolor[i];
        const W1 = $fx.rand() * w;
        const H1 = $fx.rand() * h;
        const x = $fx.rand() * w / 2 + w / 2;
        const y = $fx.rand() * h / 2 + h / 2;
        const depth = 0;

        drawTree(ctx, W1, H1, color1, x, y, depth);
    }
};

• Dynamic Canvas Setup : This part clears and redraws the canvas. We set the background and invoke drawTree for each branch, positioning them randomly across the canvas.
• Randomized Position & Size : Each tree has a random starting position and size, ensuring no two drawings are the same.

User Interaction: Making It Dynamic

The code responds to events like resizing or pressing certain keys to trigger canvas downloads or adjustments in the layout.

document.addEventListener('keypress', async (e) => {
    if (e.key === 's' || 'S') autoDownloadCanvas();
});

• Save Functionality : Pressing ‘s’ allows users to save their artwork as a PNG, ensuring their masterpiece can be downloaded and shared with ease.

Animation Ready: Keeping It Fluid

For those who wish to animate their creations, the nextFrame logic keeps the canvas updated dynamically:

if (animated) {
    nextFrame = window.requestAnimationFrame(drawCanvas);
}

This ensures the visuals can continuously evolve, creating an even more mesmerizing experience.

Bringing It All Together

CyPollock blends randomness with structure, creating abstract generative art that captures the unpredictability of nature in a digital form. By utilizing recursive algorithms, random color palettes, and interactive features, this code crafts unique, ever-changing visuals reminiscent of Pollock’s iconic works.

To try this yourself, simply click here to see the full code in action and craft your own digital masterpiece. Let the canvas come alive with color and creativity! 🎨

With love, chaos, and endless inspiration, ✨🌿

_Frostbond Coders