Shorten The Gap!

Friday, 22 February 2013

What's the next big event? Kabaret Kreatif udah lewat, dan meskipun kami ngapalin naskah baru sejam sebelum pentas, ternyata jadi juga..
I'm trying to make a clock, using the HTML 5 canvas element and javascript, but it's so damn hard, i rewrote and rewrote the code but it doesn't works.. masih berkutat, kayaknya gaya gue masih terlalu berantakan. Parah.. -__-
But, i've found an interesting thing, here i have the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Timer</title> </head> <body onload="startTime(), spin()"> <script> var tanggal = new Date; var angle = tanggal.getSeconds() * 6; function spin() { var r = 100; angle += 6; if(angle > 360) angle = 0; angleRadian = angle*2*Math.PI/360 - 1/2 * Math.PI; makeLine(r, angleRadian); setTimeout(spin, 1000); } function makeLine(r,angle) { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext('2d'); context.globalCompositeOperation = "xor"; var y = canvas.height /2; var x = canvas.width / 2; var yTarget = y + Math.sin(angle) * r; var xTarget = x + Math.cos(angle) * r; context.beginPath(); context.moveTo(x,y); context.lineTo(xTarget, yTarget); context.stroke(); } function startTime() { var tanggal = new Date; var jam = tanggal.getHours(); var menit = tanggal.getMinutes(); var detik = tanggal.getSeconds(); var j = checkTime(jam); var m = checkTime(menit); var d = checkTime(detik); document.getElementById("clock").innerHTML = j + ":" + m + ":" + d; setTimeout(startTime, 500); } function checkTime(i) { if(i < 10){ i = "0" + i; } return i; } </script> <div id="clock"></div> <div id="angle"></div> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>
Buka notepad, copy-paste kodenya, rename dari ".txt" jadi ".html" terus buka, dan liat jamnya. Dibilang jam juga nggak bisa sih, karena aku nggak ngehapus "detik sebelumnya". Dan yang menarik, liat gambar yang terbentuk di tengah "jam" tadi. . . . . . . . . . Bercanda, nggak usah ngelakuin hal-hal tadi. Cekidot aja disini:
It's so interesting, gue bener-bener pengen tau kenapa bisa keluar karya seni kayak gitu. Cool!! And notice, semakin banyak putarannya, semakin fade gambarnya. Thanks for reading! It's nice to shorten the gap between my posts
 

Welcome!


Welcome to my blog! Enjoy my writings, read my stories, or listen to my opinion.. Feel free to roam around!



Hits

Stack Overflow

Google+ Followers

Blogroll

Blog adik seorang teman. Masih SMP tapi keren abis:

http://shofiifi.blogspot.com/?m=1

Blog Nanda, prepare for some cool contents
Days of Nan - http://nan2598.blogspot.com/

Writings of Niti, deep things are here.
Niti No Kakikomi - http://samazamanakakikomi.blogspot.com/

Words that is just so enjoyable to read - Atikah's
http://chocolatika.wordpress.com