Kode Animasi HTML5 Canvas Dots and Lines

Oleh -

Salah satu kegunaan pemanfaatan HTML5 Canvas, dapat digunakan untuk membuat animasi atau wallpaper seperti gambar di atas.

Berikut ini adalah contoh kode HTML5 yang penulis buat sebagai percobaan untuk tema 'generate wallpaper' menggunakan kode program Javascript:

<html> 
<head> 
<title>Dots and Lines Animation</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var num=25; 
var points=[]; 
 
for(i=0;i<2*num;i++){ 
 points[4*i+0]=Math.random() * canvas.width; 
 points[4*i+1]=Math.random() * canvas.height; 
 points[4*i+2]=-2+Math.random() *5; 
 points[4*i+3]=-2+Math.random() *5; 
 if(points[4*i+2]==0 && points[4*i+3]==0)points[4*i+2]=1; 
} 
 
function Menggambar() 
{ 
 var ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "black"; 
 ctx.fillRect(0, 0, canvas.width, canvas.height); 

 ctx.globalAlpha = 0.2; 
 for(i=0;i<num;i++){ 
  points[4*i+0]+=points[4*i+2]; 
  points[4*i+1]+=points[4*i+3]; 

  if(points[4*i+0]>canvas.width+10)points[4*i+0]=-5; 
  else if(points[4*i+0]<-10)points[4*i+0]=canvas.width+5; 
  if(points[4*i+1]>canvas.height+10)points[4*i+1]=-5; 
  else if(points[4*i+1]<-10)points[4*i+1]=canvas.height+5; 

  ctx.fillStyle = "yellow"; 
  ctx.beginPath(); 
  ctx.arc(points[4*i+0],points[4*i+1],5, 0, 2 * Math.PI, true); 
  ctx.fill(); 

  for(j=i+1;j<num;j++){ 
   var rx=points[4*j+0]-points[4*i+0]; 
   var ry=points[4*j+1]-points[4*i+1]; 
   var r=Math.sqrt(rx*rx+ry*ry); 
   if(r<200){ 
    ctx.strokeStyle = "yellow"; 
    ctx.beginPath(); 
    ctx.moveTo(points[4*i+0],points[4*i+1]); 
    ctx.lineTo(points[4*j+0],points[4*j+1]); 
    ctx.lineWidth = 1; 
    ctx.stroke(); 
   } 
  } 
 } 

 ctx.globalAlpha = 1.0; 
 for(i=num;i<2*num;i++){ 
  points[4*i+0]+=points[4*i+2]; 
  points[4*i+1]+=points[4*i+3]; 

  if(points[4*i+0]>canvas.width+10)points[4*i+0]=-5; 
  else if(points[4*i+0]<-10)points[4*i+0]=canvas.width+5; 
  if(points[4*i+1]>canvas.height+10)points[4*i+1]=-5; 
  else if(points[4*i+1]<-10)points[4*i+1]=canvas.height+5; 

  ctx.fillStyle = "white"; 
  ctx.beginPath(); 
  ctx.arc(points[4*i+0],points[4*i+1],5, 0, 2 * Math.PI, true); 
  ctx.fill(); 

  for(j=i+1;j<2*num;j++){ 
   var rx=points[4*j+0]-points[4*i+0]; 
   var ry=points[4*j+1]-points[4*i+1]; 
   var r=Math.sqrt(rx*rx+ry*ry); 
   if(r<200){ 
    ctx.strokeStyle = "white"; 
    ctx.beginPath(); 
    ctx.moveTo(points[4*i+0],points[4*i+1]); 
    ctx.lineTo(points[4*j+0],points[4*j+1]); 
    ctx.lineWidth = 1; 
    ctx.stroke(); 
   } 
  } 
 } 
 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

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

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

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

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

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

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

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

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

Pengalaman Ditipu di Juanda

Oleh -
Gambar
Image source: Pixabay-Freedommail Berikut ini adalah pengalaman penulis ditipu oleh seorang sopir taksi non-argo dan telah terjadi beberapa tahun lalu. Tepatnya setelah diresmikannya Terminal 2 Juanda. Penulis menceritakan pengalaman ini dengan harapan tidak ada pengunjung Juanda lain yang ditipu sebagaimana penulis, terutama bagi mereka yang pertama kali datang ke terminal Juanda. Awalnya penulis bertujuan untuk menjemput istri penulis yang baru datang dari luar negeri. Waktu itu, penulis belum memiliki sepeda motor, dan salah satu cara paling murah adalah dengan naik bus antar kota dengan turun di Terminal Bus Bungurasih. Berdasarkan info dari beberapa sumber, di terminal tersebut sudah disediakan bus shuttle Terminal-Juanda dengan ongkos, kalau tidak salah waktu itu Rp 25.000. Dan ternyata benar, bus tersebut bernama Damri, dan begitu sampai di Terminal Bungurasih, penulis pun langsung masuk ke bus tersebut. Tidak seperti bus kota atau antar kota yang menunggu ...
Baca selengkapnya