Honeycomb Style Wallpaper dengan HTML5 Canvas

Oleh -

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, "#9dfc03"); 
grd.addColorStop(1, "black"); 
 
// Fill with gradient 
ctx.fillStyle = grd; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
var lebarx=50,lebary=40,padding=8; 
var dx=0,dy=0,num=0; 
 
function Menggambar() 
{ 
 var n=10; 
 var m=30; 
 var ax=num%n; 
 var ay=Math.floor(num/m)%m; 
 var bx=0; 
 var by=0; 
 if(ay%2==1){ 
  bx=1.5*lebarx+padding; 
 } 
 dx=-(3*lebarx+2*padding)+bx+ax*(3*lebarx+2*padding); 
 dy=-3*lebary+by+ay*lebary+(ay-1)*0.5*padding; 

 ctx.save(); 

 points[0]=0.5*lebarx; 
 points[1]=0; 

 points[2]=1.5*lebarx; 
 points[3]=0; 

 points[4]=2*lebarx; 
 points[5]=lebary; 

 points[6]=1.5*lebarx; 
 points[7]=2*lebary; 

 points[8]=0.5*lebarx; 
 points[9]=2*lebary; 

 points[10]=0; 
 points[11]=lebary; 

 ctx.translate(dx,dy); 
 ctx.fillStyle="#263238"; 
 ctx.beginPath(); 
 ctx.shadowColor = "black"; 
 ctx.shadowBlur = 5; 
 ctx.shadowOffsetX = 2; 
 ctx.shadowOffsetY = 2; 
 ctx.moveTo(points[0],points[1]); 
 ctx.lineTo(points[2],points[3]); 
 ctx.lineTo(points[4],points[5]); 
 ctx.lineTo(points[6],points[7]); 
 ctx.lineTo(points[8],points[9]); 
 ctx.lineTo(points[10],points[11]); 
 ctx.lineTo(points[0],points[1]); 
 ctx.fill(); 
 ctx.restore(); 

 num++; 
 if(num<700)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 -
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

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

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

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

Domisili, Persyaratan Utama KPR Subsidi

Oleh -
Gambar
  Ilustrasi perumahan untuk KPR (Sumber: Pixabay/terimakasih0)   Bagaimanapun juga, kesesuaian alamat adalah persyaratan utama Kredit Kepemilikan Rumah (KPR) subsidi. Misalnya untuk perumahan di daerah Malang, maka yang bisa mengajukan KPR subsidi, adalah pemohon KPR dengan alamat Malang di KTP-nya. Semula penulis tidak percaya, tetapi setelah penulis mengalami sendiri, ternyata hal tersebut benar. Awalnya, dalam sebuah pameran perumahan, dan mungkin usaha pihak sales, bagaimana mereka mendapatkan nasabah, penulis menyutujui pengambilan KPR rumah subsidi, waktu itu seharga 130jt, dengan uang muka 1 juta. Kata sales, meskipun penulis bekerja freelance, yang tidak berpenghasilan tetap dan beralamat KTP di luar Malang, penulis masih bisa mendapatkan rumah subsidi. Tanpa sepengetahuan penulis, rumah pesanan penulis pun dibangun, dan jadi dalam hitungan 3 bulan. Selama itu pula, penulis mengurus segala persyaratan pemberkasan, dan semuanya, penulis usahakan seasli mungkin....
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

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

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

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