Dot Connection Abstrak dengan HTML5 Canvas

Oleh -

Percampuran warna biru menyala dan background warna abu-abu, ternyata dapat menambahkan kesan elegan seperti gambar di atas.

Secara konsep, algoritma gambar di atas adalah menggambar antara dua titik yang tekoneksi, dengan ketika mendeteksi bagian yang sudah terisi, maka penggambaran titik dihentikan.

Metode yang digunakan adalah dengan menambahkan grid.

Grid ini diimplementasikan secara semu sebagai marker, dan tersebar seolah-olah menjadi lapisan 2D (dua dimensi) tersendiri.

Grid ditandai dengan nilai 0 jika belum terisi (ditmpati oleh dot atau dilewati garis), dan akan ditandai dengan angka 1 jika sudah terisi.

Sedangkan untuk proses penggambarannya dibagi menjadi tiga kondisi, yaitu deteksi dot awal secara acak sebagai pembuka, penggambaran garis, dan penggambaran dot penutup.

Jika grid yang akan diisi atau dilewati sudah terisi, maka garis dan dot tidak digambarkan, dan perulangan akan dilanjutkan ke perulangan selanjutnya, tetapi tetap sebagai kondisi pertama, sampai 100 kali perulangan terpenuhi.

Kode berikut ini adalah kode HTML5 Canvas untuk menggambarkan pola acak di atas:

<html> 
<head> 
<title>Polygon Cloud Generator</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
ctx.fillStyle="#50575C"; 
var rx=0.5*canvas.width; 
var ry=0.5*canvas.height; 
var r=Math.sqrt(rx*rx+ry*ry); 
 
var x=0,y=0,n=0; 
while(y<canvas.height){ 
 var a=(n%2==1)?5:0; 
 x-=a; 
 while(x<canvas.width){ 
  var d=10; 
  rx=x-0.5*canvas.width; 
  ry=y-0.5*canvas.height; 
  var ro=Math.sqrt(rx*rx+ry*ry); 
  ctx.beginPath(); 
  ctx.fillRect(x,y,d,3); 
  ctx.closePath(); 
  x+=d+1; 
 } 
 x=0; 
 y+=5; 
 n++; 
} 
 
var kondisi=0,ax=0,ay=0,num=0; 
 
var dp=15; 
var p=Math.round(canvas.width/dp); 
var l=Math.round(canvas.height/dp); 
var grids=[]; 
for(i=0;i<p*l;i++)grids[i]=0; 
var pox=0,poy=0,targetx=0,targety=0,rotasi=0; 
 
