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

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

Seberapa Hebatkah Orang Dalam

Oleh -
Gambar
Ilustrasi Orang Dalam (Sumber gambar: Pixabay/mhouge) Dalam urusan pemberkasan sertifikat tanah atau semacamnya, seringkali kita menemui orang yang berani bilang "Dengan bantuan orang dalam, maka segala urusan apapun akan menjadi mudah dan murah". Biasanya, orang yang berani bilang seperti itu adalah mereka yang bekerja sebagai makelar atau calo. Kemudian bagi penulis sendiri, semenjak merasa ditipu oleh seorang 'makelar' pengurusan sertifikat tanah sebelum tulisan ini ditulis, penulis menjadi sulit mempercayai kata-kata orang yang menyebutkan orang dalam tersebut. Sehingga, jika terdapat irang yang bilang semacan itu, penulis hanya balik menantang "Coba jaman sekarang, dia berani kagak!". Alasannya, pertama, peraturan semakin ketat, seperti yang penulis posting sebelumnya, notaris pun saat tulisan ini ditulis, tidak berani untuk melakukan jalan pintas. Misalnya untuk masalah perwalian pembelian tanah waris, 3 dari 4 notaris yang penulis temu...
Baca selengkapnya

Algorithma Tic Tac Toe dengan HTML5 Canvas

Oleh -
Gambar
Penasaran membuat game Tic Tac Toe, terutama tentang menambahkan kecerdasan buatan (Artificial Intelligence) untuk melawan pemain, penulis mencoba menuliskan algorithma dan memvisualisasikannya dengan HTML5 Canvas. Kode program game Tic Tac Toe dibawah ini disertai dengan interaksi mouse dan touch untuk mempermudah penggunaan. Sedangkan ide kecerdasan buatannya, komputer mencari dulu posisi terbaik untuk dirinya agar menang, baru jika tidak terpenuhi, komputer mencari posisi yang paling tepat untuk bertahan. <html> <head> <title>Tic Tac Toe</title> </head> <body> <div id= "score" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <div id= "hasil" style= "font-size:42px;color:#009688;width:500px;text-align:center;" ></div> <canvas id= "myCanvas" width= "500" height= "500" > </canvas><br/> ...
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

Sedikit Pandangan tentang Pelatihan Bersertifikasi

Oleh -
Sebuah percakapan menarik dengan salah satu pengguna Facebook. Beliau menilai bahwa aplikasi Edugameapp buatan penulis sebenarnya layak digunakan sebagai pendamping bahan ajar guru di sekolah. Dan kalau bisa, dibuat semacam pelatihan yang bersertifikasi. "Misal ada minat ke arah pendidikan mah, bisa buat bahan alat peraga pendamping pembelajaran online, khususnya SMK". Artinya menurut beliau, perlu diberikannya bukti cetak hitam di atas putih (sertifikat), agar aplikasi-aplikasi penulis lebih dicari oleh masyarakat. Seperti oleh sekolah-sekolah yang memiliki jurusan yang berkaitan dengan presisi alat ukur atau analis kimia. Bagus nya sih tanpa iklan, Alternatif income nya lewat pelatihan & sertifikasi, Lbh ke persiapan dunia kerja, Atau uji kompetensi keahlian Ada tiga hal yang penulis ingin ulas di sini: Pertama , untuk menjadikannya semacam pelatihan, penulis perlu membangun aplikasi-aplikasi Edugameapp penulis menjadi sebuah sistem database. Misalnya, ketika pengguna t...
Baca selengkapnya

Membuktikan Hasil Pendekatan Limit Menggunakan Algebra Equation Calculator

Oleh -
Gambar
  Salah satu permasalahan dalam matematika yang sering diberikan kepada siswa sekolah tingkat menengah adalah permasalahan tentang limit. Secara konsep menyebutkan bahwa nilai dari suatu fungsi atau deret, dapat didekati melalui nilai input tertentu. Dimana kegunaannya adalah untuk mencari nilai yang hasil perhitungannya menghasilkan nilai tak tehingga, atau menghitung hasil dengan nilai input tak terhingga. Konsep ini sangat mudah dipahami, namun dalam implementasinya, terutama di lembar test ujian sangatlah berbeda. Entah karena memang sulit, atau dibuat sulit karena lebih mementingkan ego sang pembuat soal. Sampai-sampai di bimbingan belajar siswa diajari cara menghitung cepat limit, dengan trik yang menurut penulis semakin melencengkan pemahaman siswa. Algebra Equation Calculator adalah aplikasi Android buatan penulis, yang di distribusikan dibawah nama Computational Lab di Play Store. Aplikasi ini sengaja penulis buat langsung menampilkan hasil, ...
Baca selengkapnya

Menggambar Lingkaran Menyala dengan Efek Shadow

Oleh -
Gambar
Fungsi bayangan ternyata merupakan salah satu hal penting dalam proses menggambar, terutama untuk menambahkan kesan elegan. Gambar di atas, adalah contoh pemanfaatan efek bayangan di HTML5 Canvas, untuk menggambar lingkaran yang seakan menyala. Dengan warna bayangan sama dengan warna lingkaran, akan dapat dihasilkan bentuk lingkaran yang futuristik. Kode di bawah ini adalah kode untuk menggambar lingkaran di atas: <html> <head> <title>Draw Circle 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); function Menggambar() { ctx.fillStyle= "#50575C" ; var rx=0.5*canvas.width; var ry=0.5*canvas.height; var r=...
Baca selengkapnya

Polygon Cloud Generator dengan HTML5 Canvas

Oleh -
Gambar
Masih penasaran dengan algorithma pembuatan cloud (awan) sebelumnya, penulis mencoba untuk membuat efek cloud menggunakan polygon. Ternyata hasilnya lebih bagus, dengan kualitas kecerahan yang lebih tinggi. Sama dengan kode cloud generator pada posting sebelumnya, bedanya kali ini penulis menggunakan fungsi draw polygon dan dengan menggunakan globalAlpha=0.1. Berikut ini adalah kode HTML5 Canvas implementasi algorithma 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 num=0; var ctx = canvas.getContext( "2d" ); ctx.fillStyle = "#2196f3" ; ctx.fillRect(0,0,canvas.width,canvas.height); warna=[ "white" ]; ctx.globalAlpha = 0.1; function Menggambar() { ctx.beginPath();...
Baca selengkapnya

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Oleh -
Gambar
  I. Pendahuluan Sebagai tenaga administrasi di perguruan tinggi, pengelolaan jadwal semester yang efektif adalah kunci untuk memastikan bahwa proses akademik berjalan lancar dan efisien. Dengan banyaknya mata kuliah, dosen, mahasiswa dan ruang yang harus diatur, yang berpatokan pada pohon kurikulum, akan membutuhkan ketelitian yang tinggi dalam mengatur jadwal, agar masing-masing variabel tidak saling tumpang tindih. Dengan menggunakan tool yang tepat, pengelolaan jadwal akan lebih efisien dan dapat meningkatkan produktivitas bagi semua Sumber Daya Manusia (SDM) yang terlibat. Oleh karena itu, dalam tulisan ini penulis menawarkan jasa penjadwalan semester perguruan tinggi menggunakan Google Sheet, sebuah tool yang mudah digunakan dan dapat diakses dari mana saja. Dengan menggunakan jasa penjadwalan ini, penulis berharap perencanaan jadwal perguruan tinggi dapat dilakukan lebih cepat dan efektif. II. Kelebihan Berikut ini kelebihan penggunaan Google Sheet sebagai aplikasi penjadwal...
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