Membuat Animasi Jam dinding dengan Library ProcessingJS
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.
<!DOCTYPE html><html><header><script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script><script type="text/processing" data-processing-target="processing-canvas">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 birunoStroke();// Angles for sin() and cos() start at 3 o'clock;// subtract HALF_PI to make them start at the topellipse(100, 100, 160, 160);stroke(243,235,12); //kuningfloat 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></header><body><canvas id="processing-canvas"> </canvas></body></html>
Berikut ini hasil dari coding di atas :
bisa langsung dicoba di https://codepen.io/
jam dinding di atas jarumnya bergerak seperti jam pada umumnya.
Demikian tutorial dari penulis. Nantikan tutorial berikutnya....
Comments
Post a Comment