Deteksi Mouse dan Touch di HTML5 Canvas

Oleh -

Setelah membuat animasi lingkaran futuristik pada posting sebelumnya, penulis penasaran menggunakan lingkaran tersebut untuk deteksi mouse dan touch HTML5 Canvas pada versi mobile.

Hasil testing dengan menjalankan di browser Chrome di salah satu device Android Samsung sebagaimana terlihat pada gambar di atas.

Tiap lingkaran menunjukkan posisi jari yang berbeda, sesuai jumlah sentuhan yang mampu di deteksi oleh device smartphone masing-masing.

Caranya adalah dengan menambahkan event listener mouse dan touch pada element Canvas, dengan metode penggambaran memanfaatkan fungsi translate dan rotate untuk transformasi tiap lingkarannya.

Kelemahannya, penomoran sentuhan direset tiap kali jumlah sentuhan berubah, yang mengakibatkan perubahan pengurutan penomoran sentuhan.

Kode HTML5 Canvasnya adalah seperti ditunjukkan pada kode di bawah ini:

<html> 
<head> 
<title>Mouse and Touch Event</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<div id="catatan"></div> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
var mousePosition=[],lastPosition=[]; 
 
canvas.addEventListener("mousedown", function (e) { 
 getMousePos(0,canvas, e); 
}, false); 
 
canvas.addEventListener("mouseup", function (e) { 
 mousePosition=[]; 
}, false); 
 
canvas.addEventListener("mousemove", function (e) { 
 if(mousePosition.length>0)getMousePos(0,canvas, e); 
}, false); 
 
function getMousePos(id,canvasDom, mouseEvent) 
{ 
 var rect = canvasDom.getBoundingClientRect(); 
 mousePosition[2*id+0]=mouseEvent.clientX - rect.left; 
 mousePosition[2*id+1]=mouseEvent.clientY - rect.top; 
} 
 
canvas.addEventListener("touchstart", function (e) { 
 mousePosition=[]; 
 for(i=0;i<e.touches.length;i++)getMousePos(i,canvas,e.touches[i]); 
}, false); 
 
canvas.addEventListener("touchend", function (e) { 
 mousePosition=[]; 
 if(e.touches.length>0){ 
  for(i=0;i<e.touches.length;i++)getMousePos(i,canvas,e.touches[i]); 
 } 
}, false); 
 
canvas.addEventListener("touchmove", function (e) { 
 mousePosition=[]; 
 if(e.touches.length>0){ 
  for(i=0;i<e.touches.length;i++)getMousePos(i,canvas,e.touches[i]); 
 } 
}, false); 
 
var warna=["red","green","blue","white"]; 
var properti=[],mactive=[];//putaran,targetputaran 
 
