/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://studio.sketchpad.cc/sp/pad/view/ro.Td0bc7kJGLx/rev.1650
 * 
 * authors: 
 *   Ari Prasetyo

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



/* @pjs preload="/static/uploaded_resources/p.583/star.png"; */
/* @pjs preload="/static/uploaded_resources/p.583/1298116681_twitter42.png"; */

// Gambar bintang untuk penanda jam.
// Diambil dari Silk Icons Set http://www.famfamfam.com/lab/icons/silk/
PImage tanda = loadImage("/static/uploaded_resources/p.583/star.png");

// Gambar burung untuk hiasan
// Diambil dari http://www.iconshock.com/twitter-icons/
PImage burung = loadImage("/static/uploaded_resources/p.583/1298116681_twitter42.png");

/**
 * Setup awal
 */
void setup() {
  size(300, 300);
  colorMode(HSB, TWO_PI, 1.0, 1.0, 1.0);
  frameRate(12);
  smooth();
  
  imageMode(CENTER);
}

/**
 * Menggambar frame
 */
void draw() {
  hapus();
  
  jam(150, 150);
}

/**
 * Menghapus seluruhnya
 */
void hapus() {
  fill(3.4, 0.4, 1.0);
  noStroke();
  rect(0, 0, width, height);
}

/**
 * Menggambar seluruh jam
 */
void jam(float x, float y) {
  latar(x, y);
  
  penandaMenit(x, y);
  penandaJam(x, y);
    
  jarumJam(x, y);
  jarumMenit(x, y);
  jarumDetik(x, y);
}

/**
 * Menggambar jarum detik
 */
void jarumDetik(float x, float y) {
  // Mendapatkan detik sekarang
  float detik = second();
  
  // Simpan dulu matriks transformasinya
  pushMatrix();
  
  // Memindahkan koordinat (0, 0) ke (x, y)
  translate(x, y);
  
  // Memutar koordinat sesuai dengan detik saat ini
  // Karena satu lingkaran penuh = 2PI,
  // dan satu lingkaran penuh = 60 detik,
  // maka harus dikonversikan dulu sudutnya
  // yaitu sudut = detik * 2PI / 60
  rotate(detik * TWO_PI / 60);

  // Gambar garisnya.
  // Mengapa harus dari (0, 0) ke (0, -100)?
  // Pertama, pusat jam sudah dipindah ke (x, y),
  // sehingga menggambar jarum cukup dari (0, 0) saja.
  // Kemudian, karena pada detik ke 0 jarum harus menunjuk
  // ke atas, berarti dari (0, 0) dibuat garis sepanjang 100
  // ke atas (100 boleh diganti), yang dalam sistem koordinat
  // layar, berarti ujungnya ada di (0, -100). Tidak perlu
  // pusing dengan perputaran, karena sudah di-rotate sebelumnya.
  stroke(3.4, 0.6, 0.8);
  strokeWeight(1);
  line(0, 0, 0, -100);
  
  // Kembalikan matriks transformasinya
  popMatrix();
}


/**
 * Menggambar jarum menit
 */
void jarumMenit(float x, float y) {
  // Mendapatkan menit sekarang
  // Agar bergerak lebih mulus, sertakan detik sebagai pecahan
  float menit = minute() + (float) second() / 60;
  
  // Simpan dulu matriks transformasinya
  pushMatrix();
  
  // Memindahkan koordinat (0, 0) ke (x, y)
  translate(x, y);
  
  // Memutar koordinat sesuai dengan detik saat ini
  // Karena satu lingkaran penuh = 2PI,
  // dan satu lingkaran penuh = 60 menit,
  // maka harus dikonversikan dulu sudutnya
  // yaitu sudut = menit * 2PI / 60
  rotate(menit * TWO_PI / 60);

  // Gambar garisnya.
  // Penjelasan ada di fungsi jarumDetik()
  stroke(3.4, 0.6, 0.8);
  strokeWeight(3);
  line(0, 0, 0, -100);
  
  // Kembalikan matriks transformasinya
  popMatrix();  
}


/**
 * Menggambar jarum jam
 */
void jarumJam(float x, float y) {
  // Mendapatkan jam sekarang
  // Agar jam bergerak lebih mulus, sertakan menit dan detik sebagai pecahan
  float jam = hour() + (float) minute() / 60 + (float) second() / 3600;
  
  // Simpan dulu matriks transformasinya
  pushMatrix();
  
  // Memindahkan koordinat (0, 0) ke (x, y)
  translate(x, y);
  
  // Memutar koordinat sesuai dengan detik saat ini
  // Karena satu lingkaran penuh = 2PI,
  // dan satu lingkaran penuh = 12 jam,
  // maka harus dikonversikan dulu sudutnya
  // yaitu sudut = jam * 2PI / 12
  rotate(jam * TWO_PI / 12);

  // Gambar garisnya.
  // Penjelasan ada di fungsi jarumDetik()
  // Panjangnya 50 saja
  stroke(3.4, 0.6, 0.8);
  strokeWeight(6);
  line(0, 0, 0, -50);
  
  // Kembalikan matriks transformasinya
  popMatrix();  
}

/**
 * Menggambar penanda menit
 */
void penandaMenit(float x, float y) {
  // Simpan dulu matriks transformasinya
  pushMatrix();
  
  translate(x, y);

  stroke(3.4, 1.0, 0.7);
  strokeWeight(1);

  // Ulangi sebanyak 60 kali, karena dalam 1 lingkaran,
  // terdapat 60 penanda menit  
  for (int i = 0; i < 60; i++) {
    // setiap kali perulangan, rotasikan 2PI/60
    rotate(TWO_PI / 60);
    
    line(0, -105, 0, -108);
  }
  
  // Kembalikan matriks transformasinya
  popMatrix();
}

/**
 * Menggambar penanda jam
 */
void penandaJam(float x, float y) {
  // Simpan dulu matriks transformasinya
  pushMatrix();
  
  translate(x, y);

  noStroke();
  
  // Ulangi sebanyak 12 kali, karena dalam 1 lingkaran,
  // terdapat 12 penanda jam  
  for (int i = 0; i < 60; i++) {
    // setiap kali perulangan, rotasikan 2PI/12
    rotate(TWO_PI / 12);

    pushMatrix();
    translate(0, -108);
    rotate(0.001 * millis());
    image(tanda, 0, 0, 10, 10);
    popMatrix();
  }
  
  // Kembalikan matriks transformasinya
  popMatrix();
}

/**
 * Membuat latar
 */
void latar(float x, float y) {
  fill(3.4, 0.4, 0.5, 0.5);
  ellipse(x, y, 330, 330);

  fill(3.4, 0.1, 1.0);
  ellipse(x, y, 240, 240);
  
  fill(3.4, 0.3, 1.0);
  ellipse(x, y, 130, 130);
  
  pushMatrix();
  translate(110, 190);
  rotate(0.4 * sin(0.005 * millis()));
  image(burung, 0, 0, 64, 64);
  popMatrix();
}