let circles, numCircles;

let lastmin;

​

class Circle {

  constructor(x, y, vx, vy, diam, col) {

    this.position = createVector(x, y);

    this.velocity = createVector(vx, vy);

    this.diameter = diam;

    this.radius = diam / 2;

    this.color = col;

    this.target = createVector(random(width), random(height)); //null;

  }

  update() {

    // https://www.reddit.com/r/javascript/comments/2pty1w/how_do_i_make_an_object_chase_an_other_object/

    if (this.target !== null) {

      let dx = this.target.x - this.position.x;

      let dy = this.target.y - this.position.y;

​

      // normalize (= direction vector)

      // (a direction vector has a length of 1)

      let length = Math.sqrt(dx * dx + dy * dy);

      if (length) {

        dx /= length;

        dy /= length;

      }

​

      // move

      // delta is the elapsed time in seconds

      // SPEED is the speed in units per second (UPS)

      this.position.x += dx * 2; //

      this.position.y += dy * 2; //delta * SPEED;

​

      // this.position.x += this.velocity.x;

      // this.position.y += this.velocity.y;

    }

​

    if (this.position.x > width || this.position.x < 0) this.velocity.x *= -1;

    if (this.position.y > height || this.position.y < 0) this.velocity.y *= -1;

  }

  draw() {

    noStroke();

    fill(this.color);

    circle(this.position.x, this.position.y, this.diameter);

  }

}

function setup() {

  numCircles = 1000;

  circles = [];

  pixelDensity(1);

​

  createCanvas(1000, 1000);

  lastmin = -1;

​

  textFont("Helvetica");

​

  for (let i = 0; i < numCircles; i++) {

    circles.push(

      new Circle(

        random(width),

        random(height),

        random(-5, 5),

        0,

        random(20, 50),

        color(0, 0, 0, 50)

      )

    );

  }

}

​

function draw() {

  background(255);

  // Get the current second, minute and hours

  // and assign them to res variables

  var sec = second();

  var min = minute();

  var hrs = hour();

​

  // Check for AM or PM based on the

  // hours and store it in a variable

  var mer = hrs < 12 ? "AM" : "PM";

​

  // Format the time so that leading

  // 0's are added when needed

  // sec = formatting(sec);

  min = formatting(min);

  hrs = formatting(hrs % 12);

  if (hrs == 0) hrs = 12;

​

  // time changed, seek new points

  if (lastmin != min) {

    lastmin = min;

​

    loadPixels();

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

      // for (let j = 0; j < 100; j++) {

      // timeout

      let box = circles[i].radius;

​

      let x = random(box, width - box);

      let y = random(box, height - box);

​

      // search in a region

      let found = false;

      // for (let f = 0; f < 100; f++) {

        for (let search_y = y - box; search_y < y + box; search_y++) {

          for (let search_x = x - box; search_x < x + box; search_x++) {

            let d = 1;

            let index = 4 * (search_y * d * width * d + search_x * d);

            // let _c = get(search_x, search_y);

            // if (_c[0] == 0 && _c[1] == 0 && _c[2] == 0) {

            if (

              pixels[index] == 0 &&

              pixels[index + 1] == 0 &&

              pixels[index + 2] == 0

            ) {

              console.log("target found");

              found = true;

              circles[i].color = color(255,0,255);

              circles[i].target = createVector(x, y);

              break;

            }

          }

        // }

        if (found) break;

      }

​

      // }

    }

  }

​

  // Set the color of the background

  fill(0);

​

  // Set the font size

  textSize(230);

​

  // Set the text alignment in center

  // and display the result

  textAlign(CENTER, CENTER);

​

  // Display the time

  text(

    hrs +

      ":" +

      min + //":" + sec +

      " " +

      mer,

    width / 2,

    height / 2

  );

​

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

    circles[i].update();

    circles[i].draw();

  }

}

​

// This function pads the time

// so that 0's are shown

// eg. 06,08,05 etc.

function formatting(num) {

  // Convert to int and check

  // if less than 10

  if (int(num) < 10) {

    // Return the padded number

    return "0" + num;

  }

​

  // Return the original number if

  // padding is not required

  return num;

}

​