Membuat Warna Gradasi Radial Obyek Lingkaran dengan p5.js

Membuat media pelajaran dengan p5.js yang menarik kadang perlu membuat visual obyek dengan pewarnaan tidak tunggal, misalnya bulatan (circle) atau apapun bentuknya. Tujuannya memberi kesan 3D walau sesungguhnya ini adalah visual 2D. Berikut ini contoh cara membuat warna gradasi obyek 2D serasa 3D dengan p5.js.

Untuk mencobanya salin kode ke notepad atau sejenisnya kemudian simpan sebagai file html. Karena di sini p5.js perlu diakses secara online maka untuk menjalankan tentu perlu akses internet, kecuali bila script p5.js ini disalin dan diletakkan dalam file media ini.

Visual gradrasi dua warna.

---

Visual gradrasi banyak warna.

<style>
    /* CSS untuk membungkus canvas */
    .canvas-container {
      display: flex;              /* Letakkan isi secara horizontal */
      justify-content: center;    /* Pusatkan secara horizontal */
      align-items: center;        /* Pusatkan secara vertikal */
      margin: 20px auto;
      padding: 10px;
      box-sizing: border-box;
      border: 2px solid green; 
      border-radius:5px;
      max-width: 220px;
    }
  </style>

  <!-- Elemen untuk sketch pertama (gradasi 2 warna) -->
  <div id="canvas1" class="canvas-container"></div>

  <!-- Elemen untuk sketch kedua (gradasi multiwarna) -->
  <div id="canvas2" class="canvas-container"></div>

  <!-- Muat pustaka p5.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>

  <script>
    // === SKETCH 1: Gradasi dari putih ke biru ===
    new p5((p) => {
      p.setup = function () {
        // Buat canvas 200x200
        let canvas = p.createCanvas(200, 200);

        // Tempatkan canvas ke dalam div dengan id "canvas1"
        canvas.parent("canvas1");

        // Hentikan loop setelah gambar pertama
        p.noLoop();

        let centerX = p.width / 2;
        let centerY = p.height / 2;
        let radius = 50;

        // Gambar lingkaran-lingkaran dari luar ke dalam
        for (let r = radius; r > 0; r--) {
          let t = r / radius;  // nilai gradasi dari 0 (tepi) sampai 1 (tengah)

          // Warna interpolasi dari putih ke biru
          p.fill(p.lerpColor(p.color("white"), p.color("blue"), t));

          p.noStroke();  // tanpa garis tepi
          p.circle(centerX, centerY, r * 2); // gambar lingkaran dengan diameter r*2
        }
      };
    });

    // === SKETCH 2: Gradasi Multiwarna ===
    new p5((p) => {
      p.setup = function () {
        // Buat canvas 200x200
        let canvas = p.createCanvas(200, 200);

        // Tempatkan canvas ke dalam div dengan id "canvas2"
        canvas.parent("canvas2");

        p.noLoop();

        let centerX = p.width / 2;
        let centerY = p.height / 2;
        let radius = 50;

        // Gambar lingkaran-lingkaran dari luar ke dalam
        for (let r = radius; r > 0; r--) {
          let t = r / radius;  // nilai antara 0–1

          // Interpolasi multiwarna
          let col = multiLerpColor(p, t, [
            p.color("white"),   // tengah
            p.color("blue"),
            p.color("red"),
            p.color("yellow"),
            p.color("grey")     // tepi
          ]);

          p.fill(col);
          p.noStroke();
          p.circle(centerX, centerY, r * 2);
        }
      };
    });

    // === Fungsi bantu: Gradasi lebih dari 2 warna ===
    function multiLerpColor(p, t, colors) {
      let n = colors.length - 1;           // jumlah segmen gradasi
      let segment = 1 / n;                 // panjang tiap segmen (misal: 0–0.25, 0.25–0.5, dst.)
      let i = Math.floor(t / segment);     // tentukan berada di segmen ke berapa
      i = p.constrain(i, 0, n - 1);        // jaga indeks agar tetap valid

      // Hitung t lokal (relatif terhadap segmen tersebut)
      let localT = p.map(t, i * segment, (i + 1) * segment, 0, 1);

      // Interpolasi warna antara dua warna dalam segmen
      return p.lerpColor(colors[i], colors[i + 1], localT);
    }
  </script>

Selamat mencoba.