P5.js 阿拉丁神灯

P5.js 是Processing的JavaScript移植版本，用于创作数字艺术作品。

p5.js, canvas

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var SIZE;
var MARGIN;
var D;

var MAX_ALPHA = 1;
var MAX_HEIGHT;

var COLOR_TOP;
var COLOR_BOTTOM;

var CANVAS;

function windowResized() {
    SIZE = Math.min($("#p5").width(), windowHeight);
    resizeCanvas(SIZE, SIZE);

MARGIN = (1. / 40.) * SIZE;
    D = (1. / 10.) * SIZE;
    MAX_HEIGHT = SIZE + 2 * D;
    background(0);
}

function setup() {
    CANVAS = createCanvas(SIZE, SIZE);
    windowResized();
    CANVAS.parent('p5');

COLOR_TOP = [10, 158, 247, 0];
    COLOR_BOTTOM = [189, 28, 212, 0];
    background(0);
    //colorMode(HSB);
    //blendMode(ADD);

strokeWeight(.3);
    rectMode(CENTER);
}

function draw() {
    /* background(0);*/
    /*  fadeRect(40);*/

noFill();

var offset = norm(frameCount % 60, 0, 59); // map(sin(frameCount * .01), -1, 1, 0, 10);

push();
    translate(width / 2, MARGIN);

var d = D * offset;

while (d < MAX_HEIGHT) {
        var diff = MAX_HEIGHT - d;
        var alpha = map(diff, 0, 2 * D, 0, MAX_ALPHA);
        COLOR_TOP[3] = alpha;
        stroke(color(COLOR_TOP));
        ellipse(0, d / 2, d, d);
        d += D;
    }

pop();

push();
    translate(width / 2, height - MARGIN);

d = D * offset;

while (d < height + 2 * D) {
        var diff = (height + 2 * D) - d;
        var alpha = map(diff, 0, 2 * D, 0, MAX_ALPHA);
        COLOR_BOTTOM[3] = alpha;

stroke(color(COLOR_BOTTOM));
        ellipse(0, -d / 2, -d, -d);
        d += D;
    }

pop();

}

function fadeRect(alpha) {
    push();
    noStroke();
    fill(0, alpha);
    rect(-1, -1, width + 1, height + 1);
    pop();
}

编译

CSS

HTML

P5.js 是Processing的JavaScript移植版本，用于创作数字艺术作品。

p5.js, canvas

编辑器支持Emmet

快捷键

P5.js 是Processing的JavaScript移植版本，用于创作数字艺术作品。

p5.js, canvas

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

P5.js 模拟植物花卉叶序排列分布演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：