Animasi Lingkaran Abstrak Futuristik dengan HTML5 Canvas

Oleh -

Salah satu fungsi menggambar yang menarik bagi penulis di HTML5 Canvas, adalah fungsi arc.

Fungsi arc dipergunakan untuk membuat gambar lingkaran.

Dengan menggambarnya dalam bentuk stroke, dan menggunakan setting lebar garis (lineWidth) yang berbeda-beda setiap lingkarannya akan di dapat gambar seperti di atas.

Sedangkan dengan animasinya diorientasikan pada dua hal, yaitu rotasi dan panjang dari arc.

Animasi rotasi dilakukan tiap frame, dengan arah sesuai nilai a di setiap lingkarannya, dan diperbaharui minimal tiap 50 frame.

Kemudian dalam tiap 50 frame itu juga, diperbaharui nilai panjang arc, jika panjang lebih kecil dari panjang lingkaran yang terbaru, maka panjang akan ditambah. Sebaliknya, jika panjang lebih besar, maka akan dikurangi.

Untuk melihat hasil animasinya dapat dilihat pada video dengan link di sini.

Kode berikut ini adalah kode HTML5 Canvas, generate animasi di atas:
<html> 
<head> 
<title>Circles Animation</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var jeda=50; 
 
class Lingkaran 
{ 
 constructor(x,y,rot) 
 { 
  this.x=x; 
  this.y=y; 
  this.rot=rot; 
  this.vec=0; 
  this.a=-10+20*Math.random(); 
  this.r=50+200*Math.random(); 
  this.lineWidth=Math.floor(2+150.0*Math.random()); 
  if(0.5*this.lineWidth>this.r)this.lineWidth=this.r; 
  this.panjang=Math.floor(10+260.0*Math.random()); 
  this.panjango=this.panjang; 
  this.jeda=jeda; 
 } 

 move() 
 { 
  this.vec+=this.a; 
  var bts=1; 
  if(this.vec<-bts)this.vec=-bts; 
  if(this.vec>bts)this.vec=bts; 
  if(this.panjango>this.panjang)this.panjango--; 
  if(this.panjango<this.panjang)this.panjango++; 
  this.rot+=this.vec; 
  this.jeda--; 
  if(this.jeda<=0)this.jeda=jeda+Math.floor(100.0*Math.random()); 
  if(this.jeda==1){ 
   this.a=-1+2.0*Math.random(); 
   this.panjang=Math.floor(5+155.0*Math.random()); 
  } 
 } 
} 
 
circle=[]; 
 
for(i=0;i<10;i++)circle[i]=new Lingkaran(0.5*canvas.width,0.5*canvas.height,-180+360.0*Math.random()); 
 
function Menggambar() 
{ 
 var ctx = canvas.getContext("2d"); 
 ctx.globalAlpha=1.0; 
 ctx.fillStyle = "#01579b"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 

 ctx.strokeStyle = "#03a9f4"; 
 ctx.lineWidth=10; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,15,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.lineWidth=4; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,200,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.lineWidth=4; 
 ctx.beginPath(); 
 ctx.arc(0.5*canvas.width,0.5*canvas.height,300,0,2*Math.PI); 
 ctx.stroke(); 
 ctx.closePath(); 
 
 for(i=0;i<circle.length;i++){ 
  circle[i].move(); 

  ctx.save(); 
  ctx.translate(circle[i].x,circle[i].y); 
  ctx.rotate(circle[i].rot* Math.PI / 180); 
  ctx.strokeStyle = "#01DCFC"; 
  ctx.globalAlpha=0.8; 
  ctx.lineWidth=circle[i].lineWidth; 
  ctx.beginPath(); 
  ctx.arc(0,0,circle[i].r,0,circle[i].panjango*Math.PI/180); 
  ctx.stroke(); 
  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

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

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

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

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

Eliminasi Gauss-Jordan untuk Invers Matrix dengan C++

Oleh -
Gambar
Setelah mencoba menyelesaikan dengan Java dan Javascript , penulis juga mencoba mengimplementasi algoritma eliminasi Gauss-Jordan untuk mencari solusi invers matrix dengan bahasa C++. Langkah pembuatannya adalah sebagaimana video di bawah ini: Penulis menggunakan compiler C++ online yang beralamat di http://cpp.sh . Dimana kekurangan dibanding dengan bahasa Java, karena tidak ada fungsi menghitung jumlah array atau dimensi matrix, sehingga program tidak bisa fleksibel. Yaitu diperlukan peubahan secara manual, mulai dari jumlah matrix dan nilai matrixnya itu sendiri. Sedangkan jika di Java, hanya perlu mengganti matrixnya saja. Berikut ini kode C++ implementasi eliminasi Gauss-Jordan untuk menghitung invers matrix. // Example program #include <iostream> #include <string> int N=3; double A[3][3]={ {0,-3,-2}, {1,-4,-2}, {-3,4,1} }; double Ainvers[3][3]; using namespace std; int cekDiagonal( int a); int main() { for ( int i=0;i<N;i++){ f...
Baca selengkapnya

Algorithma Julianday dengan Java

Oleh -
Teringat dengan tahun 2020 adalah termasuk tahun kabisat, penulis mencoba membuka-buka kembali library Java untuk menghitung Julianday yang pernah penulis buat sebelumnya. Library tersebut adalah kode utama untuk membangun beberapa aplikasi penulis, antara lain Julianday Converter , Predicted Date , dan  Date Calculator  di Play Store. Berikut ini adalah kode library Julianday yang penulis maksud di atas: import java.util.Calendar; /* version 2 * Last Update 25 Mei 2015 * * This Lib was made by Smart Calc Community for Smart Calc Lib of * Departement of Physics, Faculty of Mathematics and Natural Sciences, * University Brawijaya, Malang * * Referensi: * Anugraha, Rinto. 2012. Mekanika Benda Langit. Jurusan Fisika Fakultas MIPA Universitas Gajah Mada. * * Contact person: * uboiz@yahoo.com */ public class JulianDate { private int day = 0, month = 0, year = 0,hours=0,minute=0; private double jd = 0; private double...
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

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