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

Apps Script untuk Cetak Sertifikat

Oleh -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open...
Baca selengkapnya

Menambahkan Konfirmasi Email di Google Form

Oleh -
Gambar
Suatu hari penulis membantu dosen penulis menyiapkan form registrasi Pengabdian Kepada Masyarakat (PKM). Dan ternyata kebutuhannya adalah ketika seorang pendaftar melakukan registrasi dengan input data, dibutuhkan konfirmasi email yang terkirim secara otomatis. Setelah berselancar di internet, penulis menemukan salah satu caranya adalah dengan menggunakan Google Sheets dan Script. Caranya penulis tunjukkan dalam video di bawah ini: Sedangkan Google Script yang penulis gunakan dalam video di atas, dapat di download dilink di bawah ini: https://drive.google.com/file/d/1elg78BQFaKlhq9e0UuGmHhY0NS3BtfEp/view?usp=sharing Referensi: aniav. 2015. send_email.gs. https://gist.github.com/aniav/926f4667911ba1d138b8. Diakses tanggal 17 Juni 2020.
Baca selengkapnya

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Oleh -
Gambar
Dimisalkan terdapat data yang tersimpan di Google Sheets dan tidak terdapat pembeda antara satu dengan yang lain. Hal ini akan mengakibatkan kesulitan jika akan dilakukan penghapusan salah satu atau bebarapa data tertentu melalui web apps. Oleh karena itu, kode Apps Script di bawah ini, adalah kode untuk menambahkan "unique ID key" pada tiap data, terutama untuk mempermudah proses penghapusan data, yang biasanya dilakukan melalui web apps oleh pengguna yang berbeda. Kode function makeRandomChar(length) { var result = ''; const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@'; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function addRandomKey() { var target = SpreadsheetApp.openById("--ID Google Sheets file--"); var ss=target.getSheetByName("Data"); var d...
Baca selengkapnya

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Oleh -
Pada hari Jumat, 3 Januari 2025, sekitar jam 10 pagi, penulis mendapatkan pengalaman tidak merugikan dengan aksi skimming melalui aplikasi Android M-Pajak.apk. Aplikasi ini diunduh melalui alamat website yang saat itu beralamat di djponlinepajakcoid.com, yang tampilannya terlihat mirip dengan Play Store. Aksi dimulai dengan modus arahan untuk penonaktifan NIB (Nomor Induk Berusaha) melalui Whatsapp, baik berupa chat, phone call, video call, sampai share screen. Penulis diminta untuk memverifikasi data pribadi, kemudian menginstal aplikasi M-Pajak di atas. Bodohnya penulis, penulis mau-mau saja. Setelah itu, penulis diminta melakukan serangkaian registrasi dan diminta membeli materi online dengan ketentuan bahwa handphone yang digunakan membayar, harus sama dengan pembayaran pendaftaran. Lalu... Handphone penulis pun tiba-tiba tertutup dengan aplikasi berlogo DJP, dan dikatakan sedang dalam proses, serta penulis diminta menunggu dan tidak boleh disentuh katanya. Dan saat inilah, mungkin...
Baca selengkapnya

Menghapus Baris di Google Sheets yang Memiliki Sel Kosong dengan Apps Script

Oleh -
Gambar
Pastinya, input data yang dilakukan oleh pengguna, terdapat data yang kosong pada salah satu sel-nya. Hal ini biasanya karena salah input, atau memang sengaja di-input-kan oleh pengguna. Untuk mengurangi proses pengolahan, dapat dilakukan penghapusan data tersebut, dengan Apps Script yang dapat di download dengan kode seperti di bawah ini: Kode function deleteKosong() { var target = SpreadsheetApp.openById("--id Google Sheets file--"); var ss=target.getSheetByName("Data"); var data=ss.getRange("A2:G").getValues().map(function(row,index){return (row[0]!="" && row[3]=="")?index:null;}).filter(function(cellData){return cellData != null;}); for(var i=data.length-1;i>=0;i--){ ss.deleteRow(2+data[i]); } } Demo
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

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Oleh -
Gambar
Untuk menandai sel dengan susunan karakter random, yang mana kursor mouse sedang menandainya di sel tersebut pada Google Sheets, kita dapat menggunakan mengunakan Apps Script berikut ini: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Keperluan"); menu.addItem("Generate Random", "createRandom"); menu.addToUi(); } function makeRandomChar(length) { var result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@"; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function generateRandom() { return makeRandomChar(10+Math.floor(Math.random() *40)); } function createRandom() { var sheet=SpreadsheetApp.getActive(); sheet.getActiveSheet().getCurrentCell().setValue(""+generateRandom()); } Kode d...
Baca selengkapnya

Kebodohan Karyawan Menyalahkan Sistem

Oleh -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi ...
Baca selengkapnya

Template Gratis App Android Sederhana dengan Admob, Firebase dan In-app Purchase

Oleh -
Gambar
Android Studio sebenarnya sudah menyediakan macam-macam template sederhana, untuk membangun aplikasi. Namun pada template tersebut belum disertakan link untuk Admob , Firebase dan contoh implementasi in-app purchase. Padahal, fitur-fitur tersebut sangat dibutuhkan oleh developer pemula. Dalam tulisan ini, penulis menyertakan contoh template aplikasi Android sederhana, yang telah disertai kode untuk Admob, Firebase dan contoh implementasi kode pembelian menggunakan fitur in-app purchase. Tetapi, template ini perlu ditambahkan dan dimodifikasi secara penuh oleh developer itu sendiri, terkait penambahan kode iklan dan jenis in-app purchase yang digunakan. Sehingga, pengguna template tidak boleh berharap, jika aplikasi bisa langsung di compile dengan Android Studio dan langsung jadi. Jika kesulitan, pengguna dapat mencari solusi terkait error melalui internet. Atau dapat melayangkan email ke uboiz@yahoo.com . Template tersebut dapat di download di link di b...
Baca selengkapnya

Apps Script untuk Copy File ke Folder berdasarkan ID yang Terdaftar di Google Sheets

Oleh -
Gambar
Suatu hari, penulis diminta untuk mengumpulkan file-file yang disediakan dalam bentuk ID yang disimpan dalam Google Sheets. Alasan kenapa harus di-copy, karena pemilik file, tidak ingin file aslinya diubah-ubah. Sehingga, karena file juga berada di Google Drive, penulis memilih untuk men-copy ke folder lain. Dibawah ini adalah kode Apps Script yang digunakan untuk melakukan copy file ke folder dalam Google Drive, dan mencatat hasilnya yang berupa alamat url file yang baru, di kolom yang lain. Script function copyFiletoFolder() { var folder = DriveApp.getFolderById("--ID Folder target--"); var target = SpreadsheetApp.openById("--ID sheets--");//its same var ss=target.getSheetByName("PKL"); ss.getRange("J2:J").getValues().map(function(row,index){ if(row[0]!=""){ try{ var file=DriveApp.getFileById(row[0]); var f=file.makeCopy(file.getName(),folder); ss.getRange("K"+(2+index)).setValue(f...
Baca selengkapnya