Polygon Cloud Generator dengan HTML5 Canvas

Oleh -

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(); 
 var x=canvas.width*Math.random(); 
 var y=canvas.height*Math.random(); 
 ctx.save(); 
 ctx.translate(x,y); 
 ctx.rotate(-180+360*Math.random()*Math.PI/180); 
 var a=Math.random(); 
 ctx.scale(a,a); 
 ctx.fillStyle = warna[Math.floor(warna.length*Math.random())]; 
 ctx.beginPath(); 
 var r=50*Math.random(); 
 var angle=-180,d=10; 
 var jum=Math.round(360.0/d); 
 var points=[]; 
 for(i=0;i<jum;i++){ 
  var c=2+10*Math.random(); 
  var ro=r-c+2*c*Math.random(); 
  points[2*i+0]=ro*Math.cos(1.0*angle*Math.PI/180); 
  points[2*i+1]=ro*Math.sin(1.0*angle*Math.PI/180); 
  angle+=d; 
  if(i==0){ 
   ctx.moveTo(points[2*i+0],points[2*i+1]); 
  }else{ 
   ctx.lineTo(points[2*i+0],points[2*i+1]); 
  } 
 } 
 ctx.fill(); 
 ctx.closePath(); 
 ctx.restore(); 

 num++; 
 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

Kode Apps Script MailApp untuk Form Mengirimkan Email

Oleh -
Gambar
Terkadang kita membutuhkan untuk mengirimkan email kepada pengguna web site secara langsung, tanpa harus membuka email itu sendiri. Untuk web apps yang dibangun menggunakan Apps Script, sangat dimudahkan, dengan menggunakan fungsi MailApp untuk mengirimkan email menggunakan akun Google kita. Maka, berikut ini ada video demo bagaimana membuat form sederhana, yang berfungsi untuk mengirimkan email ke pengguna secara langsung, tanpa harus membuka email. Demo Kode file .gs function processEmailToUser(recipient,subject,pesan) { var datum={}; var bool=sendEmailToUser(recipient,subject,pesan); if(bool){ datum["status"]=1; }else{ datum["status"]=0; datum["error"]="Gagal mengirimkan email"; } return datum; } function sendEmailToUser(recipient,subjecto,pesan) { try { MailApp.sendEmail({ to: recipient, subject: subjecto, htmlBody: pesan }); return true; } catch (e) { return false; } } file .html      func...
Baca selengkapnya

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Oleh -
Sebagai database engineer, penulis sempat kaget ketika mendapati banyaknya data masuk, khususnya dari mahasiswa yang mengajukan nama instansi, yang secara berulang kali menulis PT tanpa menggunakan tanda titik, untuk pengajuan suratnya. Penulis yang terbiasa dengan pemahaman lama (EYD) bahwa 'PT' harus ditulis 'PT.' akhirnya mencoba memeriksa ulang. Setelah penulis check dan berdiskusi ke salah satu AI, ternyata memang terdapat pembaharuan dan penulisan tanpa titik adalah kaidah baku modern. Konsistensi ini krusial untuk integritas database.  Konflik Aturan Bahasa dan Kebutuhan Sistem Pertama banyak yang sudah terbiasa (termasuk penulis) menambahkan titik setelah singkatan seperti 'PT.' karena dahulu aturan Ejaan Yang Disempurnakan (EYD) mengamanatkan titik pada singkatan tertentu. Namun, untuk menjaga  integritas data  dan  standardisasi  dalam sistem informasi dan dokumen hukum, kita harus berpegangan pada kaidah penulisan nama entitas yang resmi. 1. Penulisan...
Baca selengkapnya

Apps Script untuk Mengirimkan Notifikasi Approval

Oleh -
Gambar
Berikut ini kode Apps Script untuk mengirimkan email approval berdasarkan input dari pengguna: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Administrasi"); menu.addItem("Kirim Email Approval", "openFormEmail"); menu.addToUi(); } function openFormEmail() { var target = SpreadsheetApp.openById("--ID Sheet--"); var ss=target.getSheetByName("Instansi"); ss.getRange("A2:F").getValues().map(function(row,index){ if(row[0]!="" && row[0]!="Passed"){ var subject="Pengajuan Instansi "+row[3]+" "+row[0]; var pesan="Yth. "+row[2]+"<br/><br/>Terkait pengajuan nama instansi dengan:<br/><br/>"; pesan+="Nama: "+row[3]+"<br/>"; pesan+="Alamat: "+row[4]+"<br/><br/>"; if(row[0]=="Approved"){ ...
Baca selengkapnya

Tutorial Upload File ke Google Drive dari Website

