Creative Coding: Generative Art with JavaScript

Generative art blurs the line between programmer and artist. By writing algorithms that incorporate randomness and rules, we can create artworks that surprise even their creators.

What is Generative Art?#

Generative art is created through autonomous systems—code that makes decisions based on rules and randomness. Each execution can produce unique results while maintaining cohesive aesthetics.

Getting Started with Canvas#

The HTML Canvas API provides a perfect canvas (pun intended) for generative experiments:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Basic drawing
ctx.fillStyle = '#1a1a2e';
ctx.fillRect(0, 0, canvas.width, canvas.height);

Embracing Randomness#

Controlled randomness is the heart of generative art:

// Random number in range
function random(min, max) {
    return Math.random() * (max - min) + min;
}

// Random choice from array
function choose(array) {
    return array[Math.floor(Math.random() * array.length)];
}

// Gaussian (normal) distribution
function gaussian(mean = 0, stdev = 1) {
    const u = 1 - Math.random();
    const v = Math.random();
    const z = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
    return z * stdev + mean;
}

A Simple Generative System#

Let's create a particle system that draws organic-looking lines:

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = random(-2, 2);
        this.vy = random(-2, 2);
        this.life = random(100, 300);
        this.color = choose(['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4']);
    }

    update() {
        // Add noise-based movement
        const angle = noise(this.x * 0.01, this.y * 0.01) * Math.PI * 2;
        this.vx += Math.cos(angle) * 0.1;
        this.vy += Math.sin(angle) * 0.1;

        this.x += this.vx;
        this.y += this.vy;
        this.life--;
    }

    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}

Color Palettes#

Great generative art needs thoughtful color choices:

const palettes = {
    sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#54a0ff'],
    forest: ['#2d5a27', '#5a8f4c', '#8bc34a', '#c5e99b'],
    ocean: ['#0077b6', '#00b4d8', '#90e0ef', '#caf0f8'],
    monochrome: ['#1a1a2e', '#16213e', '#0f3460', '#e94560']
};

function getPalette(name) {
    return palettes[name] || palettes.sunset;
}

Mathematical Beauty#

Math functions create stunning patterns:

// Lissajous curves
function lissajous(t, a, b, delta) {
    return {
        x: Math.sin(a * t + delta),
        y: Math.sin(b * t)
    };
}

// Rose curves
function rose(t, k) {
    const r = Math.cos(k * t);
    return {
        x: r * Math.cos(t),
        y: r * Math.sin(t)
    };
}

// Spirograph
function spirograph(t, R, r, d) {
    const diff = R - r;
    return {
        x: diff * Math.cos(t) + d * Math.cos((diff / r) * t),
        y: diff * Math.sin(t) - d * Math.sin((diff / r) * t)
    };
}

Animation Loop#

Bring your art to life:

let particles = [];

function animate() {
    // Semi-transparent overlay for trails
    ctx.fillStyle = 'rgba(26, 26, 46, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Update and draw particles
    particles = particles.filter(p => p.life > 0);
    particles.forEach(p => {
        p.update();
        p.draw(ctx);
    });

    // Spawn new particles
    if (particles.length < 500) {
        particles.push(new Particle(
            canvas.width / 2,
            canvas.height / 2
        ));
    }

    requestAnimationFrame(animate);
}

animate();

Tools and Libraries#

Expand your capabilities:

p5.js - Beginner-friendly creative coding
Three.js - 3D generative art
Paper.js - Vector graphics
GSAP - Animation
Simplex Noise - Organic randomness

Conclusion#

Generative art teaches us that constraints breed creativity. Set your rules, embrace randomness, and let the computer surprise you. The intersection of code and art is a beautiful place to explore.