互动编程

0随机游走
1向量
2力
3震荡
4粒子系统

随机游走
随机彩点填满

var s = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    background('#92345E');
    var n = 100;
    for (var i = 0; i < n; i++)
        s.push(new shape());
    giveColScheme();
}

function giveColScheme() {
    for (var i = 0; i < s.length; i++) {
        s[i].r_m = round(random(0, 255));
        s[i].g_m = round(random(0, 255));
        s[i].b_m = round(random(0, 255));
    }
}

function draw() {
    for (var i = 0; i < s.length; i++) {
        s[i].update();
        s[i].display();
    }
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    background('#11091E');
    s = [];
    var n = 100;
    for (var i = 0; i < n; i++)
        s.push(new shape());
    giveColScheme();
}

function shape() {
    this.r = 5;
    var shapeS = random(0.01, 1.8);
    var r_off = 0;
    var g_off = 0;
    var b_off = 0;
    this.r_m = 0;
    this.g_m = 0;
    this.b_m = 0;
    this.p = createVector(width / 2, height / 2);

    this.update = function() {
        this.a = createVector(random(-this.r, this.r), random(-this.r, this.r));
        this.v = createVector(random(-this.r, this.r), random(-this.r, this.r));
        this.r += random(-0.02, 0.02);
        this.v.add(this.a);
        this.p.add(this.v);
    }
    this.display = function() {
        noStroke();
        var r = round(noise(r_off) * this.r_m);
        r_off += 1;
        var g = round(noise(g_off) * this.g_m);
        g_off += 1;
        var b = round(noise(b_off) * this.b_m);
        b_off += 1;

        var col = 'rgb(' + r + ',' + g + ',' + b + ')';
        fill(col);

        var sh = round(random(0, 1));
        if (sh === 1)
            rect(this.p.x, this.p.y, shapeS, shapeS);
        else
            ellipse(this.p.x, this.p.y, shapeS, shapeS);
    }
}

向量
跟随鼠标

"use strict";
var colorMap = [
    '#1abc9c',
    '#3498db',
    '#9b59b6'
];
var Mover = (function() {
    function Mover(position, velocity, acceleration) {
        if (position === void 0) {
            position = createVector(0, 0);
        }
        if (velocity === void 0) {
            velocity = createVector(0, 0);
        }
        if (acceleration === void 0) {
            acceleration = createVector(0, 0);
        }
        this.position = position;
        this.velocity = velocity;
        this.acceleration = acceleration;
        this.color = color(random(colorMap));
        this.maxSpeed = 6;
    }
    Mover.prototype.update = function() {
        var mouse = createVector(mouseX, mouseY);
        this.acceleration = p5.Vector.sub(mouse, this.position);
        this.acceleration.setMag(0.2);
        this.velocity.add(this.acceleration);
        this.velocity.limit(this.maxSpeed);
        this.position.add(this.velocity);
        var vd = p5.Vector.sub(mouse, this.position);
        this.rotation = atan2(vd.y, vd.x);
    };
    Mover.prototype.draw = function() {
        push();
        translate(this.position.x, this.position.y);
        rotate(this.rotation);
        noStroke();
        rect(-20, -5, 20, 5);
        fill(this.color);
        rect(0, -5, 5, 5);
        pop();
    };
    return Mover;
}());
var movers = [];

function setup() {
    var innerWidth = window.innerWidth,
        innerHeight = window.innerHeight;
    createCanvas(innerWidth, innerHeight);
    for (var i = 0; i < 20; i += 1) {
        movers.push(new Mover(new p5.Vector(random(0, width), random(0, height))));
    }
}

function draw() {
    background(33);
    movers.forEach(function(mover) {
        mover.update();
        mover.draw();
    });
}

function windowResized() {
    var innerWidth = window.innerWidth,
        innerHeight = window.innerHeight;
    resizeCanvas(innerWidth, innerHeight);
}

震荡

function setup() {
    createCanvas(windowWidth - 100, windowHeight - 100);
    frameRate(30);
    pixelDensity(2);
}

var print = function(msg) {
    console.log(msg);
}

r = 2;

function draw() {
    if (frameCount * 5 <= windowWidth - 100)
        ellipse(frameCount * 5, (height / 2), r, r);
    else {
        var wave = sin(radians(frameCount) * 30) * 20 + (height / 2);
        fill('#ffffff');
        ellipse(frameCount * 5 % (windowWidth - 100), (height / 2), r, r);
        fill('#000000');
        ellipse(frameCount * 5 % (windowWidth - 100), wave, r, r);
    }
}

