P5.js 噪音传导演示动效

看起来像气流/水流漫延的动画

canvas

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var num;
var agents = [];
var col = [];
var fieldIntensity = 10,
    noiseScale = 500,
    radius = 250,
    stepSize = 1;
var showText = true;
var a = .15,
    bg = 20,
    c = 0;

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
    background(bg);
    num = 1000;
    createStuff();
    initColors(a);
}

function Agent(position) {
    this.angle = random(TWO_PI);
    this.stepSize = stepSize;
    this.position = position;
    this.outside = false;

this.update = function() {
        this.angle = noise(this.position.x / noiseScale, this.position.y / noiseScale) * fieldIntensity;
        this.position.x += cos(this.angle) * this.stepSize;
        this.position.y += sin(this.angle) * this.stepSize;
    }

this.paint = function() {
        fill(col[c % col.length]);
        noStroke();
        ellipse(this.position.x, this.position.y, this.stepSize, this.stepSize);
    }
}

function keyTyped() {
    //if (key === 's') save("pics/image-" + floor(random(9999)) + ".png");
    if (key == 'r') init();
}

function init() {
    background(bg);
    noiseSeed(random(9999));
    c = 0;
    showText = true;
    initColors(a);
    createStuff(col);
}

function initColors(alphaValue) {
    col = [color('rgba(84,121,128,' + alphaValue + ')'), color('rgba(69,173,168,' + alphaValue + ')'), color('rgba(157,224,173,' + alphaValue + ')'), color('rgba(229,252,194,' + alphaValue + ')')];
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight - 4);
}

编译

CSS

HTML

看起来像气流/水流漫延的动画

canvas

编辑器支持Emmet

快捷键

看起来像气流/水流漫延的动画

canvas

HTML5 P5.js使用噪音算法实现的超炫彩虹曲线

P5.js 波尔卡噪点动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：