Clock

Thursday 28 February 2013

A new update!! I know it's kinda boring, but my new clock is working!!
Special thanks to my father and markE, who gave me the advice.
Check out the right sidebar of blog gue.

Kalau mau minta aja, bisa custom juga, misalnya, pilih background sendiri, mau warna atau gambar.. warna jarumnya juga bisa diganti :D

Dan, keunggulannya ada di speed. It's blazing fast, dibandingin sama jam flash biasa, jam HTML 5 jauh lebih powerful dan lebih cepat, jadi nggak ngelambatin.

Here is the uncustomized code, kode mentahnya (tanpa background, bentuk jarum standar):





<canvas id="myClock" width="200" height="140" align="center"></canvas>
<script>
    // MyClock is a clock built using HTML 5 Canvas Element
    // By Akhyar Kamili @akhyarkamili 2/26/2013
    // Thanks for the help markE!
    var canvas = document.getElementById("myClock");
    var context = canvas.getContext('2d');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var radiusSecs = 45;
    var radiusMins = 35;
    var radiusHours = 25;
    var centerX = canvasWidth / 2;
    var centerY = canvasHeight / 2;
    
    function startClock() {
        var date = new Date;
        var seconds = date.getSeconds();
        var minutes = date.getMinutes();
        var h = checkHours(date.getHours());
        var hours = h+minutes*10/600;
        var a = new Object;
        a.detik = seconds*6;
        a.menit = minutes*6;
        a.jam = hours*30;
        var angleSecs = 1/2*Math.PI - a.detik*Math.PI/180;
        var angleMins = 1/2*Math.PI - a.menit*Math.PI/180;
        var angleHours = 1/2*Math.PI - a.jam*Math.PI/180;
        if(a > 360)
            a = 0; 
        
        context.clearRect(0,0, canvasWidth, canvasHeight);
        context.save();
            
        drawSeconds(angleSecs);
        drawMinutes(angleMins);
        drawHours(angleHours);
        drawNumbers();
        
        context.restore()
        
        setTimeout(startClock, 500);
        
    }
    function drawMinutes(angleMins) {
  var angleChange = Math.PI/180 * 12;
        var xTarget = centerX + Math.cos(angleMins)*radiusMins;
        var yTarget = centerY - Math.sin(angleMins)*radiusMins; 
  xSampingKanan = centerX + Math.cos(angleMins+angleChange)*8;
  ySampingKanan = centerY - Math.sin(angleMins+angleChange)*8;
  xSampingKiri = centerX + Math.cos(angleMins-angleChange)*8;
  ySampingKiri = centerY - Math.sin(angleMins-angleChange)*8;
        
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.lineWidth = 1;
        context.strokeStyle = '#ff0000';
        context.lineTo(xSampingKanan, ySampingKanan);
        context.lineTo(xTarget, yTarget);
        context.lineTo(xSampingKiri, ySampingKiri);
  context.closePath();
        context.stroke();
    }
    function drawHours(angleHours) {
  var angleChange = Math.PI/180 * 15;
        var xTarget = centerX + Math.cos(angleHours)*radiusHours;
        var yTarget = centerY - Math.sin(angleHours)*radiusHours;
  xSampingKanan = centerX + Math.cos(angleHours+angleChange)*8;
  ySampingKanan = centerY - Math.sin(angleHours+angleChange)*8;
  xSampingKiri = centerX + Math.cos(angleHours-angleChange)*8;
  ySampingKiri = centerY - Math.sin(angleHours-angleChange)*8;
        
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.lineTo(xSampingKanan, ySampingKanan);
        context.lineTo(xTarget, yTarget);
        context.lineTo(xSampingKiri, ySampingKiri);
        context.lineWidth = 1;
        context.strokeStyle = '#00ff00';
        context.closePath();
        context.stroke();
    }
    function drawSeconds(angleSecs) {
  var angleChange = Math.PI/180 * 10;
        var xTarget = centerX + Math.cos(angleSecs)*radiusSecs;
        var yTarget = centerY - Math.sin(angleSecs)*radiusSecs;
  xSampingKanan = centerX + Math.cos(angleSecs+angleChange)*8;
  ySampingKanan = centerY - Math.sin(angleSecs+angleChange)*8;
  xSampingKiri = centerX + Math.cos(angleSecs-angleChange)*8;
  ySampingKiri = centerY - Math.sin(angleSecs-angleChange)*8;  
        
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.lineWidth = 1;
        context.strokeStyle = '#0000ff';
        context.lineTo(xSampingKanan, ySampingKanan);
        context.lineTo(xTarget, yTarget);
        context.lineTo(xSampingKiri, ySampingKiri);
  context.closePath();
        context.stroke();
    }
    function checkHours(i) {
        if(i>12);
            i = i-12;
        return i; 
    }
    function drawNumbers() {
        for(var i=1;i<13;i++) {
            var angleHours = 1/2*Math.PI - (Math.PI/180)*(i*30);
            var xTarget = centerX + Math.cos(angleHours)*(radiusSecs+15);
            var yTarget = centerY - Math.sin(angleHours)*(radiusSecs+15);
            
   context.fillStyle = '#eeeeee';
            context.fillText(i, xTarget, yTarget);
            context.globalCompositeOperation = 'source-over';
        }
    }


