-->

Home / Panduan tutorial

Cara Membuat Web Noise menggunakan Javacript + Source Code

berga tech 1:34 AM

Noise (atau biasa disebut Perlin Noise) adalah konsep algoritma yang digunakan untuk menghasilkan nilai / objek / konten secara acak dan prosedural, dengan maksud untuk menciptakan konten yang unik dan tidak berlebihan. Perlin Noise banyak digunakan dalam berbagai bahasa pemrograman. Konsep itu sendiri telah dikembangkan secara luas, mulai dari Prosedural Terrain (contoh umum dari Prosedural Terrain adalah logika acak dalam membuat lokasi permainan di Minecraft) hingga Objectural Objects (di mana objek sederhana menyertakan konsep noise di dalam).

Sebagai bentuk penerapan dari noise pada P5.js, pada artikel kali ini, kita akan membuat web noise menggunakan bahasa pemrograman P5.js (subsider dari Javascript).

Langkah:

1. Persiapkan text editor (notepad, sublime text, dan sebagainya) sebagai media pengetikan syntax nantinya.

2. Buatlah file yang bernama index.html yang berisikan kode sebagai berikut:

<html>
<head>
<title>Inwepo Web Noise</title>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>

Cara Membuat Web Noise dengan Javacript

3. Pada bagian <style>, masukkan kode berikut:

html, body {
margin: 0;
overflow: hidden;
}

Nantinya, bagian <style> akan memiliki struktur kode sebagai berikut:

<style>
html, body {
    margin: 0;
    overflow: hidden;
}
</style>

4. Pada bagian <script>, masukkan kode berikut:

var posX = [];
var posY = [];
var offset = [];
var numRings = 10;
var numSteps = 36;
var colors = [];

function setup() {
createCanvas(windowWidth, windowHeight);

for(var j = 0; j < numRings; j++) {
    posX[j] = [];
    posY[j] = [];
    colors[j] = [];

    for(var i = 0; i < numSteps; i++) {
      offset[i] = random(100);
      colors[j][i] = color(random(50, 250), random(100, 150), random(130, 150), 400-((j+1)*50));
    }
}
}

function draw() {
background(50);
noFill();
stroke(240);
strokeWeight(1);

for(var j = 0; j < numRings; j++) {
    for(var i = 0; i < numSteps; i++) {
      offset[i]+=0.0001;
      posX[j][i] = width/2 + ((j+1)*(noise(offset[i])*50)+60) * cos(radians(i*10));
      posY[j][i] = height/2 + ((j+1)*(noise(offset[i])*50)+60) * sin(radians(i*10));
    }
}

for(var j = 0; j < numRings; j++) {
    beginShape();
    for(var i = 0; i < numSteps; i++) {
      vertex(posX[j][i], posY[j][i]);
    }
    vertex(posX[j][0], posY[j][0]);
    endShape();
}

for(var j = 0; j < numRings; j++) {
    for(var i = 0; i < numSteps; i++) {
      fill(colors[j][i]);
      strokeWeight(j/5);
      stroke(255);
      if(i > 0 && j > 0) {
        beginShape();
        vertex(posX[j][i], posY[j][i]);
        vertex(posX[j][i-1], posY[j][i-1]);
        vertex(posX[j-1][i-1], posY[j-1][i-1]);
        vertex(posX[j-1][i], posY[j-1][i]);
        endShape(CLOSE);
      } else if(i == 0) {
        beginShape();
        vertex(posX[j][i], posY[j][i]);
        vertex(posX[j][numSteps-1], posY[j][numSteps-1]);
        vertex(posX[numRings-1][numSteps-1], posY[numRings-1][numSteps-1]);
        vertex(posX[numRings-1][i], posY[numRings-1][i]);
        endShape(CLOSE);
      }
    }
}
header();
}

function header(){
    noStroke();
    textFont('Segoe UI');
    textSize(45);
    fill(255);
    textAlign(LEFT);
    text("Inwepo Web Noise", 30, 60);
}

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

Nantinya, bagian <script> akan memiliki struktur kode sebagai berikut:

<script>
    var posX = [];
    var posY = [];
    var offset = [];
    var numRings = 10;
    var numSteps = 36;
    var colors = [];

    function setup() {
    createCanvas(windowWidth, windowHeight);

    for(var j = 0; j < numRings; j++) {
       posX[j] = [];
       posY[j] = [];
       colors[j] = [];

       for(var i = 0; i < numSteps; i++) {
          offset[i] = random(100);
          colors[j][i] = color(random(50, 250), random(100, 150), random(130, 150), 400-((j+1)*50));
       }
    }
    }

    function draw() {
    background(50);
    noFill();
    stroke(240);
    strokeWeight(1);

    for(var j = 0; j < numRings; j++) {
       for(var i = 0; i < numSteps; i++) {
          offset[i]+=0.0001;
          posX[j][i] = width/2 + ((j+1)*(noise(offset[i])*50)+60) * cos(radians(i*10));
          posY[j][i] = height/2 + ((j+1)*(noise(offset[i])*50)+60) * sin(radians(i*10));
       }
    }

    for(var j = 0; j < numRings; j++) {
       beginShape();
       for(var i = 0; i < numSteps; i++) {
          vertex(posX[j][i], posY[j][i]);
       }
       vertex(posX[j][0], posY[j][0]);
       endShape();
    }

    for(var j = 0; j < numRings; j++) {
       for(var i = 0; i < numSteps; i++) {
          fill(colors[j][i]);
          strokeWeight(j/5);
          stroke(255);
          if(i > 0 && j > 0) {
           beginShape();
           vertex(posX[j][i], posY[j][i]);
           vertex(posX[j][i-1], posY[j][i-1]);
           vertex(posX[j-1][i-1], posY[j-1][i-1]);
           vertex(posX[j-1][i], posY[j-1][i]);
           endShape(CLOSE);
          } else if(i == 0) {
           beginShape();
           vertex(posX[j][i], posY[j][i]);
           vertex(posX[j][numSteps-1], posY[j][numSteps-1]);
           vertex(posX[numRings-1][numSteps-1], posY[numRings-1][numSteps-1]);
           vertex(posX[numRings-1][i], posY[numRings-1][i]);
           endShape(CLOSE);
          }
       }
    }
    header();
    }

    function header(){
       noStroke();
       textFont('Segoe UI');
       textSize(45);
       fill(255);
       textAlign(LEFT);
       text("Inwepo Web Noise", 30, 60);
    }

    function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
    }
</script>

5. Simpan file yang diubah sebelumnya. Kemudian, buka file index.html melalui browser Anda. Jika berhasil, halaman web akan muncul dengan konten noise yang dikemas dalam bentuk web (/ spiderweb). Kemudian, animasi web akan memiliki ukuran yang berbeda setiap kali pengguna mengunjungi situs web terkait, karena menyesuaikan dengan frekuensi (dan juga jumlah derau yang ditetapkan) yang telah dideklarasikan dalam sintaksis JavaScript. Sesuaikan penggunaan derau web dengan situs web yang telah Anda buat.

Lihat Juga Artikel lainnya :

-->