Mencipta Animasi Geometri Dinamik dalam ms

Pengenalan

Dalam tutorial ini, anda akan belajar cara mencipta animasi geometri yang dinamik dan berwarna-warni menggunakan p5.js. Animasi ini melambangkan idea bahawa "dunia ini penuh dengan orang yang hebat dan luar biasa melakukan perkara yang menakjubkan." Bentuk akan bergerak secara rawak merentasi kanvas, menukar warna dan mencipta kesan visual yang menawan.

---

Langkah 1: Sediakan Persekitaran Anda

1. Muat turun p5.js:

   • Pergi ke tapak web p5.js dan muat turun versi terkini p5.js.
   • Sebagai alternatif, anda boleh menggunakan editor editor p5.js dalam talian.p5js.org, yang membolehkan anda menulis dan menjalankan kod anda terus dalam penyemak imbas anda.

2. Buat Projek Baharu:

   • Jika anda menggunakan editor dalam talian, buat lakaran baharu dengan mengklik pada "Baharu" di penjuru kiri sebelah atas.
   • Jika anda mengekod secara setempat, buat fail HTML baharu dan paut pustaka p5.js.

---

Langkah 2: Menulis Struktur Asas

Mari mulakan dengan menyediakan struktur asas lakaran p5.js kami. Ini termasuk mentakrifkan fungsi persediaan() dan draw().

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();  // Disable stroke for the shapes
}

function draw() {
  background(30, 30, 60, 25);  // Dark background with transparency
}

Penjelasan:

createCanvas(windowWidth, windowHeight);: Ini menetapkan saiz kanvas agar sepadan dengan tetingkap penyemak imbas anda.
noStroke();: Ini mengalih keluar sempadan daripada bentuk yang akan kami buat.
background(30, 30, 60, 25);: Ini menetapkan warna latar belakang kepada biru tua dengan sedikit ketelusan, mencipta kesan mengekor untuk bentuk.

Langkah 3: Menambah Bentuk Geometri Dinamik

Sekarang, mari tambah kod untuk mencipta bentuk rawak dengan warna, kedudukan dan saiz yang berbeza-beza.

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

Penjelasan:

• Pembolehubah Rawak:

  • x dan y menentukan kedudukan setiap bentuk pada kanvas.
  • saiz mengawal saiz setiap bentuk.
  • colorR, colorG, colorB menjana nilai rawak untuk komponen merah, hijau dan biru warna isian.
  • fill(colorR, colorG, colorB, 150);: Ini menetapkan warna isian dengan sedikit ketelusan.

• Jenis Bentuk:

  • elips(x, y, saiz, saiz);: Melukis bulatan atau elips.
  • rect(x, y, saiz, saiz);: Melukis segi empat sama atau segi empat tepat.
  • segi tiga(x, y, x + saiz, y, x + saiz / 2, y - saiz);: Melukis segi tiga.

Langkah 4: Jadikan Animasi Responsif

Untuk memastikan kanvas berubah saiz dengan tetingkap, tambah fungsi berikut:

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

Langkah 5: Menjalankan Lakaran Anda

• Jika anda menggunakan editor dalam talian p5.js, hanya tekan butang "Main" untuk melihat animasi anda.
• Jika anda mengekod secara setempat, buka fail HTML anda dalam penyemak imbas web untuk melihat animasi.

Atas ialah kandungan terperinci Mencipta Animasi Geometri Dinamik dalam ms. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!