· 20 Jun 2017

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga.

Obejek digambar hanya sekali saja.

Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak?

Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random().

Lebih jelasnya, mari kita bahas…

Menggambar Objek dengan Perulangan

Pada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.strokeRect(10,10,100,100);
    ctx.fillRect(120,10,100,100);
</script>

Dengan hasil seperti ini:

Lalu bagaimana kalau kita ingin menggambar 10 persegi?

Kita bisa saja mengetik ulang fungsi untuk menggambarnya sebanyak 10x.

ctx.strokeRect(10,10,100,100);
ctx.strokeRect(110,10,100,100);
ctx.strokeRect(210,10,100,100);
ctx.strokeRect(310,10,100,100);
ctx.strokeRect(410,10,100,100);
ctx.strokeRect(510,10,100,100);
ctx.strokeRect(610,10,100,100);
ctx.strokeRect(710,10,100,100);
ctx.strokeRect(810,10,100,100);
ctx.strokeRect(910,10,100,100);

Terus kalau mau gambar sebanyak 1000x?

Apa mampu mengetik kode sebanyaka 1000 baris?

Pasti capek ngetik 1000 baris dengan nilai x dan y yang berbeda-beda.

karena itu, kita harus menggunakan perulangan.

Contoh:

Kita akan menggmabar 5 persegi dengan nilai x bertambah 10 di setiap kali perulangan dan y tetap.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 50; x+=10){
        ctx.strokeRect(x, 10, 10, 10);
    }
</script>

Kita akan menggmbar persegi dengan ukuran 10x10 pada titik y=10 dan x berubah-ubah.

Setiap perulangan nilai x akan bertambah 10.

perulangan ke 1, nilai x = 10 dan y = 10
perulangan ke 2, nilai x = 20 dan y = 10
perulangan ke 3, nilai x = 30 dan y = 10
perulangan ke 4, nilai x = 40 dan y = 10
perulangan ke 5, nilai x = 50 dan y = 10

Kalau kita nyatakan dalam persamaan garis lurus matematika:

y = 10 (nilai y tetap 10)

*ingat-ingat kembali pelajaran matematika (persamaan garis lurus, fungsi, dan aljabar linier) 😄

Hasilnya:

Sekarang coba gambar sebanyak 50x:

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 500; x+=10){
        ctx.strokeRect(x, 10, 10, 10);
    }
</script>

Hasilnya:

Sudah paham sekarang…?

Lalu bagaimana kalau nilai y-nya sekarang yang berubah-ubah.

Gampang, kita tinggal ubah menjadi seperti ini:

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(y = 10; y <= 500; y+=10){
        ctx.strokeRect(10, y, 10, 10);
    }
</script>

Maka hasilnya:

Menggambar 50 persegi dengan titik y berubah-ubah

Masih mau lagi?

Mari kita coba kedua-duanya berubah (nilai x dan y berubah).

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 10; i <= 500; i+=10){
        ctx.strokeRect(i, i, 10, 10);
    }
</script>

Nilai x dan y kita ambil dari variabel i.

Hasilnya:

Gambar garis seperti di atas dapat dinyatakan dengan persamaan matematika:

y = x

Menggunakan Perulangan Bersarang

Perulangan bersarang (nested loop) artinya perulangan dalam perulangan.

Sekarang mari kita coba menggambar persegi sebanyak 40 ke arah x (horizontal) dan 40 ka arah y (vertikal) dengan perulangan bersarang.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){
            ctx.strokeRect(x, y, 10, 10);
        }
    }
</script>

Maka banyak persegi yang akan digambar adalah 1600 buah persegi.

Sekarang bagaimana kalau nilai y pada perulangan ke-2 kita set nilai awalnya adalah x.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = x; y <= 400; y+=10){
            ctx.strokeRect(x, y, 10, 10);
        }
    }
</script>

Hasilnya:

Selanjutnya saya akan memperlihatkan hasil kreasi saya yang bisa kamu ikuti dan silahkan pikirkan bagaimana gambarnya bisa terbentuk 😄.

