analog wallclock (template)

function setup() {
  createCanvas(360, 360);
  angleMode(DEGREES); // ラジアンではなく度で扱う（通常はラジアンです。円周率(PI=3.14))
}

function draw() {
  background(255);

  drawCrossLine();

  // --------------------------------
  // learning
  // --------------------------------
  // drawCos();
  // drawSin();

  // drawCosSinPoint();
  
  // --------------------------------
  // wallclock
  // --------------------------------
  // drawSeconds();
  // drawCenterPoint();
}

/**
 * デバッグ用の基準線を描画します。
 */
function drawCrossLine() {
  push();

  // 画面の中心座標(0,0)をキャンバス中央に変更
  // cos,sinの計算結果が -1 から 1 までの値になるので、それを活かしやすくなります
  const HW = width / 2
  const HH = height / 2
  translate(HW, HH); 

  // horizontal
  stroke(128);
  line(-HW, 0, HW, 0);

  noStroke();
  fill(0);
  textAlign(CENTER, CENTER);
  text("-x", -HW + 10, -10);
  text("+x", HW - 10, +10);

  // vertical
  stroke(128);
  line(0, -height/2, 0, height/2);

  noStroke();
  fill(0);
  textAlign(CENTER, CENTER);
  text("-y", -10, -HH + 10);
  text("+y", +10, HH - 10);

  pop();
}

/**
 * 学習：Y座標を角度に見立てて、cosの計算結果を描画します。
 */
function drawCos() {
  push();

  let degree = 0;
  degree = frameCount;

  for (let y = 0; y < height; y++) {
    let x = cos(y + degree) * 100;
    
    stroke(255, 0, 0, 128);
    fill(255, 0, 0, 128);

    circle(x + width/2, height -y, 10);
    
    if (y == 0) {
      line(x + width/2, 0, width/2 + x, height);
      // デバッグ:値を表示
      noStroke()
      fill(128);
      textAlign(LEFT, TOP);
      text(`deg=${degree%360}
rad=${Math.floor(radians(degree%360)*100)/100}
cos=${Math.floor(x)/100}`, 0, y + 10);
    }
  }

  pop();
}

/**
 * 学習：X座標を角度に見立てて、sinの計算結果を描画します。
 */
function drawSin() {
  push();

  let degree = 0;
  degree = frameCount;

  for (let x = 0; x < width; x++) {
    let y = sin(x + degree) * 100;

    stroke(0, 255, 0, 128);
    fill(0, 255, 0, 128);
    
    circle(x, height / 2 + y, 10);

    if (x == 0) {
      line(0, height/2 + y, width, height/2 + y);
      // デバッグ:値を表示
      noStroke()
      fill(128);
      textAlign(RIGHT, BOTTOM);
      text(`deg=${degree%360}
rad=${Math.floor(radians(degree%360)*100)/100}
sin=${Math.floor(y)/100}`, width, height);
    }
  }

  pop();
}

/**
 * 学習： sin cos で計算した点を描画します。
 */
function drawCosSinPoint() {
  push();

  // 画面の中心座標(0,0)をキャンバス中央に変更
  const HW = width / 2
  const HH = height / 2
  translate(HW, HH); 

  // フレームカウントを角度に見立てる
  let value = frameCount;
  let degree = value % 360;

  const len = 100
  let x = cos(degree) * len;
  let y = sin(degree) * len;

  // デバッグ:値を表示
  noStroke();
  fill(0);
  textAlign(CENTER, CENTER);
  text(`v=${value} d=${degree} (${Math.floor(x)}, ${Math.floor(y)})`, x, y + 10);
  
  // 描画
  stroke(0, 0, 255, 128);
  fill(0, 0, 255, 128);
  circle(x, y, 10);

  // お試し：三角形
  stroke(255, 128, 128, 128);
  fill(255, 128, 128, 128);
  triangle(0, 0, x, y, x, 0);
    
  pop();
}

/**
 * 中心点を描画します。
 */
function drawCenterPoint() {
  push();

  // 画面の中心座標(0,0)をキャンバス中央に変更
  const HW = width / 2
  const HH = height / 2
  translate(HW, HH); 
  
  // 描画
  stroke(0, 0, 0, 128);
  fill(0, 0, 0, 128);
  circle(0, 0, 10);

  pop();
}

/**
 * 秒針を描画します。
 */
function drawSeconds() {
  push();

  // 画面の中心座標(0,0)をキャンバス中央に変更
  const HW = width / 2
  const HH = height / 2
  translate(HW, HH); 

  // 秒を角度に見立てる
  let now = new Date()
  let value = TODO // 取得

  // 1valueあたりの角度を計算し、valueを角度に変換する
  let unit = TODO // 1valueあたりの角度
  let degree = TODO // valueを角度に変換

  const len = 100
  let x = cos(degree) * len;
  let y = sin(degree) * len;

  // デバッグ:値を表示
  noStroke();
  fill(0);
  textAlign(CENTER, CENTER);
  text(`v=${value} d=${degree} (${Math.floor(x)}, ${Math.floor(y)})`, x, y + 10);

  // 描画
  stroke(0, 0, 255, 128);
  fill(0, 0, 255, 128);
  line(0,0,x, y);
      
  pop();
}

const TODO = "TOODの部分を考えて実装してください"