function Menggambar() 
{ 
 var passed=true; 

 ctx.fillStyle="#03BBFF"; 
 ctx.strokeStyle="#03BBFF"; 
 ctx.lineWidth =4; 
 if(kondisi==0){ 
  ax=Math.random()*canvas.width; 
  ay=Math.random()*canvas.height; 
  rotasi=0;//-180+360*Math.random(); 
  var px=Math.floor(ax/dp); 
  var py=Math.floor(ay/dp); 
  var testx=px+dp*Math.cos(rotasi*Math.PI/180); 
  var testy=py+dp*Math.sin(rotasi*Math.PI/180); 
  var tx=Math.floor(testx/dp); 
  var ty=Math.floor(testy/dp); 
  if(grids[px+p*py]!=1 && grids[px+p*py+1]!=1 && grids[px+p*py+p]!=1 && grids[px+p*py+p+1]!=1 && grids[tx+p*ty]!=1 && grids[tx+p*ty+1]!=1 && grids[tx+p*ty+p]!=1 && grids[tx+p*ty+p+1]!=1){ 
   ax=(px+0.5)*dp;ay=(py+0.5)*dp; 
   pox=(px+0.5)*dp;poy=(py+0.5)*dp; 
   targetx=(px+0.5)*dp;targety=(py+0.5)*dp; 
   grids[px+p*py]=1; 

   kondisi++; 

   ctx.beginPath(); 
   ctx.arc(ax,ay,6, 0, 2 * Math.PI); 
   ctx.fill(); 
   ctx.closePath(); 
   ctx.beginPath(); 
   ctx.moveTo(pox,poy); 
  } 
 } 

 if(kondisi==1){ 
  var px=Math.floor(ax/dp); 
  var py=Math.floor(ay/dp); 
  var tx=Math.floor(targetx/dp); 
  var ty=Math.floor(targety/dp); 
  if(tx==px && ty==py){ 
   var r=200;//+500*Math.random(); 
   rotasi+=-30+60*Math.random(); 
   targetx+=r*Math.cos(rotasi*Math.PI/180); 
   targety+=r*Math.sin(rotasi*Math.PI/180); 
   targetx=(Math.floor(targetx/dp)+0.5)*dp; 
   targety=(Math.floor(targety/dp)+0.5)*dp; 
  } 

  var testx=ax+dp*Math.cos(rotasi*Math.PI/180); 
  var testy=ay+dp*Math.sin(rotasi*Math.PI/180); 
  tx=Math.floor(testx/dp); 
  ty=Math.floor(testy/dp); 
  if(px!=tx || py!=ty){ 
   if(grids[tx+p*ty]==1)kondisi=2; 
  } 

  if(ax<-dp || ay<-dp || ax>canvas.width+dp || ay>canvas.height+dp)kondisi=2; 

  if(ax<targetx)ax++; 
  if(ax>targetx)ax--; 
  if(ay<targety)ay++; 
  if(ay>targety)ay--; 

  ctx.lineTo(ax,ay); 
  ctx.stroke(); 
  pox=ax;poy=ay; 
  grids[px+p*py]=1; 
 } 

 if(kondisi==2){ 
  ctx.lineTo(ax,ay); 
  ctx.closePath(); 

  var px=Math.floor(ax/dp); 
  var py=Math.floor(ay/dp); 
  ctx.beginPath(); 
  ctx.arc(ax,ay,6, 0, 2 * Math.PI); 
  ctx.fill(); 
  ctx.closePath(); 

  grids[px+p*py]=1; 

  kondisi=0; 
  num++; 
 } 

 if(num<100)window.requestAnimationFrame(Menggambar); 
 else alert("Done"); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>

Komentar

Posting Komentar



Postingan populer dari blog ini

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

Honeycomb Style Wallpaper dengan HTML5 Canvas

Oleh -
Gambar
Bentuk hexagon merupakan bentuk yang menarik dan identik dengan bentuk sarang lebah madu (Honeycomb). Gambar di atas adalah gambar hasil generate bentuk hexagon, yang disusun sesuai urutan, dengan lebar dan jarak tertentu, menggunakan HTML5 Canvas. Dengan menambahkan efek warna gradient hijau pada background dan shadow pada masing-masing bentuk hexagonnya, dapat menambahkan efek futuristik dan elegan sebagai wallpaper dekstop, smartphone, tablet atau semacamnya. Berikut kode HTML5 Canvasnya: <html> <head> <title>Honeycomb Shape</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var ctx = canvas.getContext( "2d" ); var grd = ctx.createRadialGradient(0.5*canvas.width,0.5*canvas.height,0,0.5*canvas.width,0.5*canvas.height,360); grd.addColorStop(0...
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

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

Afiliasi Shopee Tanpa Wajah dan Tanpa Beli Sampel Bermodal AI

Oleh -
Gambar
Setelah sekian lama berusaha menulis buku, akhirnya penulis berhasil memebuat sebuah buku yang, menurut penulis, memang layak untuk dibagikan ke publik. Buku tersebut berjudul " Rp 1.397 dari Shopee Video dengan Artificial Intelligence (AI) ", yang tidak lain adalah story book penulis dalam mencoba berafiliasi memanfaatkan video AI. Saat tulisan ini ditulis, penulis memberikan harga Rp. 7 ribu saja. Karena memang masih terdiri dari 20 halaman. Di mana planning penulis, buku ini akan penulis lengkapi seiring berjalannya waktu, dan semoga penulis bisa mendaftarkan ISBN, jika jumlahnya sudah mencapai 100 halaman. Penulis akan memberikan akses ke file asli, sehingga pembeli tidak perlu mengeluarkan uang lagi dikemudian hari jika buku ini di update. Mungkin akan timbul pertanyaan, kenapa penulis memilih menjadi afiliator yang sebelumnya adalah pemain Adsense? Intinya sederhana, penulis terpaksa harus mencari 'Adsense' baru, sebab status penulis yang sebagai tenaga  'ou...
Baca selengkapnya

Apps Script untuk Membuat Banyak Folder di Google Drive

Oleh -
Melanjutkan pekerjaan sebelumnya, ternyata diperlukan pembuatan folder berdasarkan inisial karyawan, pada Spreadsheet daftar karyawan yang digunakan pada posting yang berjudul "Duplikasi File Template Kuisioner dengan Apps Script" . Tujuannya, dengan memberikan akses tiap folder berdasarkan akun masing-masing karyawan, maka dengan membuat file di dalam folder tersebut saja, file yang membutuhkan akses, akan dapat langsung digunakan oleh karyawan yang bersangkutan. Berikut ini adalah kode untuk membuat folder berdasarkan inisial karyawan: function makeFolderbyList() { var ss = SpreadsheetApp.openById("--idsheetkaryawan--");//sheet target untuk var so=ss.getSheetByName("Karyawan"); var data=so.getRange("A2:T").getValues().map(function(row,index){ var pass=false; if(row[0]!="" && row[19]=="Active"){ pass=true; row.push(index); } return pass?row:null}).filter(function(cellData){return cel...
Baca selengkapnya

Robot Forex Martingale Gratis

Oleh -
Gambar
Martingale Gratis adalah robot forex, atau yang disebut juga Expert Advisor, yang penulis buat dan penulis distribusikan secara gratis. Berikut ini adalah screenshot hasil trading EA yang penulis jalankan selama hampir 2 bulan, dengan menggunakan account real free deposite $1000 di Instaforex dengan profit 10%. Jujur saja, penulis sengaja distribusikan secara gratis, karena memang tidak laku dijual di MQL5 Market dengan nama Harrow Order . Tidak laku ini dimungkin beberapa sebab yang penulis jelaskan lebih detail di bawah. Hal utama penyebabnya adalah karena metode trading yang digunakan oleh robot ini adalah menggunakan metode Martingale, yang merupakan metode dengan resiko tinggi. Dimana secara garis besar, cara kerjanya adalah mengambil order beli atau jual sesuai posisi harga terbaik yang terdeteksi, mengambil untung di titik balik perubahan harga, dan menggunakan metode martingale untuk merecovery kesalahan order yang dia pasang sebelumnya. Recovery yang dimaksud ...
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

Perbedaan Sudut Pandang Dosen dan Karyawannya

Oleh -
Sebuah perdebatan dingin dari sisi Dosen senior dan karyawan di suatu instansi pendidikan, di mana penulis pernah bekerja di dalamnya, menggelitik penulis untuk membaginya dalam blog ini. Bukan untuk meminta pembenaran, hanya saja penulis ingin berbagi sudut pandang, yang siapa tahu berefek positif bagi pembaca. Mulanya seorang karyawan senior, mengatakan jika ada yang dari pihak Dosen yang memberi penilaian jelek terhadap pekerjaan penulis sebagai karyawan, "Jangan dianggap, sebab yang membayar kita itu Fakultas. Bukan Dosen itu". Tentu, perkataan tersebut berpengaruh dan menjadikan penulis berprinsip, "Yang penting pekerjaanku selesai". Setelah beberapa lama bekerja, tiba-tiba seorang Dosen senior berbincang dengan penulis dan berkata, "Salah satu daya tarik Fakultas adalah SDM Dosen-dosen pengajarnya, sehingga mahasiswa bersedia belajar dan menjadi mahasiswa, adalah karena adanya Dosen-dosen, dan tugas karyawan adalah membantu Dosen-dosen tersebut". Dim...
Baca selengkapnya

Membuat Kalkulator Interpolasi Bilinear dengan Javascript

Oleh -
Gambar
Dalam perhitungan numerik yang seringkali penulis lakukan, untuk keperluan interpolasi, penulis banyak kali menggunakan metode Interpolasi Biliner. Selain karena mudah dalam penggunaannya, untuk keperluan presisi, dapat dengan mengorientasikan ukuran panjang sisi grid yang kecil. Persamaan matematis Interpolasi Bilinear yang penulis implementasikan adalah sebagai berikut: Sedangkan dalam kode Javascript, untuk mempermudah perhitungan, penulis menggunakan dua kali langkah, yaitu menghitung arah horizontal dulu sebagai nilai c1 dan c2, baru menghitungnya sebagai nilai B. Langkah-langkah di atas, dapat dilihat pada video Youtube penulis di bawah ini: Sedangkan secara online kalkulator dapat dicoba dengan mengklik button dibawah ini: Demo Untuk kode Javascript dalam halaman HTML-nya adalah sebagai berikut: <html> <head> <title>Bilinear Interpolation Example</title> </head> <body> <h1>Bilinear Interpolation Calculator</h1> Coordinat po...
Baca selengkapnya