Algorithma Hujan Salju dengan HTML5 Canvas

Oleh -

Melihat animasi hujan salju di salah satu video yang penulis temukan di Youtube. Membuat penulis penasaran mengimplementasikan bagaimana caranya membuat animasi hujan salju, menggunakan HTML5 Canvas.

Berikut ini adalah kode HTML, menggunakan HTML5 Canvas untuk membuat animasi yang penulis inginkan.

<html> 
<head> 
<title>Raining Snow</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "8px Arial"; 
 
var num=3,n=0,all=0; 
 
snow=[]; 

function Menggambar() 
{ 
 if(n%100 && all<3*500){ 
  for(i=0;i<num;i++){ 
   snow[all++]=canvas.width*Math.random(); 
   snow[all++]=-100-1000*Math.random(); 
   snow[all++]=0.1*(-1.0+3.0*Math.random()); 
  } 
  n=0; 
 } 
 
 ctx.fillStyle = "blue"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 
 
 ctx.fillStyle = "white"; 
 for(i=0;i<snow.length/3;i++){ 
  snow[3*i+0]+=snow[3*i+2]; 
  snow[3*i+1]+=0.5; 
  ctx.fillText("*",snow[3*i+0],snow[3*i+1]); 
  if(snow[3*i+1]>canvas.height){ 
   snow[3*i+0]=canvas.width*Math.random(); 
   snow[3*i+1]=-100; 
  } 
 } 
 
 n++; 
 window.requestAnimationFrame(Menggambar); 
} 

Menggambar(); 
</script> 
</body> 
</html>

Penulis tidak menambahkan macam-macam tambahan, hanya lebih berorientasi perpindahan posisi dari karakter "*".

Komentar

Posting Komentar



Postingan populer dari blog ini

Membuat Kalkulator Interpolasi Bilinear dengan Javascript

Oleh -
Gambar
Dalam perhitungan numerik yang seringkali penulis lakukan, untuk keperluan interpolasi, penulis banyak kali menggunakan metode Interpolasi Biliner. Selain karena mudah dalam penggunaannya, untuk keperluan presisi, dapat dengan mengorientasikan ukuran panjang sisi grid yang kecil. Persamaan matematis Interpolasi Bilinear yang penulis implementasikan adalah sebagai berikut: Sedangkan dalam kode Javascript, untuk mempermudah perhitungan, penulis menggunakan dua kali langkah, yaitu menghitung arah horizontal dulu sebagai nilai c1 dan c2, baru menghitungnya sebagai nilai B. Langkah-langkah di atas, dapat dilihat pada video Youtube penulis di bawah ini: Sedangkan secara online kalkulator dapat dicoba dengan mengklik button dibawah ini: Demo Untuk kode Javascript dalam halaman HTML-nya adalah sebagai berikut: <html> <head> <title>Bilinear Interpolation Example</title> </head> <body> <h1>Bilinear Interpolation Calculator</h1> Coordinat po...
Baca selengkapnya

Seberapa Hebatkah Orang Dalam

Oleh -
Gambar
Ilustrasi Orang Dalam (Sumber gambar: Pixabay/mhouge) Dalam urusan pemberkasan sertifikat tanah atau semacamnya, seringkali kita menemui orang yang berani bilang "Dengan bantuan orang dalam, maka segala urusan apapun akan menjadi mudah dan murah". Biasanya, orang yang berani bilang seperti itu adalah mereka yang bekerja sebagai makelar atau calo. Kemudian bagi penulis sendiri, semenjak merasa ditipu oleh seorang 'makelar' pengurusan sertifikat tanah sebelum tulisan ini ditulis, penulis menjadi sulit mempercayai kata-kata orang yang menyebutkan orang dalam tersebut. Sehingga, jika terdapat irang yang bilang semacan itu, penulis hanya balik menantang "Coba jaman sekarang, dia berani kagak!". Alasannya, pertama, peraturan semakin ketat, seperti yang penulis posting sebelumnya, notaris pun saat tulisan ini ditulis, tidak berani untuk melakukan jalan pintas. Misalnya untuk masalah perwalian pembelian tanah waris, 3 dari 4 notaris yang penulis temu...
Baca selengkapnya

Algorithma Tic Tac Toe dengan HTML5 Canvas

