初学P5.js 科幻效果背景

初学P5.js，有好的意见欢迎留下！

近日看了一个dome,分享一下...

JS：

 

class Rect {
    constructor() {
        this.options = [rand(width), rand(height)];
        this.size = [rand(100), rand(200)];
        this.amt   = this.size[1]/200;
        this.speed = (1-this.amt)*3+1;
        this.hue   = this.amt*.3 + .5;
    };
    render(){
        fill(this.hue, 1, 1, pow(1-this.amt, 2)*.1 + .1);
        for(let d of direction){
            pushpop(() => {
                translate(d[0]*width, d[0]*height, d[0]*height);
                rect(...this.options, ...this.size);
            })
        };
        this.options[1]  = (this.options[1]+this.speed)%height ;
    };
}

// 总个数
let rects = [];
let rects_num = 200;
let direction = [
    [-1, 0], [0, 0], [1, 0] 
];

// setup()函数 将在程式开始时被调用一次，它可在程序开始时被用来定义初始的环境属性如荧幕大小、背景颜色及媒体加载如图像及字体。每个程序只能有一个 setup() 函数并且他不能在一开始执行后再次被调用
// tips: 请注意：在 setup() 内定义的变量并不能在其他函数内使用，这包括 draw() 。
setup = () => {
    // 定义元素是否缩放以及缩放值
    pixelDensity(1);
    // 创建画布
    createCanvas();
    // 改变P5.js 对颜色的解读方式, 可用于颜色渐变;
    colorMode(HSB, 1, 1, 1);
    // 更改rect()对画布上方形的解读方式，CORNER、CORNERS、CENTER 或 RADIUS 四个参数
    rectMode(CENTER);
    // 根据所设定的模式在显示窗口内混合像素。具体参数使用可参考文档--->https://p5js.org/zh-Hans/reference/#/p5/blendMode
    blendMode(ADD);
    // 设置形状的外形线色;
    stroke(1,.1);
    // 浏览器窗口发生改变时可触发
    windowResized()
};

// 初始函数触发
init = () => {
    rects = [];
    for(let i = 0; i <= rects_num; ++i) rects.push(new Rect());
}

// 绘制
draw = () => {
    // 清除历史
    clear();
    // 逐一绘制
    rects.map( r => r.render());
}

// 随机函数
let rand = (x) => { return random(x)};
let pushpop = f => { push(); f(); pop();};
// 浏览器屏幕发生改变时 初始重绘
windowResized = ()     => {resizeCanvas(windowWidth, windowHeight); init();};
// 几何向量
let v2        = (x, y) => {return createVector(x, y)};
// 鼠标点击
mouseClicked  = ()     => {windowResized();}

 

P5.js 推荐地址：https://p5js.org/zh-Hans/download/

效果图片：