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

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

Jalan-jalan ke Taman Nasional Baluran

Oleh -
Gambar
Berikut ini adalah pengalaman penulis bersepeda motor ke Taman Nasional Baluran. Yang berada di Jalan Raya Situbondo Banyuwangi km 35, Banyuputih, Situbondo, Jawa Timur. Pada tanggal 17 Februari 2018. Profile Taman Taman Baluran merupakan salah satu dari lima taman tertua Indonesia yang memiliki luas sekitar 25.000 hektar. Taman ini memiliki berbagai macam flora dan fauna. Dengan 444 spesies flora, termasuk 265 macam tanaman obat.  Untuk fauna, Taman baluran memiliki 2 macam primata yaitu long tail macaca dan black monkey, 233 spesies burung, kerbau, banteng, rusa, terumbu karang, ikan dan lain sebagainya. Sedangkan untuk object wisata sendiri, Taman Baluran memiliki Gua Jepang, padang Savanna Bekol, dan pantai Bama. Selain sebagai tempat rekreasi, taman ini cocok juga digunakan sebagai tempat untuk penelitian kalangan akademisi seperti mahasiswa, dosen, atau pihak peneliti lainnya. Dan dapat juga digunakan sebagai tempat pengambilan foto pre-wedding, s...
Baca selengkapnya

Kumpulan Source Code Greenfoot

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

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

Pengalaman Full Approved Google Adsense

Oleh -
Gambar
Setelah hampir 2 tahun lebih, akhirnya pada tanggal 2 November 2017, datang email dari Google Adsense yang menyatakan bahwa website penulis telah diterima secara penuh (full approved) seperti gambar dibawah ini: Email tersebut datang, setelah berulang kali penulis melalukan pendaftaran website dan juga melalui blog. Bagi pembaca yang belum mengetahui cara pendaftaran website tersebut adalah pendaftaran melalui menu Google Adsense->My Ads->Other Product, dan dengan memasukkan alamat website pada textfield yang disediakan. Cara ini tidak ketika ditolak penulis langsung mengirimkan ulang pengajuan, namun penulis juga memperbaiki dulu tampilan web sebelum diajukan kembali. Awal Mula Penulis telah mencoba program afiliasi Adsense semenjak tahun 2014. Saat itu penulis membuat blog, dengan content tulisan yang terkait dengan penelitian penulis. Namun karena kesibukan pekerjaan penulis saat itu, hasilnya penulis hanya dapat menelorkan beberapa tulisan saja. Dan dengan topik ...
Baca selengkapnya

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

Menambahkan Konfirmasi Email di Google Form

Oleh -
Gambar
Suatu hari penulis membantu dosen penulis menyiapkan form registrasi Pengabdian Kepada Masyarakat (PKM). Dan ternyata kebutuhannya adalah ketika seorang pendaftar melakukan registrasi dengan input data, dibutuhkan konfirmasi email yang terkirim secara otomatis. Setelah berselancar di internet, penulis menemukan salah satu caranya adalah dengan menggunakan Google Sheets dan Script. Caranya penulis tunjukkan dalam video di bawah ini: Sedangkan Google Script yang penulis gunakan dalam video di atas, dapat di download dilink di bawah ini: https://drive.google.com/file/d/1elg78BQFaKlhq9e0UuGmHhY0NS3BtfEp/view?usp=sharing Referensi: aniav. 2015. send_email.gs. https://gist.github.com/aniav/926f4667911ba1d138b8. Diakses tanggal 17 Juni 2020.
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

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

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