初學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/

效果圖片：