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

Jalan-jalan ke Taman Nasional Baluran

Oleh -
Gambar
Berikut ini adalah pengalaman penulis bersepeda motor ke Taman Nasional Baluran. Yang berada di Jalan Raya Situbondo Banyuwangi km 35, Banyuputih, Situbondo, Jawa Timur. Pada tanggal 17 Februari 2018. Profile Taman Taman Baluran merupakan salah satu dari lima taman tertua Indonesia yang memiliki luas sekitar 25.000 hektar. Taman ini memiliki berbagai macam flora dan fauna. Dengan 444 spesies flora, termasuk 265 macam tanaman obat.  Untuk fauna, Taman baluran memiliki 2 macam primata yaitu long tail macaca dan black monkey, 233 spesies burung, kerbau, banteng, rusa, terumbu karang, ikan dan lain sebagainya. Sedangkan untuk object wisata sendiri, Taman Baluran memiliki Gua Jepang, padang Savanna Bekol, dan pantai Bama. Selain sebagai tempat rekreasi, taman ini cocok juga digunakan sebagai tempat untuk penelitian kalangan akademisi seperti mahasiswa, dosen, atau pihak peneliti lainnya. Dan dapat juga digunakan sebagai tempat pengambilan foto pre-wedding, s...
Baca selengkapnya

Menampilkan Struktur Tabel MySQL dengan JTree

Oleh -
Gambar
Tertarik menampilkan struktur table database MySQL dalam bentuk tree, penulis melakukan percobaan memanggil database menggunakan JTree. Penggunaan JTree memang karena aplikasi yang sedang penulis bangun adalah berbasis web app, Android dan dengan back-end berupa dekstop menggunakan Java. Seperti yang telah disebutkan dalam posting-posting sebelumnya, penggunaan Java tidak lain karena penulis ingin tidak terlalu ribet masalah lisensi dikemudian hari. Diharapkan dengan pembuatan dengan platform yang mayoritas 'free', distribusi aplikasi nantinya dapat dilakukan lebih mudah dan bebas. Desain Skenario utama pembuatan back-end aplikasi penulis, adalah bagaimanapun juga database yang digunakan harus satu, dan dapat diakses baik dari sisi web, Android dan juga software. Oleh karena itu penulis menggunakan database MySQL (My-Structured Query Language), dengan menggunakan komunikasi data berupa JSON (JavaScript Object Notation), yang di akses dan di encode men...
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

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

Algorithma Starfield dengan HTML5 Canvas

Oleh -
Gambar
Di bawah ini adalah kode animasi starfield dengan menggunakan 800 titik. Idenya sederhana, mendeteksi posisi mouse sebagai titik tengah arah gerak, titik disebar secara random pada luasan canvas, dan digerakkan menjauhi titik tengah dengan kecepatan tertentu. Titik tidak disebar begitu saja, tetapi secara kontinyu ditambahkan ke canvas tiap lima frame. Selain itu, titik tidak digambarkan berupa titik, namun berupa garis, dengan lebar garis yang ukurannya bertambah 0.02 tiap framenya. <html> <head> <title>Starfield</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "500" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var n=0; var pox=0.5*canvas.width; var poy=0.5*canvas.height; var Ro=Math.sqrt(pox*pox+poy*poy); var mousePos={x:pox,y:poy}; function getMousePos(canvas, evt){ var rect = c...
Baca selengkapnya

Algorithma Bilangan Prima dengan C++

Oleh -
Gambar
Screenshot kompilasi menggunakan codingground (diambil oleh penulis) Melihar traffic yang cukup banyak pada posting penulis terkait algorithma bilangan dengan Javascript dan Pascal , dibawah ini penulis mencoba untuk menuliskannya dalam kode C++. Berikut adalah kode implementasi bilangan prima, dengan menggunakan bahasa pemrograman C++. #include <iostream> using namespace std; bool isPrime( int a) { bool isprime= true ; if (a<0)isprime= false ; for ( int i=2;i<a;i++){ if (a%i==0){ isprime= false ; } } return isprime; } int main() { int angka=100;//batas angka yang mau di cek for ( int i=2;i<=angka;i++){ if (isPrime(i)) { if (i>2)cout<< "," ; cout << i; } } return 0; } Penulis menggunakan kompiler codingground C++ online, yang ada di  tutorialspoint.com .
Baca selengkapnya

Pengalaman Full Approved Google Adsense

Oleh -
Gambar
Setelah hampir 2 tahun lebih, akhirnya pada tanggal 2 November 2017, datang email dari Google Adsense yang menyatakan bahwa website penulis telah diterima secara penuh (full approved) seperti gambar dibawah ini: Email tersebut datang, setelah berulang kali penulis melalukan pendaftaran website dan juga melalui blog. Bagi pembaca yang belum mengetahui cara pendaftaran website tersebut adalah pendaftaran melalui menu Google Adsense->My Ads->Other Product, dan dengan memasukkan alamat website pada textfield yang disediakan. Cara ini tidak ketika ditolak penulis langsung mengirimkan ulang pengajuan, namun penulis juga memperbaiki dulu tampilan web sebelum diajukan kembali. Awal Mula Penulis telah mencoba program afiliasi Adsense semenjak tahun 2014. Saat itu penulis membuat blog, dengan content tulisan yang terkait dengan penelitian penulis. Namun karena kesibukan pekerjaan penulis saat itu, hasilnya penulis hanya dapat menelorkan beberapa tulisan saja. Dan dengan topik ...
Baca selengkapnya

Keuntungan menjadi Pengguna Berbayar Aplikasi Android

Oleh -
Gambar
Salah satu karakteristik pengguna aplikasi dan game Computational Lab adalah mereka lebih suka yang gratis, meskipun melihat iklan dan sedikit sekali yang berkeinginan menjadi pengguna berbayar (paid user), meski harga beli yang sebenarnya murah. Kebanyakan di aplikasi dan game Computational Lab, penulis distribusikan secara gratis, tetapi menampilkan iklan. Dan jika ada pengguna yang ingin tidak melihat iklan, dapat menekan menu Buy untuk membelinya. Harganya bermacam-macam, ada yang cuma 3000, 5000, dan di atas 50 ribu rupiah untuk aplikasi yang penulis anggap unik. Memang, jika dilihat dari segi nominal, pendapatan dari iklan justru lebih besar dibanding dari pengguna yang memilih menjadi paid user. Padahal jika dipikir ulang, menurut penulis bisa jadi pengguna gratis justru lebih merugi. Merugi yang dimaksud disini adalah adanya kuota internet yang digunakan untuk mendownload iklan secara tidak sadar. Berdasarkan pengamatan penulis, cara kerja iklan...
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