let cx, cy; // center coordinates of the clock

let hourRadius, minuteRadius, secondRadius; // radius of the handles

let hourAngle, minuteAngle, secondAngle; // angle of the handles

let hourStroke, minuteStroke, secondStroke; // stroke color of the handles

​

// yellow circle

let pyc1 = 1176.8585;

// pauline rey design

let pprd = 951.3791;

​

//triangle position

let a1 = 0;

let a2 = 2495.7027;

let b1 = 1536;

let b2 = -447.7027;

let c1 = 1536;

let c2 = 2048;

​

//elements + type

let S;

let font1;

let font2;

let font3;

​

// Moving letters

let yT;

let yH;

let yE;

let yM;

let yC;

let yH2;

let yI;

let yN;

let yE2;

​

//load images

function preload() {

  Sright = loadImage("Sources/S-right.png");

  Sleft = loadImage("Sources/S-left.png");

  signature = loadImage("Assets/PR.png");

  date = loadImage("Assets/date.png");

  PRD = loadImage("Sources/PRDesign.png");

  DPP = loadImage("Sources/DPP.png");

  TRO = loadImage("Sources/TROrange.png");

  handles = loadImage("Sources/Handles.png");

​

  //load fonts

  font1 = loadFont("Type/Canopee-Regular.otf");

  font2 = loadFont("Type/Welcomeweb-Regular.otf");

  font3 = loadFont("Type/sud-regular.otf");

​

  //random colors ??

  let colors = ["blue", "red", "orange", "yellow"];

  let blue = (148, 210, 189);

  let red = (174, 32, 18);

  let orange = (187, 62, 3);

  let yellow = (238, 155, 0);

  let color = random(colors);

}

​

// SETUP=====================

function setup() {

  createCanvas(1536, 2048);

  angleMode(DEGREES);

  ellipseMode(CENTER);

  print("une fonction!");

  //clock

    cx = 366.683;

  cy = 871.1415;

  hourRadius = 120;

  minuteRadius = 175;

  secondRadius = 220;

​

  hourStroke = color(238, 155, 0);

  minuteStroke = color(187, 62, 3);

  secondStroke = color(0, 0, 0);

​

  //no cursor

  noCursor(mouseX, mouseY);

​

  //allignment

  textAlign(CENTER, CENTER);

  rectMode(CENTER);

​

}

​

// DRAW==================

