Generate Wallpaper HTML5 Canvas Segitiga Acak

Oleh -

Tertarik dengan warna desain material, penulis mencoba membuat code generator wallpaper segitiga acak.

Hasilnya dapat di lihat sesuai dengan gabar di atas.

Idenya adalah dengan menumpuk segitiga secara bertumpuk, dengan ukuran, warna, posisi dan rotasi yang acak.

Dalam kode ini ditekankan contoh bagaimana menggunakan fungsi translate dan rotate dalam membuat gambar segitiga di HTML5 Canvas, serta contoh bagaimana menambahkan efek shadow tiap segitiganya.

Kode HTML5 Canvasnya adalah sebagaimana berikut:

<html> 
<head> 
<title>Random Triangles</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var points=[],warna=[]; 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#000000"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
var num=0; 
 
warna[0]="#0d47a1"; 
warna[1]="#4a148c"; 
warna[2]="#009688"; 
warna[3]="#ff9800"; 
warna[4]="#9e9e9e"; 
warna[5]="#263238"; 
warna[6]="#d50000"; 
 
function Menggambar() 
{ 
 ctx.save(); 

 var b=0.5*Math.random(); 
 if(b<0.25)b=0.25; 

 var sisi=400; 
 var ax=-0.5*b+(canvas.width+b)*Math.random(); 
 var ay=-0.5*b+(canvas.height+b)*Math.random(); 
 ctx.translate(ax,ay); 
 ctx.rotate(-180+1.0*(180*Math.random())*Math.PI/180); 

 var tengah=0.5*sisi; 
 var tinggi=Math.sqrt(sisi*sisi-tengah*tengah); 

 points[0]=tengah; 
 points[1]=0; 
 points[2]=2*tengah; 
 points[3]=tinggi; 
 points[4]=0; 
 points[5]=tinggi; 

 ctx.fillStyle=warna[Math.floor(warna.length*Math.random())]; 
 ctx.beginPath(); 
 ctx.shadowColor = "black"; 
 ctx.shadowBlur = 20; 
 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[0],points[1]); 
 ctx.fill(); 
 ctx.restore(); 

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

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

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

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

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

Algorithma Bilangan Prima dengan C++

Oleh -
Gambar
Screenshot kompilasi menggunakan codingground (diambil oleh penulis) Melihar traffic yang cukup banyak pada posting penulis terkait algorithma bilangan dengan Javascript dan Pascal , dibawah ini penulis mencoba untuk menuliskannya dalam kode C++. Berikut adalah kode implementasi bilangan prima, dengan menggunakan bahasa pemrograman C++. #include <iostream> using namespace std; bool isPrime( int a) { bool isprime= true ; if (a<0)isprime= false ; for ( int i=2;i<a;i++){ if (a%i==0){ isprime= false ; } } return isprime; } int main() { int angka=100;//batas angka yang mau di cek for ( int i=2;i<=angka;i++){ if (isPrime(i)) { if (i>2)cout<< "," ; cout << i; } } return 0; } Penulis menggunakan kompiler codingground C++ online, yang ada di  tutorialspoint.com .
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

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

Teknik Mendatangkan Traffic yang Salah

Oleh -
Gambar
Ilustrasi pendapatan bohong Adsense Masa isolasi diri wabah COVID-19, di beberapa komunitas online banyak diperbincangkan pekerjaan yang tetap menghasilkan pendapatan, meskipun tidur-tiduran dirumah. Salah satunya berburu Adsense. Dan ada member komunitas yang tidak segan-segan, mereka menunjukkan pendapatan dengan nominal pendapatan per hari sampai jutaan, puluhan juta, bahkan ada yang sampai milyaran. Seperti yang penulis contohkan seperti gambar di atas, yang tidak lain hanyalah gambar editan Photoshop. Sebagai salah satu publisher Adsense, penulis tidak mudah percaya. Pasalnya, pertama, mereka berani pamer, tetapi menyembunyikan identitasnya dengan profile anonim. Pertanyaannya, kenapa harus anonim jika itu memang benar? Apakah karena takut di datangi orang pajak? Meskipun dengan embel-embel bahwa mereka tidak mau pamer atau apa, tetapi dengan peraturan Adsense yang ketat sekarang, rasanya tidak mungkin berpenghasilan sampai nominal itu. Kedua,...
Baca selengkapnya

Menampilkan Struktur Tabel MySQL dengan JTree

Oleh -
Gambar
Tertarik menampilkan struktur table database MySQL dalam bentuk tree, penulis melakukan percobaan memanggil database menggunakan JTree. Penggunaan JTree memang karena aplikasi yang sedang penulis bangun adalah berbasis web app, Android dan dengan back-end berupa dekstop menggunakan Java. Seperti yang telah disebutkan dalam posting-posting sebelumnya, penggunaan Java tidak lain karena penulis ingin tidak terlalu ribet masalah lisensi dikemudian hari. Diharapkan dengan pembuatan dengan platform yang mayoritas 'free', distribusi aplikasi nantinya dapat dilakukan lebih mudah dan bebas. Desain Skenario utama pembuatan back-end aplikasi penulis, adalah bagaimanapun juga database yang digunakan harus satu, dan dapat diakses baik dari sisi web, Android dan juga software. Oleh karena itu penulis menggunakan database MySQL (My-Structured Query Language), dengan menggunakan komunikasi data berupa JSON (JavaScript Object Notation), yang di akses dan di encode men...
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