Animasi Lingkaran Menjauhi Titik Tengah dengan HTML5 Canvas

Oleh -

Terusik mengingat pemrograman HTML5 Canvas yang penulis telah lama tidak membuat aplikasi apapun, akibat kesibukan kerja. Dalam tulisan ini penulis mencoba membuat animasi sederhana, lingkaran-lingkaran yang bergerak menjauhi titik tengah workspace.

Konsepnya adalah lingkaran tidak hanya menjauhi, tetapi ukurannya semakin membesar, dan sedikit bergerak berotasi.

Ide ini muncul, ketika penulis melihat video Youtube, dengan background yang kurang lebih seperti animasi di atas.

Effect glow, hanya penulis gunakan untuk mempercantik tampilan.

Di bawah ini adalah kode HTML5 Canvas animasi tersebut:

<html> 
<head> 
<title>Dots that Move Around</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var num=0,n=1; 
var points=[]; 
var vx=0.1,vy=0.1; 
var RO=0.5*Math.sqrt(canvas.width*canvas.width+canvas.height*canvas.height); 
 
function Menggambar() 
{ 
 var ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "black"; 
 ctx.fillRect(0, 0, canvas.width, canvas.height); 

 if(n==1 && num<50){ 
  points[4*num+0]=0.5* canvas.width-0.5+Math.random()*0.9; 
  points[4*num+1]=0.5* canvas.height-0.5+Math.random()*0.9; 
  points[4*num+2]=0.0; 
  points[4*num+3]=1.0; 
  num++; 
  n=200+parseInt(Math.random()*50); 
 }else n--; 
 ctx.save(); 
 for(i=0;i<num;i++){ 
  points[4*i+2]+=0.01; 

  var rx=points[4*i+0]-0.5 * canvas.width; 
  var ry=points[4*i+1]-0.5 * canvas.height; 
  var r=Math.sqrt(rx*rx+ry*ry); 
  r+=0.2; 
  if(r>RO){ 
   points[4*i+0]=0.5* canvas.width-0.5+Math.random()*0.9; 
   points[4*i+1]=0.5* canvas.height-0.5+Math.random()*0.9; 
   points[4*i+2]=0.0; 
   points[4*i+3]=1.0; 
  }else{ 
   var rad=Math.atan2(ry,rx); 
   rad-=Math.PI/5500; 
   points[4*i+0]=0.5 * canvas.width+r*Math.cos(rad); 
   points[4*i+1]=0.5 * canvas.height+r*Math.sin(rad); 
  } 

  ctx.globalAlpha=points[4*i+3]; 
  ctx.shadowBlur = 10; 
  ctx.shadowColor = "yellow"; 
  points[4*i+3]-=0.0001; 
  if(points[4*i+3]>0){ 
   ctx.beginPath(); 
 
   // Fill with gradient 
   ctx.fillStyle = "white"; 
   ctx.arc(points[4*i+0],points[4*i+1],points[4*i+2], 0, 2 * Math.PI); 
   ctx.fill(); 
   ctx.closePath(); 
  } 
 } 
 ctx.restore(); 
 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

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Oleh -
Gambar
Menentukan arah kiblat sholat bagi kaum muslim dapat dilakukan dengan menggunakan bantuan Google Maps, syaratnya adalah gadget smartphone yang digunakan harus memiliki sensor kompas dan GPS. Sedangkan untuk Sensor GPS biasanya sudah menjadi fitur wajib yang dimiliki oleh setiap smartphone, namun untuk sensor kompas tidak semua smartphone dilengkapi dengan sensor tersebut. Sehingga metode penentuan arah kiblat pada artikel ini hanya dapat dicoba dengan smartphone yang memiliki sensor-sensor di atas. Kemudian dari segi OS (Operating System), smartphone yang diperlukan adalah yang asalkan dapat menjalankan Google Maps.  Saat ini Google Maps dapat dijalankan pada berbagai OS smartphone termasuk di laptop atau notebook. Sehingga tutorial ini dapat dicoba juga di gadget laptop yang dilengkapi dengan kedua sensor di atas. Konsep dasar menentukan arah kiblat, adalah mencari arah posisi Kabah terhadap posisi gadget. Langkah pertama adalah menentukan posisi gadget di Google Maps. Ji...
Baca selengkapnya

Algorithma FPB dan KPK dengan Javascript

Oleh -
Gambar
Melihat antusias pengunjung terhadap artikel yang berjudul " Algorithma Java Mencari KPK dan FPB ", oleh karena itu penulis mencoba mengimplementasikan algorithma pencaharian FPB (Faktor Persekutuan Terbesar) dan KPK (Kelipatan Persekutuan Terkecil) dalam bentuk yang lebih mudah untuk dicoba, yaitu menggunakan bahasa pemrograman Javascript. Memang karena Javascript termasuk dalam bahasa pemrograman yang disuguhkan dengan interface yang mudah dipahami, implementasi algorithma mencari FPB dan KPK yang sebelumnya ditulis menggunakan bahasa Java, dapat penulis tulis ulang dengan syntax yang jauh lebih pendek. Diharapkan dengan kode program versi Javascript ini, pembaca dapat langsung mencobanya, dengan menjalankannya di web browser. Cukup dengan menuliskan bilangan-bilangan yang akan dicari nilai FPB dan KPK di form input, memisahkannya dengan tanda koma, dan menekan tombol submit, kode program akan menghitung mulai dengan menurunkan ke faktor-faktornya terlebih ...
Baca selengkapnya

Menampilkan Undetermined Circle Progressbar di Java

Oleh -
Gambar
Terkadang, dalam menjalankan perintah yang tidak dapat ditentukan nilai progress presentasenya, dibutuhkan untuk menampilkan progressbar yang berupa circle yang berputar secara terus menerus. Hal ini seperti memanggil sebuah halaman website, dimana website tersebut tidak dapat dihitung berapa ukuran sebenarnya. Sehingga tidak dapat membandingkan atau menghitung seberapa persen halaman yang sudah terdownload, dibanding yang belum. Kode berikut adalah kode class ProgressCircleUI yang telah penulis modifikasi, untuk menampilkan progressbar circle yang berputar secara terus-menerus. package circleloopprogressbar; import java.awt.BasicStroke; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Insets; import java.awt.RenderingHints; import javax.swing.JComponent; import javax.swing.plaf.basic.BasicProgressBarUI; /** * * @author Edugameapp */ public class ProgressCircleUI extends BasicProgressBar...
Baca selengkapnya

Genetics Algorithm Method with Progressive Error Prediction

Oleh -
Gambar
Genetics Algorithm is one of approximation method that used base prediction technique. It's suggest the algorithm that can be used as portable finding method to approach unknown value whatever mathematics problem that given base on fitness value that can be reach. Neural Network have also capability as same as genetic algorithm. but it's have different approximation method where weight value is a sign that the best prediction can be reach.  Progressive error prediction is a method to implement Genetic Algorithm for fast finding algorithm. The idea is came from the numerical calculation with ordinary numerical approximation oftentimes given the infinite results value, if the case solver that implemented to the calculation not suitable as expectation, calculation will be stuck and can't be continued. With implement progressive error prediction, the random prediction can be directed to the right point and avoiding stuck point, so the calculation still will be continued alt...
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

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

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

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Oleh -
Gambar
Seringkali untuk urusan data, kita diminta untuk mengecek apakah data sudah dimasukkan atau belum. Biasanya keperluan ini untuk mengecek data terbaru. Misalnya mengecek apakah email siswa sudah masuk daftar atau belum Salah satu caranya adalah menggunakan Query formula berikut ini: =IFNA(QUERY(B2:B,"SELECT B WHERE B IS NOT NULL AND B<>'"&JOIN("' AND B<>'",QUERY(D2:D,"",0))&"'",0)) Di mana B dan D adalah kolom sheet yang implementasinya dapat dilihat pada video dibawah ini: Sedangkan jika diperlukan highlight data untuk menandai data mana saja yang belum masuk dapat menggunakan Conditional Formatting Google Sheet sebagaimana video dibawah ini:
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