Oleh -
Gambar
Penasaran membuat game Tic Tac Toe, terutama tentang menambahkan kecerdasan buatan (Artificial Intelligence) untuk melawan pemain, penulis mencoba menuliskan algorithma dan memvisualisasikannya dengan HTML5 Canvas. Kode program game Tic Tac Toe dibawah ini disertai dengan interaksi mouse dan touch untuk mempermudah penggunaan. Sedangkan ide kecerdasan buatannya, komputer mencari dulu posisi terbaik untuk dirinya agar menang, baru jika tidak terpenuhi, komputer mencari posisi yang paling tepat untuk bertahan. <html> <head> <title>Tic Tac Toe</title> </head> <body> <div id= "score" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <div id= "hasil" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <canvas id= "myCanvas" width= "500" height= "500" > </canvas><br/> ...
Baca selengkapnya

Perbedaan Sudut Pandang Dosen dan Karyawannya

Oleh -
Sebuah perdebatan dingin dari sisi Dosen senior dan karyawan di suatu instansi pendidikan, di mana penulis pernah bekerja di dalamnya, menggelitik penulis untuk membaginya dalam blog ini. Bukan untuk meminta pembenaran, hanya saja penulis ingin berbagi sudut pandang, yang siapa tahu berefek positif bagi pembaca. Mulanya seorang karyawan senior, mengatakan jika ada yang dari pihak Dosen yang memberi penilaian jelek terhadap pekerjaan penulis sebagai karyawan, "Jangan dianggap, sebab yang membayar kita itu Fakultas. Bukan Dosen itu". Tentu, perkataan tersebut berpengaruh dan menjadikan penulis berprinsip, "Yang penting pekerjaanku selesai". Setelah beberapa lama bekerja, tiba-tiba seorang Dosen senior berbincang dengan penulis dan berkata, "Salah satu daya tarik Fakultas adalah SDM Dosen-dosen pengajarnya, sehingga mahasiswa bersedia belajar dan menjadi mahasiswa, adalah karena adanya Dosen-dosen, dan tugas karyawan adalah membantu Dosen-dosen tersebut". Dim...
Baca selengkapnya

Polygon Cloud Generator dengan HTML5 Canvas

