author Ahmad Muhardian

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:

Menggambar dua persegi di HTML5 Canvas

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:

Menggambar 5 persegi dengan perulangan

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:

Menggambar 50 persegi dengan perulangan

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:

Menggambar 50 persegi dengan titik y=x

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.

Persegi 1600 biji

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:

Persegi 800 biji

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:

Eksperimen 1

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:

Eksperimen 2

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().

Fungsi random di console javascript

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:

Hasil gambar titik dengan bilangan random

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:

Gambar persegi dengan fungsi random

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:

Gambar lingkaran dengan fungsi random

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:

Gambar lingkaran dengan fungsi random

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:

Baca Juga ini

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash. Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video. Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube. Namun semuanya berubah setelah kedatangan HTML5… 1 HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis

Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb. 1. Menyisipkan Data TablesPlug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index.

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi

Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba. Sudah siap? Mari kita mulai… googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); Mengenal Objek MarkerMarker merupakan sebuah objek yang bisa kita buat dengan kode berikut: var marker = new google.

15 Tag HTML yang tidak Memiliki Pasangan Penutup

15 Tag HTML yang tidak Memiliki Pasangan Penutup

Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup. Kasihan juga ya, hehe 😄 Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi. Apa saja tag-tag yang tidak memiliki penutup itu? mari kita simak… 1. Tag <area>Tag <area> fungsinya untuk mendefinisikan area pada image map.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.