//----------------------
// Anniversary Card 2022
// ---------------------

// <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3
// <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3
// <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3
// <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3 <3

let img;
let brush;
let hearts = [];
let xoff1 = 0;
let xoff2 = 10000;
let inc = 0.03;
let start = 0;

function preload() {
  img = loadImage('data/luka_sarita_mcrop.png');
  img.loadPixels();
}

function setup() {
  createCanvas(img.width*13, img.height*13);
  // createCanvas(img.width*10, img.height*10);
  print(img.width + ' • ' + img.height);
  brush = new Brush(30, inc);
  brush.mouse = false;
}

function draw() {
  background(255);
  var factor = 0.25;

  // Print a heart:
  // fill(181,0,1);
  // noStroke();
  // heart(300,200,200);

  for (var gridX = 0; gridX < img.width; gridX++) {
    for (var gridY = 0; gridY < img.height; gridY++) {
      // grid position + tile size
      var tileWidth = width / img.width;
      var tileHeight = height / img.height;
      var posX = tileWidth * gridX;
      var posY = tileHeight * gridY;

      // get current color
      var c = color(img.get(gridX, gridY));
      // greyscale conversion
      var greyscale = round(red(c) * 0.222 + green(c) * 0.707 + blue(c) * 0.071);

      // greyscale to ellipse area
      fill(181,0,1);
      noStroke();
      var r2 = 1.1284 * sqrt(tileWidth * tileWidth * (1 - greyscale / 255));
      r2 *= factor * 3;
      // console.log(r2);
      r2 = map(r2, 5, 15, 0, 20)

      if(brush.intersectsHeart(posX, posY)) {
        // this only adds coordinates for a heart if it doesn't exist already:
        if (_.findWhere(hearts, new Hearts(posX, posY, r2)) == null) {
          hearts.push(new Hearts(posX, posY, r2));
        }
      }

    }
  }

  // loop through all the hearts to paint them all:
  for (let i = 0; i < hearts.length; i++) {
    heart(hearts[i].x, hearts[i].y, hearts[i].z);
    hearts.mX <- mouseX;
    hearts.mY <- mouseY;
  }
  // this moves the brush automatically
  brush.move();

  brush.show();
}

/// function to draw a heart:
function heart(x, y, size) {
  beginShape();
  vertex(x, y);
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
  endShape(CLOSE);
}

class Hearts {
  constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
}

// brush class
class Brush {
  constructor(rad, increm) {
    this.pos = createVector(-100,-100);
    // add velocity vector
    //this.vel = createVector(1, -1);
    // this.imgHeight = imgHeight;
    // this.imgWidth = imgWidth;
    this.rad = rad;
    // this.heartsX = [];
    // this.heartsY = [];
    // this.heartsZ = [];
    this.increm = increm;
    this.mouse = false;
    this.mX;
    this.mY;
  }

  move() {
    if (this.mouse) {
      this.pos.x = this.mX;
      this.pos.y = this.mY;
    } else {
      noiseDetail(2,0.9);
      this.pos.x = map(noise(xoff1), 0, 1, 0, width);
      this.pos.y = map(noise(xoff2), 0, 1, 0, height);

      //console.log(this.pos.x);
      xoff1 += this.increm;
      xoff2 += this.increm;
    }
  }

  intersectsHeart(gridX, gridY) {
    let d = dist(this.pos.x, this.pos.y, gridX, gridY);
    return d < this.rad;
  }

  show() {
    stroke(181, 0, 1, 255);
    strokeWeight(3);
    fill(192, 70, 63, 200);
    //ellipse(this.pos.x, this.pos.y, this.rad+20);
    heart(this.pos.x, this.pos.y, this.rad+20)
  }
}