粒子系统

像素烟花动画

window.addEventListener('resize', resize, false);

var fireworks;
var stars;
var dirs = [
    [-1, -1],
    [0, -1],
    [1, -1],
    [-1, 0],
    [1, 0],
    [-1, 1],
    [0, 1],
    [1, 1]
];

function Conway() {
    this.x = floor(random() * width);
    this.y = floor(random() * height * .7);
    this.type = floor(random() * 3);
    this.size = random() * 2;
    this.angle = random() * PI;
    this.baseHue = random() * 360;
    this.hueSwap = random() * 30 + 60;
    this.gridSize = 61;
    if (this.gridSize % 2 == 0) this.gridSize;
    this.center = floor(this.gridSize / 2);
    this.cyclesPerTick = 5;
    this.numTicks = 0;
    this.finished = false;
    this.grid = [];

    for (var i = 0; i < 2; i++) {
        this.grid.push([]);
    }

    for (var i = 0; i < this.gridSize; i++) {
        this.grid[0].push([]);
        this.grid[1].push([]);
        for (var j = 0; j < this.gridSize; j++) {
            this.grid[0][i].push(false);
            this.grid[1][i].push(false);
        }
    }

    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (random() > .5) {
                this.grid[0][this.center - i][this.center - j] = true;
                this.grid[0][this.center + i][this.center + j] = true;
                if (this.type == 0) {
                    this.grid[0][this.center + i][this.center - j] = true;
                    this.grid[0][this.center - i][this.center + j] = true;
                } else if (this.type == 1) {
                    this.grid[0][this.center - j][this.center + i] = true;
                    this.grid[0][this.center + j][this.center - i] = true;
                } else if (this.type == 2) {
                    this.grid[0][this.center + i][this.center - j] = true;
                    this.grid[0][this.center - i][this.center + j] = true;
                    this.grid[0][this.center - j][this.center + i] = true;
                    this.grid[0][this.center + j][this.center - i] = true;
                    this.grid[0][this.center - j][this.center - i] = true;
                    this.grid[0][this.center + j][this.center + i] = true;
                }
            }
        }
    }

    this.tick = function() {
        var ind = (this.numTicks % 2);
        for (var i = 0; i < this.gridSize; i++) {
            for (var j = 0; j < this.gridSize; j++) {
                var neighbors = 0;
                for (var k = 0; k < dirs.length; k++) {
                    var dx = i + dirs[k][0];
                    var dy = j + dirs[k][1];
                    if (dx >= 0 && dy >= 0 &&
                        dx < this.gridSize - 1 && dy < this.gridSize - 1) {
                        if (this.grid[ind][dx][dy]) neighbors++;
                    }
                }
                if ((this.grid[ind][i][j] &&
                        (neighbors == 2 || neighbors == 3)) ||
                    (!this.grid[ind][i][j] && neighbors == 3)) {
                    this.grid[(ind + 1) % 2][i][j] = true;
                } else {
                    this.grid[(ind + 1) % 2][i][j] = false;
                }
            }
        }
    }

    this.render = function() {
        this.numTicks++;
        var mod = pow(((48 - this.numTicks) / 40), 2);
        this.size += mod * .5;
        var ind = this.numTicks % 2;
        translate(this.x, this.y);
        scale(this.size);
        for (var i = 0; i < this.gridSize; i++) {
            for (var j = 0; j < this.gridSize; j++) {
                if (this.grid[ind][i][j]) {
                    fill(this.baseHue + random() * this.hueSwap,
                        100, 100, mod * 100);
                    rect(i - this.center, j - this.center, 1, 1);
                }
            }
        }

        if (this.numTicks > 40) this.finished = true;
        resetMatrix();
    }
}

function setup() {
    createCanvas();
    colorMode(HSB, 360, 100, 100, 100);
    ellipseMode(CENTER);
    frameRate(10);
    fireworks = [];
    resize();
    fireworks.push(new Conway())
}

function draw() {
    background(0);
    noStroke();

    if (!fireworks) return;
    for (var i = fireworks.length - 1; i >= 0; i--) {
        if (fireworks[i].finished) {
            fireworks.splice(i, 1);
        } else {
            fireworks[i].tick();
            fireworks[i].render();
        }
    }

    if (random() < .08) {
        fireworks.push(new Conway());
    }
}

function resize() {
    resizeCanvas(window.innerWidth, window.innerHeight);
}

随机生成烟花