// ripped/"adapted" from https://www.productchart.com/blog/2017-12-19-images

var pairs = document.querySelectorAll('.pair');
for (var i = 0; i < pairs.length; i++) {
  var image = pairs[i].querySelector('img');
  if (image.complete && image.src) {
    doThisPair(pairs[i]);
  } else {
    image.addEventListener("load", e => doThisPair(e.target.parentNode));
  }
}

function doThisPair(pair) {
  var image = pair.querySelector('img');
  var canvas = pair.querySelector('canvas');
  transform(image, canvas);
}

function transform(image,canvas) {
  var w = image.naturalWidth;
  var h = image.naturalHeight;

  // Scale to width 800:
  w = 800;
  h = Math.floor(h/image.naturalWidth*w);

  image.width=w;
  image.height=h;
  image.style.height=h+"px";

  canvas.width =w;
  canvas.height=h;
  canvas.style.height=h+"px";

  ctx = canvas.getContext('2d');
  ctx.drawImage(image,0,0,w,h);
  dataIn =ctx.getImageData(0,0,canvas.width,canvas.height);
  dataOut=ctx.getImageData(0,0,canvas.width,canvas.height);
  dataOut = blankImageData(dataOut)

  // ctx.putImageData(blankImageData(dataOut),0,0);

  var vectors = [],
      pixels = []
  d3.range(dataIn.data.length / 4).forEach(d => {
    var offset = d * 4
    var x = d % dataIn.width
    var y = Math.floor(d / dataIn.width)
    var r = dataIn.data[offset],
        b = dataIn.data[offset+1],
        g = dataIn.data[offset+2]
    var hue = d3.hsl(`rgb(${r},${g},${b})`).h / 360 * dataIn.width
    vectors.push($V([x,y,hue]))
    pixels.push([r,g,b])
  })

  var axis1 = $L($V([1,0,0]), $V([0,1,0]))
  // var axis2 = $L($V([0,1,0]), $V([1,0,0]))
  // var axis3 = $L($V([0,0,0]), $V([0,1,1]))
  // var axis4 = $L($V([0,1,0]), $V([0,1,1]))

  // debugger

  // vectors = vectors.map(v => v.rotate(Math.PI*1.5, axis1))
  drawVectors()

  setTimeout(() => {
    d3.timer(() => {
      vectors = vectors.map(v => v.rotate(Math.PI*0.01, axis1))
      drawVectors()
    })
  }, 1000)

  function drawVectors() {

    blankImageData(dataOut)

    vectors.forEach((v,i) => {
      var x = v.elements[0],
          y = v.elements[1],
          brightness = v.elements[2] / dataIn.width * 360,
          offset = Math.round(y * dataOut.width + x) * 4;

      dataOut.data[offset] = pixels[i][0]
      dataOut.data[offset + 1] = pixels[i][2]
      dataOut.data[offset + 2] = pixels[i][1]
    })

    ctx.putImageData(dataOut,0,0);
  }

}


function blankImageData(data) {
  for (x=0;x<data.width;x++) {
    for (y=0;y<data.width;y++) {
      var offset=(y*data.width + x)*4;
      data.data[offset]  =0;
      data.data[offset+1]=0;
      data.data[offset+2]=0;
      data.data[offset+3]=255;
    }
  }
  return data
}


// unused from https://www.productchart.com/blog/2017-12-19-images
// weirdly, i haven't quite recreated it, i think my scaling/fuzzing's a bit off
// "if (rest>Math.random()) ix++;" is a sorta weird clever trick

// for (x=0;x<canvas.width;x++) {
//   for (y=0;y<canvas.height;y++) {
//     var offset=(y*dataOut.width + x)*4;
//     r=dataIn.data[offset]/256/3;
//     g=dataIn.data[offset+1]/256/3;
//     b=dataIn.data[offset+2]/256/3;
//     var rx=(r+g+b)*canvas.width;
//     var ix=Math.floor(rx);
//     rest=rx-ix;
//     if (rest>Math.random()) ix++;
//     var offset=(y*dataOut.width + ix)*4;
//     var col=Math.round(x/canvas.width*256);
//     col=(dataOut.data[offset]+col)/2;
//
//     dataOut.data[offset]=col;
//     dataOut.data[offset+1]=col;
//     dataOut.data[offset+2]=col;
//   }
// }
//
// ctx.putImageData(dataOut,0,0);