首頁 > web前端 > js教程 > 主體

在 ps 中建立動態幾何動畫

王林
發布: 2024-08-28 06:02:03
原創
1064 人瀏覽過

Creating a Dynamic Geometric Animation in ps

簡介

在本教程中,您將學習如何使用 p5.js 創建動態且豐富多彩的幾何動畫。這部動畫象徵著「世界上充滿了神話般和不可思議的人,他們在做著奇妙的事」。形狀將在畫布上隨機移動,改變顏色並創造出迷人的視覺效果。


第 1 步:設定您的環境

  1. 下載p5.js:

    • 前往 p5.js 網站並下載最新版本的 p5.js。
    • 或者,您可以使用線上 p5.js 編輯器 editor.p5js.org,它允許您直接在瀏覽器中編寫和運行程式碼。
  2. 建立一個新項目:

    • 如果您使用線上編輯器,請點擊左上角的「新建」來建立新草圖。
    • 如果您在本機編碼,請建立一個新的 HTML 檔案並連結 p5.js 庫。

第 2 步:寫出基本結構

讓我們先設定 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);:這將背景顏色設定為具有一定透明度的深藍色,為形狀建立拖尾效果。

第 3 步:新增動態幾何形狀

現在,讓我們加入程式碼來建立具有不同顏色、位置和大小的隨機形狀。

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);
    }
  }
}



登入後複製

說明:

  • 隨機變數:

    • x 和 y 決定畫布上每個形狀的位置。
    • size 控制每個形狀的大小。
    • colorR、colorG、colorB 為填滿顏色的紅色、綠色和藍色分量產生隨機值。
    • fill(colorR, colorG, colorB, 150);:設定稍微透明的填滿顏色。
  • 形狀類型:

    • ellipse(x, y, size, size);:繪製圓形或橢圓形。
    • rect(x, y, size, size);:繪製正方形或長方形。
    • triangle(x, y, x + size, y, x + size / 2, y - size);: 繪製三角形。

第 4 步:讓動畫具有反應性

確保畫布隨視窗調整大小,請新增下列函數:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}



登入後複製

第 5 步:運行草圖

  • 如果您使用的是 p5.js 線上編輯器,只需按下「播放」按鈕即可查看動畫。
  • 如果您在本機編碼,請在網頁瀏覽器中開啟 HTML 檔案以查看動畫。

以上是在 ps 中建立動態幾何動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!