// www.ernst-schmidt.com

​

var preset = 1;

​

var preset1 = ['#6DD9BF', '#F2D680', '#F26E50']; // AmazonPage

var preset2 = ['#8C2020', '#D94D1A', '#F2B749']; // estado-fisico-fogo

var preset3 = ['#193246', '#3F5B73', '#CCA98D']; // Цветовая тема 1

var preset4 = ['#F2A35E', '#ADB0D9', '#8B5A8C']; // su-mentira-en-abril-miyazono-kaori-arima

var preset5 = ['#E6172C', '#04A993', '#F6760B']; // Unknown

var preset6 = ['#3DD990', '#255941', '#D93654']; // sci-fi cityscapes_02

​

var displayFramerate = false;

​

function setup() {

  createCanvas(500, 500);

​

  // store time separately to determine if update is necessary

  s = second();

  m = minute();

  h = hour();

​

  wheelSec = new Wheel(225, 240, 'second');

  wheelMin = new Wheel(150, 240, 'minute');

  wheelHour = new Wheel(75, 240, 'hour');

​

  presets = [];

  presets.push(preset1);

  presets.push(preset2);

  presets.push(preset3);

  presets.push(preset4);

  presets.push(preset5);

  presets.push(preset6);

​

  logFrameRate = [];

  avgFrameRate = frameRate();

​

  update = false;

  hover = [false, false, false];

}

​

function draw() {

  // check if time has changed so sketch only gets updated if necessary

  if (s != second() || m != minute() || h != hour()) update = true;

​

  // check if user is hovering over wheels

  checkMouse();

​

  if (update) {

    wheelSec.update();

    wheelMin.update();

    wheelHour.update();

​

    background(0);

    wheelSec.display();

    wheelMin.display();

    wheelHour.display();

​

    update = false;

    hover = [false, false, false];

    update = false;

  }

​

  if (displayFramerate) {

    updateFrameRate();

    displayFrameRate("white");

  }

}

​

function checkMouse() {

  let center = createVector(width / 2, height / 2);

  let mouse = createVector(mouseX, mouseY);

  let dist = mouse.sub(center).mag();

​

  let enlarge = 3;

​

  wheelHour.r = wheelHour.rDef;

  wheelMin.r = wheelMin.rDef;

  wheelSec.r = wheelSec.rDef;

​

  // check whether user is hovering over one of the wheels and if so, whether an update is necessary. Also increase radius of hovered wheel

  if (dist <= wheelHour.rDef) {

    if (!hover[0]) update = true;

    wheelHour.r += enlarge;

    hover = [true, false, false];

    return;

  }

  if (dist <= wheelMin.rDef && dist > wheelHour.rDef) {

    if (!hover[1]) update = true;

    wheelMin.r += enlarge;

    hover = [false, true, false];

    return;

  }

  if (dist <= wheelSec.rDef && dist > wheelMin.rDef) {

    if (!hover[2]) update = true;

    wheelSec.r += enlarge;

    hover = [false, false, true];

    return;

  }

  if (dist > wheelSec.rDef && hover[2]) update = true;

​

  hover = [false, false, false];

}

​

class Wheel {

  constructor(r, nSectors, mode) {

    this.r = r;

    this.nSectors = nSectors;

    this.rDef = r;

    this.center = createVector(width / 2, height / 2);

    this.sectors = [];

​

    let ang = -HALF_PI;

    let angDiff = TWO_PI / (this.nSectors);

​

    for (let i = 0; i < this.nSectors; i++) {

      ang += angDiff;

      this.sectors.push(new Sector(this, mode, i, ang, ang + angDiff));

    }

  }

​

  update() {

    for (let s of this.sectors) {

      s.update();

    }

  }

​

  display() {

    for (let s of this.sectors) {

      s.display();

    }

  }

}

​

class Sector {

  constructor(father, mode, index, ang1, ang2) {

    this.father = father;

    this.mode = mode;

    this.baseValue = index / this.father.nSectors;

    this.center = this.father.center;

    this.ang1 = ang1;

    this.ang2 = ang2;

  }

​

  update() {

    let increment;

    switch (this.mode) {

      case 'second':

        increment = second() / 60

        break;

​

      case 'minute':

        increment = minute() / 60

        break;

​

      case 'hour':

        increment = (hour() % 12) / 12;

        break;

    }

    this.value = this.baseValue - increment;

    if (this.value <= 0) this.value += 1;

  }

​

  display() {

    let rDef, gDef, bDef;

    let index;

​

    switch (this.mode) {

      case 'second':

        index = 0;

        break;

​

      case 'minute':

        index = 1;

        break;

​

      case 'hour':

        index = 2;

        break;

    }

    rDef = hexToRgb(presets[preset - 1][index]).levels[0];

    gDef = hexToRgb(presets[preset - 1][index]).levels[1];

    bDef = hexToRgb(presets[preset - 1][index]).levels[2];

​

    let r = floor(map(this.value, 0, 1, 0, rDef));

    let g = floor(map(this.value, 0, 1, 0, gDef));

    let b = floor(map(this.value, 0, 1, 0, bDef));

​

    stroke(r, g, b);

    strokeWeight(1);

    fill(r, g, b);

    arc(this.center.x, this.center.y, this.father.r * 2, this.father.r * 2, this.ang1, this.ang2, PIE);

  }

}

​

function keyPressed() {

  if (key > 0 && key < 10) preset = key;

  if (preset > presets.length) preset = presets.length;

}

​

function updateFrameRate() {

  let lArray = 30;

  if (logFrameRate.length >= lArray) {

    logFrameRate.splice(0, 1);

  }

  logFrameRate.push(frameRate());

  let avg = 0;

  for (let i = 0; i < logFrameRate.length; i++) {

    avg += logFrameRate[i];

  }

  avgFrameRate = avg / logFrameRate.length;

}

​

function displayFrameRate(tint) {

  let str = parseInt(avgFrameRate) + " fps";

​

  if (tint == "white") {

    let notRed = map(avgFrameRate, 30, 55, 0, 255);

    fill(255, notRed, notRed, 200);

  } else if (tint == "black") {

    var red = map(avgFrameRate, 30, 55, 255, 0);

    fill(red, 0, 0);

  }

​

  textAlign(RIGHT);

  textSize(14);

  noStroke();

  text(str, width - 5, 18);

}

​

function hexToRgb(hex) {

  // https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

  hex = hex.replace('#', '');

​

  var bigint = parseInt(hex, 16);

  var r = (bigint >> 16) & 255;

  var g = (bigint >> 8) & 255;

  var b = bigint & 255;

  return color(r, g, b);

}