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

效果圖片：