"https://script.google.com/macros/s/AKfycbxWqQrI5R_CKUyag_boEoRqmDkz1e3W2mtI0uzMXDmpinv6M-SSpD0iRZQgWqBvbY1PCA/exec";

​

const dataURL =

  "https://docs.google.com/spreadsheets/d/e/2PACX-1vRJuxzO3Rce5ExXK51pZt85dCTbm5dpLGoKTsWqmn2Rywl8gb4sIE5VtiDBEwS5u3Kogn-OCnbhS3sS/pub?gid=0&single=true&output=csv";

​

let table;

let cam;

let button;

let alphaColor = 50;

let showCam;

let xPositions = [];

let yPositions = [];

let reds = [];

let greens = [];

let blues = [];

​

function preload() {

  table = loadTable(dataURL, "csv", "header");

}

​

function setup() {

  createCanvas(500, 500);

  background(175);

  cam = createCapture(VIDEO);

  cam.size(500, 500);

  cam.hide();

  showCam = true;

​

  button = createButton("cheese!");

  button.position(width / 2 - 16, height - 24);

  button.mousePressed(freezeImage);

}

​

function draw() {

  if (showCam) {

    background(255);

    noStroke();

    // image(cam, 0, 0);

    cam.loadPixels();

    for (let x = 0; x < width; x += 50) {

      for (let y = 0; y < height; y += 50) {

        let index = (x + y * width) * 4;

​

        let r = cam.pixels[index];

        let g = cam.pixels[index + 1];

        let b = cam.pixels[index + 2];

        let a = cam.pixels[index + 3];

​

        let col = color(r, g, b, a);

        fill(col);

        rect(x, y, 50, 50);

      }

    }

  } else {

    noLoop();

  }

  cam.updatePixels();

}

​

function freezeImage() {

  showCam = false;

  cam.stop();

  cam.loadPixels();

​

    for (let x = 0; x < width; x += 50) {

      for (let y = 0; y < height; y += 50) {

        let index = (x + y * width) * 4;

​

        let r = cam.pixels[index];

        let g = cam.pixels[index + 1];

        let b = cam.pixels[index + 2];

        let a = alphaColor;

​

        let col = color(r, g, b, a);

        fill(col);

        rect(x, y, 50, 50);

        console.log(x, y, r, g, b);

​

        submitForm({ x: int(x), y: int(y), r: int(r), g: int(g), b: int(b) });

        setTimeout( function() {

          console.log("waiting");

        }, 500);

      }

    }

​

  cam.updatePixels();

  cam.remove();

  showPixels();

​

}

​

function showPixels() {

  for (let row = 0; row < table.getRowCount(); row++) {

    let x = table.get(row, 1);

    let y = table.get(row, 2);

    let r = table.get(row, 3);

    let g = table.get(row, 4);

    let b = table.get(row, 5);

​

    let col = color(r, g, b, 20);

    fill(col);

    rect(x, y, 50, 50);

  }

  console.log("after showing pixels?");

}

​

function submitForm(params) {

  let http = new XMLHttpRequest();

  http.open("POST", scriptURL, true);

  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  // go over all keys and values in the object.

  // concat to a single large string

  let qString = "";

  for (const [key, value] of Object.entries(params)) {

    //console.log(`${key}: ${value}`);

    qString += key + "=" + value + "&";

  }

  console.log(qString);

  http.send(qString);

  http.onload = function () {

    console.log(http.responseText);

  };

}

​