Generate Wallpaper HTML5 Canvas Segitiga Acak


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



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Kumpulan Source Code Greenfoot

Menyembunyikan Failed Load Images di Blogger

Kode Greenfoot Game Flappy Bird

Algorithma Coretan Abstrak dengan HTML5 Canvas

Kebodohan Karyawan Menyalahkan Sistem

Algorithma Bilangan Prima dengan Javascript

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Mencoba Submit Theme di Wordpress.org

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script