在本教程中,您將學習如何使用 p5.js 創建動態且豐富多彩的幾何動畫。這部動畫象徵著「世界上充滿了神話般和不可思議的人,他們在做著奇妙的事」。形狀將在畫布上隨機移動,改變顏色並創造出迷人的視覺效果。
下載p5.js:
建立一個新項目:
讓我們先設定 p5.js 草圖的基本結構。這包括定義 setup() 和 draw() 函數。
function setup() { createCanvas(windowWidth, windowHeight); noStroke(); // Disable stroke for the shapes } function draw() { background(30, 30, 60, 25); // Dark background with transparency }
說明:
createCanvas(windowWidth, windowHeight);:這會設定畫布大小以符合您的瀏覽器視窗。
noStroke();:這會刪除我們將要建立的形狀的邊框。
背景(30, 30, 60, 25);:這將背景顏色設定為具有一定透明度的深藍色,為形狀建立拖尾效果。
現在,讓我們加入程式碼來建立具有不同顏色、位置和大小的隨機形狀。
function draw() { background(30, 30, 60, 25); // Dark background with transparency for (let i = 0; i < 5; i++) { let x = random(width); let y = random(height); let size = random(20, 80); let colorR = random(255); let colorG = random(255); let colorB = random(255); let shapeType = random(['ellipse', 'rect', 'triangle']); fill(colorR, colorG, colorB, 150); // Set fill color with some transparency if (shapeType === 'ellipse') { ellipse(x, y, size, size); } else if (shapeType === 'rect') { rect(x, y, size, size); } else if (shapeType === 'triangle') { triangle(x, y, x + size, y, x + size / 2, y - size); } } }
說明:
隨機變數:
形狀類型:
確保畫布隨視窗調整大小,請新增下列函數:
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
以上是在 ps 中建立動態幾何動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!