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

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Oleh -
Gambar
Dimisalkan terdapat data yang tersimpan di Google Sheets dan tidak terdapat pembeda antara satu dengan yang lain. Hal ini akan mengakibatkan kesulitan jika akan dilakukan penghapusan salah satu atau bebarapa data tertentu melalui web apps. Oleh karena itu, kode Apps Script di bawah ini, adalah kode untuk menambahkan "unique ID key" pada tiap data, terutama untuk mempermudah proses penghapusan data, yang biasanya dilakukan melalui web apps oleh pengguna yang berbeda. Kode 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 addRandomKey() { var target = SpreadsheetApp.openById("--ID Google Sheets file--"); var ss=target.getSheetByName("Data"); var d...
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

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Oleh -
Gambar
Menentukan arah kiblat sholat bagi kaum muslim dapat dilakukan dengan menggunakan bantuan Google Maps, syaratnya adalah gadget smartphone yang digunakan harus memiliki sensor kompas dan GPS. Sedangkan untuk Sensor GPS biasanya sudah menjadi fitur wajib yang dimiliki oleh setiap smartphone, namun untuk sensor kompas tidak semua smartphone dilengkapi dengan sensor tersebut. Sehingga metode penentuan arah kiblat pada artikel ini hanya dapat dicoba dengan smartphone yang memiliki sensor-sensor di atas. Kemudian dari segi OS (Operating System), smartphone yang diperlukan adalah yang asalkan dapat menjalankan Google Maps.  Saat ini Google Maps dapat dijalankan pada berbagai OS smartphone termasuk di laptop atau notebook. Sehingga tutorial ini dapat dicoba juga di gadget laptop yang dilengkapi dengan kedua sensor di atas. Konsep dasar menentukan arah kiblat, adalah mencari arah posisi Kabah terhadap posisi gadget. Langkah pertama adalah menentukan posisi gadget di Google Maps. Ji...
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

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

Eliminasi Gauss-Jordan untuk Invers Matrix dengan C++

Oleh -
Gambar
Setelah mencoba menyelesaikan dengan Java dan Javascript , penulis juga mencoba mengimplementasi algoritma eliminasi Gauss-Jordan untuk mencari solusi invers matrix dengan bahasa C++. Langkah pembuatannya adalah sebagaimana video di bawah ini: Penulis menggunakan compiler C++ online yang beralamat di http://cpp.sh . Dimana kekurangan dibanding dengan bahasa Java, karena tidak ada fungsi menghitung jumlah array atau dimensi matrix, sehingga program tidak bisa fleksibel. Yaitu diperlukan peubahan secara manual, mulai dari jumlah matrix dan nilai matrixnya itu sendiri. Sedangkan jika di Java, hanya perlu mengganti matrixnya saja. Berikut ini kode C++ implementasi eliminasi Gauss-Jordan untuk menghitung invers matrix. // Example program #include <iostream> #include <string> int N=3; double A[3][3]={ {0,-3,-2}, {1,-4,-2}, {-3,4,1} }; double Ainvers[3][3]; using namespace std; int cekDiagonal( int a); int main() { for ( int i=0;i<N;i++){ f...
Baca selengkapnya

Algorithma Julianday dengan Java

Oleh -
Teringat dengan tahun 2020 adalah termasuk tahun kabisat, penulis mencoba membuka-buka kembali library Java untuk menghitung Julianday yang pernah penulis buat sebelumnya. Library tersebut adalah kode utama untuk membangun beberapa aplikasi penulis, antara lain Julianday Converter , Predicted Date , dan  Date Calculator  di Play Store. Berikut ini adalah kode library Julianday yang penulis maksud di atas: import java.util.Calendar; /* version 2 * Last Update 25 Mei 2015 * * This Lib was made by Smart Calc Community for Smart Calc Lib of * Departement of Physics, Faculty of Mathematics and Natural Sciences, * University Brawijaya, Malang * * Referensi: * Anugraha, Rinto. 2012. Mekanika Benda Langit. Jurusan Fisika Fakultas MIPA Universitas Gajah Mada. * * Contact person: * uboiz@yahoo.com */ public class JulianDate { private int day = 0, month = 0, year = 0,hours=0,minute=0; private double jd = 0; private double...
Baca selengkapnya

Menampilkan Undetermined Circle Progressbar di Java

Oleh -
Gambar
Terkadang, dalam menjalankan perintah yang tidak dapat ditentukan nilai progress presentasenya, dibutuhkan untuk menampilkan progressbar yang berupa circle yang berputar secara terus menerus. Hal ini seperti memanggil sebuah halaman website, dimana website tersebut tidak dapat dihitung berapa ukuran sebenarnya. Sehingga tidak dapat membandingkan atau menghitung seberapa persen halaman yang sudah terdownload, dibanding yang belum. Kode berikut adalah kode class ProgressCircleUI yang telah penulis modifikasi, untuk menampilkan progressbar circle yang berputar secara terus-menerus. package circleloopprogressbar; import java.awt.BasicStroke; import java.awt.Dimension; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Insets; import java.awt.RenderingHints; import javax.swing.JComponent; import javax.swing.plaf.basic.BasicProgressBarUI; /** * * @author Edugameapp */ public class ProgressCircleUI extends BasicProgressBar...
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