Kode:

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){

            if((y*x) % 200 != 0){
                ctx.strokeRect(x, y, 10, 10);
            } else {
                ctx.fillRect(x, y, 10, 10);
            }

        }
    }
</script>

* operator % fungsinya untuk menghitung sisa bagi.

Hasilnya:

Kode:

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(x = 10; x <= 400; x+=10){
        for(y = 10; y <= 400; y+=10){

            if((y*x) % 21 == 0){
                ctx.strokeRect(x, y, 10, 10);
            } else {
                ctx.fillRect(x, y, 10, 10);
            }
        }
    }
</script>

Hasil:

Itu saja ya…agar tutorial ini tidak kepanjangan.

Silahkan lanjutkan berkresi sendiri!

Menggambar Objek dengan Fungsi Math.random()

Fungsi random() adalah fungsi yang menghasilkan nilai acak dari 0,0 sampai 1,0. Fungsi ini akan kita manfaatkan untuk menentukan nilai x dan y agar objek yang kita gambar diletakkan secara acak di canvas.

Berikut ini contoh nilai yang dihasilkan oleh fungsi random().

Karena fungsi random() menghasilkan nilai 0,xxx maka kita harus mengubahnya menjadi bilangan desimal (integer).

Caranya kita bisa memanfaatkan fungsi floor() untuk melakukan pembulatan nilai.

Misalnya seperti ini:

Math.floor(Math.random() * 5)

Maka nilai acak yang akan kita dapatkan adalah dari 0 sampai 5.

Sekarang mari kita coba menggambar titik pada canvas dengan nilai x dan y acak dari 0 sampai panjang canvas-nya.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < canvas.width; i++){
        for(j = 0; j < canvas.height; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar titknya
            ctx.fillRect(x, y, 1,1);

        }
    }
</script>

Hasilnya:

Hasil gambar titik dengan bilangan random

Mantap! Sepertinya titiknya terlalu banyak.

Coba kita gambar titik sebanyak 10000 atau 100x100.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 100; i++){
        for(j = 0; j < 100; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar titknya
            ctx.fillRect(x, y, 1,1);

        }
    }
</script>

Hasilnya:

Selanjutnya kita modifikasi kodenya.

Silahkan perbesar ukuran perseginya menjadi 10x10 dan gambar sebanyak 200 kali. Kita pakai dua persegi, yaitu strokeRect() sebanyak 100 dan fillRect() sebanyak 100.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar perseginya
            ctx.fillRect(x, y, 10,10);

        }
    }

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar perseginya
            ctx.strokeRect(x, y, 10,10);

        }
    }
</script>

Hasilnya:

Coba juga untuk berkreasi dengan lingkaran.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // gambar lingkaran
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2*Math.PI);
            ctx.stroke();

        }
    }
</script>

Hasilnya:

Coba juga jari-jarinya kita kasih acak, misal dari 5 sampai 30.

<script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){

            // isi nilai titik dengan bilangan acak
            var x = Math.floor(Math.random() * canvas.width);
            var y = Math.floor(Math.random() * canvas.height);

            // jari-jari random dari 5 sampai 30
            var r = Math.floor( Math.random() * (30 - 5) + 5 );

            // gambar lingkaran
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2*Math.PI);
            ctx.stroke();

        }
    }


</script>

Hasilnya:

Akhir Kata…

Begitulah cara menggambar objek dengan perulangan dan fungsi random. Fungsi random kadang digunakan dalam Game untuk menggambar objek dalam posisi acak.

Misal pada Game Flappy Bird, pipa penghalangnya diletakkan secara acak dengan fungsi random.

Pada kesempatan selanjutnya mungkin kita akan bahas tentang warna dan animasi.

Terima kasih sudah mengikuti tutorial ini. Kalau ada pertanyaan atau tambahan silahkan sampaikan di komentar.

Selamat berkerasi dan berimajinasi dengan kode.

Referensi:

Mozilla Developer Network — Math.random()
Wikipedia — Persamaan garis