Minimum browser requirements: Firefox 7+, Chrome 15+, Internet Explorer 9+, Opera 11+;  Browser kamu support HTML 5 nggak? coba cek disini: html5test.com  Ini udah bisa dimasukkin di blog kamu, tinggal add gadget, pilih HTML/JavaScript, copy deh!

Afeen

Tuesday 26 February 2013

Ok! Adik gue yang paling kecil sekarang umurnya udah 1 tahun 5 hari. :)

Gue sendiri ngerasa aneh, tapi kayaknya bayi satu ini emang jenius deh, kayak kakaknya.. (loh)

Dia udah ngerti, kalau ada bantal di karpet dan kita bilang "ayo bobo!" ntar dia tiduran dibantalnya..

Kemarin dia ngambil kacamata gue dari muka, terus gue minta lagi, eh dia kasiin balik...

Udah bisa dipanggil sejak 9 bulan.

Kalau adzan, dia ikut-ikutan.

Nggak mau minum obat, langsung disembur. Tapi kalau dikasih air putih mau.

Udah bisa turun dari kasur.

Udah bisa jalan 4 ubin.

Dan seeeterusnyaa..

Watcha lookin at dude?

Wait, Camera!?

Heheheh..

Lunch!



Watermelon? I wonder how it tastes like..
Let's have a try..


IT'S SO GOOOD!!!

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

Let's just see what's gonna happen.

Monday 11 February 2013

Okay. I posted about Hikmatul Iman earlier in this blog.

And it's turned out pretty funny. 2 of my close friends 1 of my senior are hikmatul iman members.

Hmm.. I wonder.

Let's just see what's gonna happen

Kabaret Kreatif

Sunday 3 February 2013

In two weeks. Keluarga Remaja Masjid Salman, are preparing.
Dalam 2 minggu, akan ada event MyKEY."KE" dari MyKEY adalah Karisma Expo. Jadi kira-kira ini adalah pameran tentang Karisma ITB. Ada berbagai acara, mulai dari fun games, parents-kids games, some talkshow and even, a Try Out!

Oke, Intinya adalah pada acara ini, Kreatif dapat bagian pertunjukkan for about a half an hour or so. Dan setelah ngobrol beberapa saat, kami memutuskan untuk membuat sebuah kabaret. Terus masalahnya apa?

Masalahnya adalah... Kreatif sekarang lagi masa liburan, alias masa transisi antara satu semester ke semester berikutnya. Otomatis, nggak ada yang ngurus. Dan akhirnya nggak ada yang merencanakan kabaret sama sekali, sampai 2 minggu lalu. Kami menyadari bahwa waktu yang ada sangat sempit, dan belum setitik tinta pun digoreskan di atas kertas rencana kami. Nah, ini masalah. Karena MyKey ini akan digelar dalam 2 minggu, atau tepatnya, 17 Februari 2013. Oh no.

Jadi kami baru mendapat gambaran random tentang kabaret, belum pernah latihan, belum pernah rekaman. Susah kan?

So we're struggling, dan semua harus direncanakan dengan cepat. Naskah sedang ditulis, properti sedang dibuat, let's go!!

Ada yang punya pengalaman tentang kabaret nggak? Kalau ada, kontak https://www.facebook.com/akhyarkamili, atau mention @akhyarkamili. Thanks!
 

Hits

Stack Overflow

Blogroll

Blog Nanda
Days of Nan - http://nan2598.blogspot.com/

Writings of Niti
Niti No Kakikomi - http://samazamanakakikomi.blogspot