P5.js 意大利面条形状（藤曼）疯狂生长动画

Noodle lines growing，基于噪音算法的线条随机行走动画。

canvas, noise

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3012
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var walkersNum = 600;
var wArray = []; // my array of random walker
var newhue; // for changing color palette

function setup() {
    createCanvas(windowWidth, windowHeight);
    colorMode(HSB, 360, 100, 100, 100);
    for (var i = 0; i < walkersNum; i++) {
        wArray[i] = new Walker();
    }
    setInterval(resetcolors, 30000);
    resetcolors();
    background(newhue, 50, 20);
}

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

//Constructor function
function Walker() {
    this.pos = createVector(random(width / 2 - 100, width / 2 + 100), random(height / 2 - 100, height / 2 + 100));
    this.vel = createVector(0, 0);
    this.xoof = random(0, 1000); // for ofsetting my vector angle using noise function
    this.hue = 360; // start color
    this.sat = 100; // saturation
    this.bri = 70; // brightness

this.display = function() {
        var brushSize = map(noise(this.xoof), 0, 1, 2, 8);
        this.bri = noise(this.xoof) * 100;
        strokeWeight(brushSize);
        stroke(this.hue, this.sat, this.bri);
        point(this.pos.x, this.pos.y);
        //noStroke();
        //fill(this.hue, this.sat, this.bri);
        //ellipse(this.pos.x, this.pos.y, brushSize, brushSize);
    }

this.update = function() {
        this.xoof += 0.01; // scrubbing the noise timeline
        this.acc = p5.Vector.fromAngle(map(noise(this.xoof), 0, 1, -TWO_PI, TWO_PI));
        this.acc.mult(0.5); // or this.acc.div(2);

this.vel.add(this.acc);
        this.vel.limit(2);
        this.pos.add(this.vel);
    }

this.changecolor = function(newhue) {
        this.hue = newhue;
    }

this.transborders = function() {
        if (this.pos.x > width) {
            this.pos.x = 0;
        } else if (this.pos.x < 0) {
            this.pos.x = width;
        }
        if (this.pos.y > height) {
            this.pos.y = 0;
        } else if (this.pos.y < 0) {
            this.pos.y = height;
        }
    }

}

function mousePressed() {
    restartSpaghetti();
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    restartSpaghetti();
}

function restartSpaghetti() {
    for (var i = 0; i < walkersNum; i++) {
        wArray[i] = new Walker();
    }
    resetcolors();
    background(newhue, 50, 20);
}

function resetcolors() {
    console.log("resetting global color");
    newhue = random(360);
    for (var i = 0; i < wArray.length; i++) {
        wArray[i].changecolor(newhue);
    }
}

编译

CSS

HTML

Noodle lines growing，基于噪音算法的线条随机行走动画。

canvas, noise

编辑器支持Emmet

快捷键

Noodle lines growing，基于噪音算法的线条随机行走动画。

canvas, noise

HTML5 P5.js 颜色（染料）爆炸动画

P5.js + Grafica.js绘制XY坐标轴（平面坐标系）和数据曲线（折线图表）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：