//|           WIGGLERS             |

//|--------------------------------|

//| JAMES MENDEL                   |

//| jamesmendel.github.io          |

//| created: 11.09.2021            |

//| PRESS D TO VIEW BOUDNING BOXES |

//|================================|

​

var DEBUG = false;

​

const direction = {

  up: "VERTICAL",

  side: "HORIZONTAL",

};

​

var f_Roboto

function preload(){

  f_Roboto = loadFont("/assets/RobotoMono.ttf");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  rectMode(CORNERS);

  frameRate(10);

  angleMode(DEGREES);

  offset = 0;

  offsetLimit = floor(random(25, 100));

  console.log(offsetLimit);

  randX1 = random(width / 2, width / 2 + width / 4);

  randX2 = randX1 + random(10, width / 4);

  randH = random(50, height * 0.5);

}

​

var randX1, randX2, randH;

function draw() {

  background(40);

​

  linesInBoundedBox(0, 0, 0.2 * width, 0.9 * height, 5, direction.side);

  linesInBoundedBox(0, 0.9 * height, 0.5 * width, height, 15, direction.up, 3);

  linesInBoundedBox(0, 0.9 * height, 0.5 * width, height, 15, direction.side);

  linesInBoundedBox(0.5 * width, 0.1 * height, width, height, 10, direction.up);

  linesInBoundedBox(30, 40, 300, 400, 50, direction.up, 4, 170);

  concentricCricles(width - width * 0.2, height / 2 + 50, 90, 10, 1);

  linesInBoundedBox(

    width / 2 - 30,

    height / 2 - 20,

    width / 1.4,

    height / 2 + 50,

    30,

    direction.side,

    4,

    170

  );

  //sliding box

  linesInBoundedBox(

    randX1 + offset,

    70,

    randX2 + offset,

    50 + randH,

    15,

    direction.side,

    6

  );

​

  //def: concentricCricles(x, y, r, density = 10, thick = 2)

  concentricCricles(width / 2 - 80, height / 2 - 40, width * 0.2, 15, 4);

  // inside centerish circle

  // spirally(width / 2 - 80, height / 2 - 40, width * 0.15, 360)

​

  spirally(width * 0.2, height * 0.9, 90, 90);

  spirally(width * 0.9, 30, 100, 360);

  drawTime();

  updateOffsets();

}

​

function spirally(x, y, r, ang) {

  push();

  let rad = r;

  strokeWeight(2);

  for (let a = 0; a <= ang; a += 10) {

    line(x, y, x + r * cos(a) + random(2), y - r * sin(a) + random(2));

    // r -= a*.1

    r = rad * cos(a / (ang / 90));

  }

​

  pop();

​

  if (DEBUG) {

    push();

    strokeWeight(10);

    stroke(0, 255, 0);

    point(x, y);

    pop();

  }

}

​

function drawTime() {

  let pos = {

    x: 0.25 * width,

    y: 0.7 * height,

    x2: 0,

    y2: 0,

    xc: 0,

    yc: 0,

  };

​

  //for analog centering

  pos.x2 = pos.x + 6 * 23;

  pos.xc = pos.x + 3 * 22;

  pos.y2 = pos.y + 3 * 33;

  pos.yc = pos.y + 1.5 * 32;

​

  //get useful time info as ints and strings

  let hr, h, m, s, am;

  if (hour() > 12) {

    hr = hour() - 12;

    am = "PM";

  } else {

    hr = hour();

    am = "AM";

  }

  h = hr.toString().padStart(2, "0");

  m = minute().toString().padStart(2, "0");

  s = second().toString().padStart(2, "0");

​

  //ANALOG

  let r = 100;

  strokeWeight(3);

  circle(pos.xc+random(1), pos.yc+random(1), 2 * r);

  let timeDeg = 30 * (Number(h) + minute() / 60);

  line(

    pos.xc,

    pos.yc,

    pos.xc + (r - 20 + random(2)) * sin(timeDeg),

    pos.yc - (r - 20 + random(2)) * cos(timeDeg)

  );

​

  //DIGITAL

  push();

  let size = 40;

  textSize(size);

  fill(90);

  strokeWeight(2);

  textFont(f_Roboto);

  //returns x,y,w,h of text bounding box

  //let fBox = f_Roboto.textBounds("TEST", pos.x, pos.y);

  textAlign(LEFT, TOP);

  text(h + "" + m + "" + s, pos.x, pos.y);

  text(m, pos.x, pos.y + 32);

  text(s + "  " + am, pos.x, pos.y + 32 * 2);

  pop();

​

  if (DEBUG) {

    stroke(255, 0, 0);

    rect(pos.x, pos.y, pos.x2, pos.y2);

    point(pos.xc, pos.yc);

  }

}

​

var offset, offsetLimit, inc;

function updateOffsets() {

  renderOrder = 0;

​

  if (inc) {

    offset++;

    if (offset >= offsetLimit) {

      inc = !inc;

    }

  } else {

    offset--;

    if (offset <= 0) {

      inc = !inc;

    }

  }

​

  if (DEBUG) {

    push();

    textAlign(LEFT, BOTTOM);

    textSize(20);

    fill(255, 0, 255);

    stroke(2);

    text("lim:" + offsetLimit + " off:" + offset, 0, height);

    pop();

  }

}

​

var renderOrder;

function linesInBoundedBox(

  x1,

  y1,

  x2,

  y2,

  density,

  orientation,

  thick = 2,

  color = 200

) {

  stroke(color);

  strokeWeight(thick);

  switch (orientation) {

    case direction.side:

      for (let i = 0; i < abs(y2 - y1); i += density) {

        line(

          x1 + random(2),

          y1 + i + random(4),

          x2 + random(2),

          y1 + i + random(4)

        );

      }

      break;

    case direction.up:

      for (let i = 0; i < abs(x2 - x1); i += density) {

        line(

          x1 + i + random(4),

          y1 + random(2),

          x1 + i + random(4),

          y2 + random(2)

        );

      }

      break;

  }

  renderOrder++;

​

  if (DEBUG) {

    push();

​

    strokeWeight(2);

    stroke(0, 255, 0);

    noFill();

    rect(x1, y1, x2, y2);

​

    textSize(16);

    stroke(0);

    strokeWeight(1.2);

    fill(0, 255, 0);

    textAlign(LEFT, TOP);

    text("(" + x1.toFixed(1) + ", " + y1.toFixed(1) + ")", x1, y1); //top left

    fill(0, 255, 0);

    textAlign(RIGHT, BOTTOM);

    text("(" + x2.toFixed(1) + ", " + y2.toFixed(1) + ")", x2, y2); //bottom right

    textAlign(CENTER, CENTER);

​

    text(renderOrder, x1 + (x2 - x1) / 2, y1 + (y2 - y1) / 2);

    pop();

  }

}

​

function concentricCricles(x, y, r, density = 10, thick = 2) {

  noFill();

  strokeWeight(thick);

  for (let rad = r; rad > 10; rad -= density) {

    circle(x + random(2), y + random(2), rad);

  }

  renderOrder++;

​

  if (DEBUG) {

    push();

    textSize(16);

    textAlign(CENTER, CENTER);

    stroke(0);

    strokeWeight(1.2);

    fill(255, 255, 0);

    text("(" + x.toFixed(1) + ", " + y.toFixed(1) + ")", x, y);

    text(renderOrder, x, y + 18);

    pop();

  }

}

​

function keyTyped() {

  switch (key) {

    case "d":

      DEBUG = !DEBUG;

      break;

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​