function Menggambar() 
{ 
    ctx.globalAlpha=1.0; 
 ctx.fillStyle = "black"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 

 ctx.globalAlpha=0.8; 
 var num=Math.floor(mousePosition.length/2); 
 var b=4,numlingkaran=3; 
 var selangdata=b*numlingkaran; 
 for(i=0;i<num;i++){ 
  mactive[i]=3; 
  lastPosition[2*i+0]=mousePosition[2*i+0]; 
  lastPosition[2*i+1]=mousePosition[2*i+1]; 
 } 
 num=Math.floor(lastPosition.length/2); 

 for(i=0;i<num;i++){ 
  var a=i%warna.length; 

  var del=2; 

  var n=Math.floor(properti.length/selangdata); 
  var index=selangdata*i; 
  if(i<n){ 
   var j=0; 
   while(j<selangdata/2){ 
    if(properti[index+2*j+0]<properti[index+2*j+1]){ 
     properti[index+2*j+0]+=del; 
     if(properti[index+2*j+0]>properti[index+2*j+1])properti[index+2*j+0]=properti[index+2*j+1]; 
    }else if(properti[index+2*j+0]>properti[index+2*j+1]){ 
     properti[index+2*j+0]-=del; 
     if(properti[index+2*j+0]<properti[index+2*j+1])properti[index+2*j+0]=properti[index+2*j+1]; 
    } 

    if(properti[index+2*j+0]==properti[index+2*j+1])properti[index+2*j+1]=(mactive[i]>0)?Math.floor(properti[index+2*j+0]-90+180*Math.random()):0; 

    if(properti[index+2*j+1]<0)properti[index+2*j+1]=0; 
    if(properti[index+2*j+1]>360)properti[index+2*j+1]=360; 

    j++; 
   } 
  }else{ 
   var j=0; 
   while(j<selangdata/2){ 
    properti[index+2*j+0]=0; 
    properti[index+2*j+1]=Math.floor(properti[index+2*j+0]-90+270*Math.random()); 

    if(properti[index+2*j+1]<0)properti[index+2*j+1]=0; 
    if(properti[index+2*j+1]>360)properti[index+2*j+1]=360; 

    j++; 
   } 
  } 

  ctx.strokeStyle = warna[a]; 

  var index=selangdata*i; 
  for(m=0;m<numlingkaran;m++){ 
   ctx.save(); 
   ctx.translate(lastPosition[2*i+0],lastPosition[2*i+1]); 
   ctx.rotate(properti[index+b*m+0]*Math.PI/180); 

   ctx.beginPath(); 
   if(m%numlingkaran==0){ 
    ctx.lineWidth=300; 
    ctx.arc(0,0,150,0,properti[index+b*m+2]*Math.PI/180); 
   }else if(m%numlingkaran==1){ 
    ctx.lineWidth=150; 
    ctx.arc(0,0,200,0,properti[index+b*m+2]*Math.PI/180); 
   }else{ 
    ctx.lineWidth=100; 
    ctx.arc(0,0,150,0,properti[index+b*m+2]*Math.PI/180); 
   } 
   ctx.stroke(); 
   ctx.closePath(); 
   ctx.restore(); 
  } 
  if(mactive[i]>0)mactive[i]--; 
 } 

 window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>

Komentar

Posting Komentar



Postingan populer dari blog ini

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

Oleh -
  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

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

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

Kebodohan Karyawan Menyalahkan Sistem

Oleh -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi ...
Baca selengkapnya

Ketika Pengelola Basis Data Terabaikan

Oleh -
Dalam dunia administrasi, terdapat lapisan yang sering kali tidak terlihat, yaitu pengelolaan basis data. Penulis, sebagai pengelola basis data tempat dimana penulis bekerja sebagai outsourcing, adalah salah satu dari yang tidak terlihat tersebut. Pekerjaan penulis mungkin tidak se-glamor pekerjaan administrasi yang berhadapan langsung dengan mahasiswa, tetapi penulis yakin peran penulis sangat krusial dalam memastikan kelancaran operasional institusi. Di usia yang telah matang, dan mulai membusuk, penulis hanya menginginkan lingkungan kerja yang kondusif, di mana kontribusi penulis dihargai. Namun, kenyataannya, penulis merasa bahwa upaya penulis dalam membangun dan memelihara sistem basis data yang efisien, yang meringankan beban administrasi rekan kerja dan mempermudah mahasiswa, justru malah mendapatkan apresiasi yang tidak layak. Acara-acara kebersamaan, seperti makan-makan yang seharusnya menjadi momen untuk mempererat hubungan antar rekan kerja, justru menjadi ajang pengucilan p...
Baca selengkapnya

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Oleh -
Seringkali untuk urusan data, kita diminta untuk mengecek apakah data sudah dimasukkan atau belum. Biasanya keperluan ini untuk mengecek data terbaru. Misalnya mengecek apakah email siswa sudah masuk daftar atau belum Salah satu caranya adalah menggunakan Query formula berikut ini: =IFNA(QUERY(B2:B,"SELECT B WHERE B IS NOT NULL AND B<>'"&JOIN("' AND B<>'",QUERY(D2:D,"",0))&"'",0)) Di mana B dan D adalah kolom sheet yang implementasinya dapat dilihat pada video dibawah ini: Sedangkan jika diperlukan highlight data untuk menandai data mana saja yang belum masuk dapat menggunakan Conditional Formatting Google Sheet sebagaimana video dibawah ini:
Baca selengkapnya

Apps Script untuk Cetak Sertifikat

Oleh -
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

Kumpulan Source Code Greenfoot

Oleh -
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D ...
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

Oleh -
Salah satu cara untuk menyembunyikan gambar yang tidak dapat di load pada suatu halaman Blogger adalah menggunakan fungsi remove element Javascript. Namun cara ini tidak penulis jamin dapat berjalan disemua browser. Setidaknya, dapat mempercantik tampilan posting yang hanya menggunakan gambar thumbnail dari Youtube. Dibawah ini adalah kode Javascript dan bagaimana menambahkan di Blogger. Kode <script> var imgs=document.getElementsByTagName("img"); for(var i=0,j=imgs.length;i<j;i++){ imgs[i].onerror = function(e){ this.parentNode.removeChild(this); } } </script> Demo
Baca selengkapnya

Game TicTacToe dengan Greenfoot

Oleh -
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