Membuat Animasi Jam dinding dengan Processingjs

15 Mar

Bagaimana cara menampilkan jam dinding pada website kita tanpa menggunakan content flash? salah satu jawabannya adalah sebagai berikut. Kita bisa membuat jam dinding dengan menggunakan framework html5 yaitu processingjs, yang bisa diunduh di situs processingjs.org. Disini kita akan menentukan waktu saat ini yang bisa dibaca dengan fungsi second(), minute(), dan hour(). Di contoh berikut ini, nilai sin() dan cos() digunakan untuk menentukan posisi lengan jarum jam. Bagi yang belum mengetahui cara kerja processingjs bisa membaca posting artikel saya sebelumnya di sini.

<script src=”http://processingjs.org/js/processing.min.js&#8221; type=”text/javascript”></script>
<script data-processing-target=”jam_dinding” type=”text/processing”>
 void setup() {
   size(200, 200);
   stroke(255);
   smooth();
   
   
    PFont fontA = loadFont(“Arial”);
    int fontSize=16;
    textFont(fontA, fontSize);
 }
 void draw() {
   background(0);
   fill(11,11,238); //warna biru
   
   noStroke();
   // Angles for sin() and cos() start at 3 o’clock;
   // subtract HALF_PI to make them start at the top
   ellipse(100, 100, 160, 160); 
   stroke(243,235,12); //kuning
   float s = map(second(), 0, 60, 0, TWO_PI) – HALF_PI;
   float m = map(minute(), 0, 60, 0, TWO_PI) – HALF_PI;
   float h = map(hour() % 12, 0, 12, 0, TWO_PI) – HALF_PI;

   strokeWeight(1);
   line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
   strokeWeight(2);
   line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
   strokeWeight(4);
   line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);

    fill(249,80,226); //pink
   // stroke(0); 
    float angle = -HALF_PI + HALF_PI / 3;
   float angle_inc = TWO_PI / 12;
  
   for ( int i = 1; i <= 12; i++, angle += angle_inc ) {
       text(i,95 + cos(angle) * 70,105 + sin(angle) * 70);
   }
 }
 </script><canvas height=”200″ id=”jam_dinding” width=”200″></canvas>

 Gambar

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: