// - make it not case sensitive

// - maybe have a sketch that draws markers

// - let them write their own filename

// - give a popup when entering wrong code

// 

// other notes:

// right now the coordinates are written to "outputCoords"

// way at the bottom of the sketch

​

/*

​

CODE CHART PARADIGM V0

​

INPUT: IMAGE

OUTPUT: CODE SAYING WHERE VIEWER WAS LOOKING

​

HOW TO USE:

1. Name your image "Input.jpg"

2. Delete Input.jpg in the Sketch Files (top left)

3. Upload your own version

​

The size of the code chart is automatically adjusted to the size of your image

​

*/

​

​

//Here you can set the spacing, size and deviation of the codes.

const codemargin = 40;

const codesize = 14;

const deviation = 0.5; // how much the codes' positions can deviate, at 0.0 codes are shown in a square grid

​

// REAL CODE STARTS HERE

​

let txt = {

  w: 0,

  y: 0,

  box: 0,

}

​

​

let codeArray = [];

// array of [code, x, y]

let codeChart = [];

let outputCoords = [];

​

// Here you can set how long each phase takes in seconds

const countdownTime = 5;

const imageTime = countdownTime + 1;

const codechartTime = imageTime + 1;

​

// Here you can change th instructions

const explanation1 = 'Look attentively at the image that will appear'

const explanation2 = 'You will see an image for a couple of seconds,'

const explanation3 = 'followed by a chart of codes, each code consists of a letter and two digits (e.g. A23)'

const explanation4 = 'You will be asked to write down the last code you saw.';

const explanation5 = 'Please click the button below to start.';

​

const debrief1 = 'What code did you read?';

const debrief2 = 'Type in the code you remember below (case sensitive)';

​

const submitted1 = 'Coordinates submitted: ';

const submitted2 = 'Thank you!';

​

let imw, imh;

let imgmargin = 0;

let textmargin = 15;

let readyBoolean = false;

let finalBoolean = true;

let submitButton, inputBox;

let time = 0;

let on = false;

let startTime = 0;

​

​

function preload() {

  num = loadImage('CodeChart.jpg');

  imgc = loadImage('Input.jpg');

  //generate codes

  for(i=0;i<26;i++){

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

      if(j<10){

        codeArray.push(String.fromCharCode(65+i) + "0" + j);

      }

      else{

        codeArray.push(String.fromCharCode(65+i) + j);

      }

    }

  }

}

​

function setup() {

  imw = imgc.width;

  imh = imgc.height;

  createCanvas(imw, imh);

  //check how many codes there should be

  const gridx = int(imw / codemargin);

  const gridy = int(imh / codemargin);

  //generate an array with all the codes and their coordinates

  for(i=0;i<gridy;i++){

    for(j=0;j<gridx;j++){

      codeChart.push([codeArray.splice(floor(random() * codeArray.length),1)[0], 

                    codemargin/2 + j * codemargin + floor(random() * codemargin * deviation - codemargin*(deviation/2)),

                    codemargin/2 + i * codemargin + floor(random() * codemargin * deviation) - codemargin*(deviation/2)]);

    }

  }

  startButton = createButton('Start').mousePressed(startCountdown);

  startButton.position(textmargin, 170);

}

​

function draw() {

  background(255, 255, 255);

  textStyle(NORMAL);

  if(on){

    time = millis() - startTime;

  }

  // Phase 1: show explanation

  if (on == false) {

​

    textSize(20);

    text(explanation1, textmargin, 60);

​

    textSize(16);

    text(explanation2, textmargin, 90);

    text(explanation3, textmargin, 110);

    text(explanation4, textmargin, 130);

    text(explanation5, textmargin, 150);

​

  }

  // Phase 2: show countdown

  if (on && time < countdownTime * 1000) {

​

    textSize(200);

    text(countdownTime - Math.floor(time/1000), imw / 2 - 100, textmargin + 250);

​

  }

​

  // Phase 3: show image

  else if (on && time < imageTime * 1000) {

    image(imgc,imgmargin, imgmargin, imw, imh);

  }

​

  // Phase 4: show chart

  else if (on && time < codechartTime * 1000) {

    // image(num, imgmargin, imgmargin, imw, imh);

    background(0);

    fill(150);

    textSize(codesize);

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

      text(codeChart[i][0],codeChart[i][1],codeChart[i][2]);

    }

  }

​

  // Phase 5: data collection

  else if (on && time >= codechartTime * 1000) {

    if(finalBoolean){

      inputBox = createInput();

      inputBox.position(textmargin, 100)

      submitButton = createButton('Submit').mousePressed(submitCode);

      submitButton.position(textmargin + inputBox.width + 5, 100);

      finalBoolean = false;

    }

    fill(0);

    textSize(20);

    text(debrief1, textmargin, textmargin + 50);

​

    textSize(13);

    text(debrief2, textmargin, textmargin + 70);

    if(outputCoords.length > 1){

      text(submitted1 + "X: " + outputCoords[0] + ", Y: " + outputCoords[1], textmargin, 150);

      text(submitted2, textmargin, 170);

    }

  } 

}

​

function startCountdown(){

  startButton.remove();

  on = true;

  startTime = millis();

}

​

function submitCode(){

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

    if(codeChart[i][0] == inputBox.value()){

      outputCoords.push(codeChart[i][1]);

      outputCoords.push(codeChart[i][2]);

      // OUTPUT HERE!!!!

      print(outputCoords);

    }

  }

}