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

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

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

Balapan Santai Kediri-Malang tiap Hari Senin Pagi

Oleh -
Gambar
Penulis adalah motorbiker, meskipun motor penulis hanya Verza 150, namun antusias penulis terhadap motor gede bergenre sport tetap berkobar dengan semangat 86. Namun tetap sebatas kemampuan penulis saja. Karena domisili penulis adalah di Kediri, dan sedangkan domisili pekerjaan berada di Malang. Maka hampir tiap minggu penulis pulang pergi Kediri-Malang, dengan biasanya berangkat ke Malang, selepas subuh Senin pagi. Nah disinilah letak keseruannya. Senin pagi, banyak juga para pengendara motor yang juga berasal dari Kediri, yang berangkat ke Malang.  Penulis biasanya berlomba dengan mereka dengan orientasi siapa yang bisa sampai duluan di Malang. Umumnya mereka adalah mahasiswa yang kuliah di Malang, entah itu di UM, UB, UMM, UNISMA, dan lain sebagainya. Kami berlomba tidak perlu saling tahu, dan tidak perlu mengenal. Yang penting balapan. Tanpa titik start, dan dengan titik finish masing-masing. Mungkin karena darah muda, kecepatan mereka rat...
Baca selengkapnya

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

Ketika Pengelola Basis Data Terabaikan

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

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

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

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

Besar Pajak Tahunan Honda Versa 2016 di Tahun 2022

Oleh -
Gambar
Tidak terasa, sudah setahun setelah penulis melakukan mutasi sepeda motor Verza penulis , dari Kediri ke Banyuwangi sesuai alamat KTP. April 2022 ini, Verza penulis genap berusia 6 tahun setelah pembelian. Yang penampakan ketika pembelian pertama kali seperti video dibawah ini: Meskipun model sepeda ini sudah lama, ternyata di 2022 ini masih banyak juga yang melihat video penulis di atas. Dan karena perjalanan penulis cukup jauh, kilometernya sudah mencapai 100 ribu kilometer, cukup untuk mengelilingi bumi dua kali. Lalu, ketika penulis membayar pajak tahunan pada April 2022, ternyata nominal pajak yang harus penulis bayarkan adalah sebesar IDR 296.500 . Nilainya lebih tinggi sedikit dari tahun-tahun sebelumnya. Mungkin karena usia sepeda motor yang menua, sehingga pembayaran pajak polusi yang menjadi lebih tinggi. Atau mungkin karena memang pajak di tahun 2022 ini naik. Penulis belum tahu, mungkin suatu saat nanti post ini akan penulis update, ketika penulis telah tahu jawabannya.
Baca selengkapnya