Grain Generator Sederhana dengan HTML5 Canvas

Oleh -

Semenjak pertama kali penulis tertarik dengan image processing, penulis penasaran bagaimana membuat algorithma efek grain untuk ditambahkan sebagai tekstur.

Efek grain yang penulis maksud disini, seperti tumpukan pasir, atau partikel-partikel kecil dalam jumlah yang banyak;

Ternyata, dengan bantuan HTML5 Canvas, implementasi algorithmanya sangat mudah. kuncinya hanyalah bayangan.

Gambar di atas adalah contoh efek grain dengan menggambar titik-titik secara acak, dengan ukuran 3x3 pixel, dan dengan blur bernilai 2.

Berikut kode HTML5 Canvas untuk menggenerate gambar di atas:

<html> 
<head> 
<title>Simple Grain 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 = "#00c853"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
function Menggambar() 
{ 
 ctx.fillStyle = "#00c853"; 
 ctx.beginPath(); 
 ctx.shadowColor="black"; 
 ctx.shadowBlur =2; 
 ctx.shadowOffsetX=0; 
 ctx.shadowOffsetY=0; 
 x=canvas.width*Math.random(); 
 y=canvas.height*Math.random(); 
 for(i=0;i<20;i++){ 
  var a=20; 
  ctx.fillRect(x-a+2*a*Math.random(),y-a+2*a*Math.random(),3,3); 
 } 
 window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>

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

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

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

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

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

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

Menyikapi Ucapan AI Pejabat

Oleh -
Beberapa tahun belakangan, ketika tulisan ini ditulis, topik Kecerdasan Buatan (AI) memang sedang naik daun di Indonesia. Dari obrolan rekan kerja, hingga diskusi di ruang rapat, AI menjadi perbincangan hangat. Bahkan, tidak ketinggalan, para pejabat publik pun semakin sering melontarkan wacana seputar teknologi canggih ini. Fenomena ini tentu menarik untuk disimak. Di satu sisi, kita patut mengapresiasi bahwa AI, dengan segala potensinya, memang layak mendapatkan perhatian serius dari pemerintah. Yang konon katanya, AI digadang-gadang mampu mendongkrak pertumbuhan ekonomi, meningkatkan efisiensi, dan bahkan menciptakan inovasi di berbagai sektor. Padahal kalau kita telaah lagi, di sisi lain, AI justru akan berpotensi mengambil banyak lapangan pekerjaan. Lalu apakah kita harus terpukau dengan jargon-jargon AI yang dilontarkan, terutama oleh pejabat? Pemahaman Ketertarikan para pejabat terhadap AI bisa jadi hanya merupakan respon terhadap tren global atau bahkan upaya untuk menunjukkan ...
Baca selengkapnya