HTML5 P5.js 调制的正弦波动画

modulated sine wave，点击重绘波形图。通过随机幅度的正弦波生成一种纺纱动画特效。

html5, canvas, wave

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var y, a, f;

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(34);
    a = random(2, 10);
    f = random(0.05);
}

function draw() {
    //background(34);
    fill(34);
    noStroke();
    rect(width - 200, 20, 200, 50);
    fill(238);
    textAlign(RIGHT);
    text("click to redraw", width - 50, 50);
    stroke(238, 10);
    var amplitude = a; //10;
    var frequency = f; //0.01;
    beginShape();
    noFill();
    for (var x = 0; x < width; x += 2) {
        y = sin(x * frequency);
        var t = 0.000001 * (-millis() * 130);
        t = -frameCount / 500.0;
        y += sin(x * frequency * 2.1 + t) * 4.5;
        y += sin(x * frequency * 1.72 + t * 1.121) * 4.0;
        y += sin(x * frequency * 2.221 + t * 0.437) * 5.0;
        y += sin(x * frequency * 3.1122 + t * 4.269) * 2.5;
        y *= amplitude;
        vertex(x, height / 2 + y);
    }
    endShape();
    if (frameCount % 1000 === 0) initV();
}

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

function initV() {
    background(34);
    a = random(2, 10);
    f = random(0.05);
}

function mouseReleased() {
    initV();
}

编译

CSS

HTML

modulated sine wave，点击重绘波形图。通过随机幅度的正弦波生成一种纺纱动画特效。

html5, canvas, wave

编辑器支持Emmet

快捷键

modulated sine wave，点击重绘波形图。通过随机幅度的正弦波生成一种纺纱动画特效。

html5, canvas, wave

HTML5 P5.js 曼荼罗花的轮廓线变换动画

HTML5 Canvas P5.js 涡轮玫瑰动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：