function draw() {

  print("un dessin!");

  background(2233, 216, 166);

  //date

  let now = new Date();

​

  //beige triangle

  noStroke();

  fill(2233, 216, 166);

  let y7 = map(mouseY, 0, height, 0, 2310);

  triangle(0, 0, 1536, -447.7027, 0, 2495.7027);

​

  //triangle orange

  image(TRO, 0, -447.7);

​

  //yellow ellipse

  fill(238, 155, 0);

  let y2 = map(mouseY, 1000, height, 1176.8585, 2310);

  ellipse(1169.317, y2, 523.5209);

​

  //JOURNEY

  textSize(90);

  textFont(font2);

  fill(35, 31, 32);

  text("A JOURNEY THROUGH TIME", 775, 390);

​

  //THE M(A)CHINE - PREVIOUS DISPLAY OF THE TITLE

  //  textSize(300);

  //  textFont(font1);

  //  fill(35, 31, 32);

  // text("THE M  CHINE", 750, 200);

​

  // T H E   M - C H I N E - NEW DISPLAY OF THE TITLE (MOVING LETTERS)

  textSize(300);

  textFont(font1);

  fill(35, 31, 32);

​

  //  text("T",127.0513,137.7524)

  //  let yT = map(mouseY,0, height, -1420, 158.1645);

  //  text("T", 135.5358,yT,196.5515,1418.3214)

​

  let yT = map(mouseY, 0, height, 200, 300);

  text("T", 176.5518, yT);

​

  let yH = map(mouseY, 0, height, 200, 650);

  text("H", 297.6013, yH);

​

  let yE = map(mouseY, 0, height, 200, 450);

  text("E", 407.7039, yE);

​

  let yM = map(mouseY, 0, height, 200, 850);

  text("M", 588.9031, yM);

​

  let yC = map(mouseY, 0, height, 200, 550);

  text("C", 883.6533, yC);

​

  let yH2 = map(mouseY, 0, height, 200, 750);

  text("H", 1058.0991, yH2);

​

  let yI = map(mouseY, 0, height, 200, 300);

  text("I", 1152.7466, yI);

​

  let yN = map(mouseY, 0, height, 200, 1000);

  text("N", 1256.9995, yN);

​

  let yE2 = map(mouseY, 0, height, 200, 750);

  text("E", 1368.001, yE2);

​

  //S

  let y4 = map(mouseY, 0, height, 716.1669, 0);

  image(Sright, 618.0645, y4);

​

  let y3 = map(mouseY, 0, height, 793.3674, 1000);

  image(Sleft, 0, y3);

​

  //'A'

  textSize(300);

  textFont(font1);

  AColor = color(238, 155, 0);

  AColor.setAlpha(255 - mouseY + 1150);

  fill(AColor);

  let y1 = map(mouseY, 0, height, 200, 1644);

  text("A", 728.0527, y1);

​

  //DPPratt

​

  image(DPP, 710.5581, 1281.9332);

​

  //MAY 4th 2022

  let y5 = map(mouseY, 1000, 2048, 1536, 155.9);

  image(date, y5, 1644);

​

  //PR

  image(signature, 1447.8264, 1944.1924);

​

  // Calculate the angle of the handles

  secondAngle = map(now.getSeconds(), 0, 60, 0, 360) - 90;

  minuteAngle = map(now.getMinutes(), 0, 60, 0, 360) - 90;

  hourAngle = map(now.getHours() % 12, 0, 12, 0, 360) - 90;

​

   // Draw the clock face

  fill(10, 147, 150);

  ellipse(cx, cy, 523.5209);

   //PRDesign

  //let t1 = map(mouseY,0, 915.098, 0, 255);

  //let y6 = map(mouseY,0, 2048, 1798, 951.3791);

  //tint(255, t1);

  image(PRD, 136.9595, 641.2722);

  // Draw the handles

  strokeWeight(15);

  stroke(hourStroke);

  line(cx, cy, cx + hourRadius * cos(hourAngle), cy + hourRadius * sin(hourAngle));

  strokeWeight(8);

  stroke(minuteStroke);

  line(cx, cy, cx + minuteRadius * cos(minuteAngle), cy + minuteRadius * sin(minuteAngle));

  strokeWeight(5);

  stroke(secondStroke);

  line(cx, cy, cx + secondRadius * cos(secondAngle), cy + secondRadius * sin(secondAngle));

​

  // Draw the center point

  fill(0);

  noStroke();

  ellipse(cx, cy, 10, 10);

​

​

  // CLOCK HANDLES (STEADY)

 // let t1 = map(mouseY, 0, 915.098, 0, 255);

 // stroke(255, t1);

​

 // strokeWeight(6);

 // line(366.68, 871, 484.01, 764.05);

 //strokeWeight(9);

 // line(366.68, 871, 252.64, 799.83);

 // strokeWeight(3);

 // line(366.68, 871, 148.46, 952.08);

​

  // PNG HANDLES

  //  let t1 = map(mouseY,0, 915.098, 0, 255);

  //  tint(255, t1);

  //  image(handles, 148.4591,764.053,335.5466,188.0278)

​

  // Angles for sin() and cos() start at 3 o'clock;

  // subtract HALF_PI to make them start at the top

  //  let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;

  //  let m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;

  //  let h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

​

  // Draw the hands of the clock

  //  stroke(255);

  //  strokeWeight(3);

  //  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);

  //  strokeWeight(5);

  //  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);

  //  strokeWeight(7);

  //  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);

​

  // Draw the minute ticks

  //  strokeWeight(2);

  //  beginShape(POINTS);

  //  for (let a = 0; a < 360; a += 6) {

  //    let angle = radians(a);

  //    let x = cx + cos(angle) * secondsRadius;

  //    let y = cy + sin(angle) * secondsRadius;

  //    vertex(x, y);

  //  }

  //  endShape();

}

​

//___________________

// TROUBLESHOOTING

//___________________

​

// block "A" at title height UP + DOWN

// Make orange triangle move right as mouse goes down AND back in place as mouse goes up

// Make "date" move right up to POSITION as mouse moves down OR Opacity change

// Make "A" change color as "A goes down" OR change every time page reloads

// Make yellow circle and text go down as mouse moves down

​