Oleh -
Panduan ini adalah hasil diskusi penulis dengan aplikasi ChatGPT  yang menjelaskan cara membuat sistem  upload  file langsung dari website Anda ke Google Drive menggunakan kombinasi  HTML/JavaScript  (Frontend),  PHP  (Proxy), dan  Google Apps Script  (Backend). Langkah 1: Siapkan Google Apps Script (Backend) Kode ini berfungsi sebagai  Backend  yang memiliki izin untuk berinteraksi langsung dengan Google Drive API. PENTING:  Ganti  "id folder"  di baris kode dengan ID folder tujuan Anda di Google Drive. Kode Apps Script ( Code.gs ) function doPost(e) { try { // Memproses data JSON yang dikirim oleh PHP Proxy const data = JSON.parse(e.postData.contents); const folderId = "id folder"; // <-- GANTI DENGAN ID FOLDER GOOGLE DRIVE ANDA // Fallback data const fileName = data.filename || "tanpa_nama"; const mimeType = data.mimeType || "application/octet-stream"; // Mendekode konten Base...
Baca selengkapnya

Ketika Pengelola Basis Data Terabaikan

Oleh -
Gambar
Dalam dunia administrasi, terdapat lapisan yang sering kali tidak terlihat, yaitu pengelolaan basis data. Penulis, sebagai pengelola basis data tempat dimana penulis bekerja sebagai outsourcing, adalah salah satu dari yang tidak terlihat tersebut. Pekerjaan penulis mungkin tidak se-glamor pekerjaan administrasi yang berhadapan langsung dengan mahasiswa, tetapi penulis yakin peran penulis sangat krusial dalam memastikan kelancaran operasional institusi. Di usia yang telah matang, dan mulai membusuk, penulis hanya menginginkan lingkungan kerja yang kondusif, di mana kontribusi penulis dihargai. Namun, kenyataannya, penulis merasa bahwa upaya penulis dalam membangun dan memelihara sistem basis data yang efisien, yang meringankan beban administrasi rekan kerja dan mempermudah mahasiswa, justru malah mendapatkan apresiasi yang tidak layak. Acara-acara kebersamaan, seperti makan-makan yang seharusnya menjadi momen untuk mempererat hubungan antar rekan kerja, justru menjadi ajang pengucilan p...
Baca selengkapnya

TPlanning 3.1 untuk Optimasi Dosis Paparan Radioterapi

Oleh -
Gambar
TPlanning 3.1 adalah aplikasi android yang dapat digunakan sebagai media untuk optimasi dosis paparan radioterapi. Fiturnya yang mudah digunakan, memungkinkan aplikasi ini dapat digunakan berbagai lapisan masyarakat, terutama pihak medis, seperti mahasiswa PT (Perguruan Tinggi) yang belajar di bidang minat radiologi atau semacamnya. Dengan pemakaian TPlanning 3.1 untuk perencanaan penyinaran, baik itu untuk skala praktikum ataupun dilapangan yang sesungguhnya, pengguna akan lebih mudah menentukan area, besar dan arah sudut penyinaran terbaik. Sehingga proses penyinaran dapat dilakukan dengan sudut beam yang optimal dan aman. TPlanning 3.1 Latar Belakang Dalam Radioterapi, terdapat tahapan proses Treatment Planning, yaitu perencanaan dan penentuan besar sudut-sudut Beam yang akan diimplementasikan ke kanker/tumor. Penentuan arah penyinaran tersebut mengacu pada prinsip memaksimalkan dosis paparan yang diterima kanker/tumor, dan harus meminimalkan dosis paparan y...
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

Peringatan Pelanggaran Ads & Content Overlap Admob

Oleh -
Gambar
Tidak seperti biasanya, pada 21 Agustus 2020, penulis mendapat email dari Google Admob sebagiamana gambar dibawah ini: Isinya adalah ditemukannya pelanggaran penempatan iklan yang menindih konten (Ads & Content Overlap) aplikasi penulis, yaitu pada aplikasi Rambu Lalu Lintas . Penulis mengatakan hal ini tidak biasa, karena sebelumnya penulis telah yakin bahwa penempatan iklan pada seluruh aplikasi penulis telah tepat. Nyatanya masih ada saja yang salah, dan sepertinya hal ini akan terus berlanjut dan merupakan maintenance yang harus dilakukan oleh setiap developer terhadap aplikasinya tiap tahun.  Keterangan lebih jelas mengenai pelanggaran ini dapat dilihat lebih jelas di halaman Policy Center di halaman Google Admob. Yang memang sedikit sulit untuk dipahami bahasa penjelasannya. Sedangkan tindihan yang dimaksud adalah seperti gambar dibawah ini:   Penempatan iklan seperti gambar di atas, ternyata merupakan suatu pelanggaran, meskipun aplikasi penulis telah berusia 2 tahu...
Baca selengkapnya

Algorithma Bilangan Prima dengan Javascript

Oleh -
Gambar
Untuk belajar pemrograman tingkat dasar, Javascript dapat digunakan untuk mengimplementasikan perhitungan sederhana. Di bawah ini adalah contoh kode Javascript untuk mencari deret bilangan prima sampai angka yang diinputkan. Selain kode berisi algorithma bagaimana mendeteksi bilangan prima, kode javascript juga berisi cara mendeteksi input berupa bilangan angka atau tidak. <html> <head> <title>Prime Algorithm</title> </head> <body> Input : <input type= "text" id= "input" /><button type= "button" onclick= "CalcPrime()" >Calculate</button><br/><br/> Hasil : <span id= "hasil" ></span> <script> function CalcPrime() { var a=document.getElementById( "input" ).value; document.getElementById( "hasil" ).innerHTML= "" ; if (!isNaN(a) && a>=0){ for (i=2;i<a;i++){ var ketemu= false ...
Baca selengkapnya