Oleh -
Gambar
Masih penasaran dengan algorithma pembuatan cloud (awan) sebelumnya, penulis mencoba untuk membuat efek cloud menggunakan polygon. Ternyata hasilnya lebih bagus, dengan kualitas kecerahan yang lebih tinggi. Sama dengan kode cloud generator pada posting sebelumnya, bedanya kali ini penulis menggunakan fungsi draw polygon dan dengan menggunakan globalAlpha=0.1. Berikut ini adalah kode HTML5 Canvas implementasi algorithma di atas: <html> <head> <title>Polygon Cloud Generator</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var num=0; var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "#2196f3" ; ctx.fillRect(0,0,canvas.width,canvas.height); warna=[ "white" ]; ctx.globalAlpha = 0.1; function Menggambar() { ctx.beginPath();...
Baca selengkapnya

Membuktikan Hasil Pendekatan Limit Menggunakan Algebra Equation Calculator

Oleh -
Gambar
  Salah satu permasalahan dalam matematika yang sering diberikan kepada siswa sekolah tingkat menengah adalah permasalahan tentang limit. Secara konsep menyebutkan bahwa nilai dari suatu fungsi atau deret, dapat didekati melalui nilai input tertentu. Dimana kegunaannya adalah untuk mencari nilai yang hasil perhitungannya menghasilkan nilai tak tehingga, atau menghitung hasil dengan nilai input tak terhingga. Konsep ini sangat mudah dipahami, namun dalam implementasinya, terutama di lembar test ujian sangatlah berbeda. Entah karena memang sulit, atau dibuat sulit karena lebih mementingkan ego sang pembuat soal. Sampai-sampai di bimbingan belajar siswa diajari cara menghitung cepat limit, dengan trik yang menurut penulis semakin melencengkan pemahaman siswa. Algebra Equation Calculator adalah aplikasi Android buatan penulis, yang di distribusikan dibawah nama Computational Lab di Play Store. Aplikasi ini sengaja penulis buat langsung menampilkan hasil, ...
Baca selengkapnya

Sedikit Pandangan tentang Pelatihan Bersertifikasi

Oleh -
Sebuah percakapan menarik dengan salah satu pengguna Facebook. Beliau menilai bahwa aplikasi Edugameapp buatan penulis sebenarnya layak digunakan sebagai pendamping bahan ajar guru di sekolah. Dan kalau bisa, dibuat semacam pelatihan yang bersertifikasi. "Misal ada minat ke arah pendidikan mah, bisa buat bahan alat peraga pendamping pembelajaran online, khususnya SMK". Artinya menurut beliau, perlu diberikannya bukti cetak hitam di atas putih (sertifikat), agar aplikasi-aplikasi penulis lebih dicari oleh masyarakat. Seperti oleh sekolah-sekolah yang memiliki jurusan yang berkaitan dengan presisi alat ukur atau analis kimia. Bagus nya sih tanpa iklan, Alternatif income nya lewat pelatihan & sertifikasi, Lbh ke persiapan dunia kerja, Atau uji kompetensi keahlian Ada tiga hal yang penulis ingin ulas di sini: Pertama , untuk menjadikannya semacam pelatihan, penulis perlu membangun aplikasi-aplikasi Edugameapp penulis menjadi sebuah sistem database. Misalnya, ketika pengguna t...
Baca selengkapnya

Menggambar Lingkaran Menyala dengan Efek Shadow

Oleh -
Gambar
Fungsi bayangan ternyata merupakan salah satu hal penting dalam proses menggambar, terutama untuk menambahkan kesan elegan. Gambar di atas, adalah contoh pemanfaatan efek bayangan di HTML5 Canvas, untuk menggambar lingkaran yang seakan menyala. Dengan warna bayangan sama dengan warna lingkaran, akan dapat dihasilkan bentuk lingkaran yang futuristik. Kode di bawah ini adalah kode untuk menggambar lingkaran di atas: <html> <head> <title>Draw Circle Generator</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "black" ; ctx.fillRect(0,0,canvas.width,canvas.height); function Menggambar() { ctx.fillStyle= "#50575C" ; var rx=0.5*canvas.width; var ry=0.5*canvas.height; var r=...
Baca selengkapnya

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Oleh -
Gambar
  I. Pendahuluan Sebagai tenaga administrasi di perguruan tinggi, pengelolaan jadwal semester yang efektif adalah kunci untuk memastikan bahwa proses akademik berjalan lancar dan efisien. Dengan banyaknya mata kuliah, dosen, mahasiswa dan ruang yang harus diatur, yang berpatokan pada pohon kurikulum, akan membutuhkan ketelitian yang tinggi dalam mengatur jadwal, agar masing-masing variabel tidak saling tumpang tindih. Dengan menggunakan tool yang tepat, pengelolaan jadwal akan lebih efisien dan dapat meningkatkan produktivitas bagi semua Sumber Daya Manusia (SDM) yang terlibat. Oleh karena itu, dalam tulisan ini penulis menawarkan jasa penjadwalan semester perguruan tinggi menggunakan Google Sheet, sebuah tool yang mudah digunakan dan dapat diakses dari mana saja. Dengan menggunakan jasa penjadwalan ini, penulis berharap perencanaan jadwal perguruan tinggi dapat dilakukan lebih cepat dan efektif. II. Kelebihan Berikut ini kelebihan penggunaan Google Sheet sebagai aplikasi penjadwal...
Baca selengkapnya

Afiliasi Shopee Tanpa Wajah dan Tanpa Beli Sampel Bermodal AI

Oleh -
Gambar
Setelah sekian lama berusaha menulis buku, akhirnya penulis berhasil memebuat sebuah buku yang, menurut penulis, memang layak untuk dibagikan ke publik. Buku tersebut berjudul " Rp 1.397 dari Shopee Video dengan Artificial Intelligence (AI) ", yang tidak lain adalah story book penulis dalam mencoba berafiliasi memanfaatkan video AI. Saat tulisan ini ditulis, penulis memberikan harga Rp. 7 ribu saja. Karena memang masih terdiri dari 20 halaman. Di mana planning penulis, buku ini akan penulis lengkapi seiring berjalannya waktu, dan semoga penulis bisa mendaftarkan ISBN, jika jumlahnya sudah mencapai 100 halaman. Penulis akan memberikan akses ke file asli, sehingga pembeli tidak perlu mengeluarkan uang lagi dikemudian hari jika buku ini di update. Mungkin akan timbul pertanyaan, kenapa penulis memilih menjadi afiliator yang sebelumnya adalah pemain Adsense? Intinya sederhana, penulis terpaksa harus mencari 'Adsense' baru, sebab status penulis yang sebagai tenaga  'ou...
Baca selengkapnya