let bg, paintedbg, scales;

let id;

let seq=[];

let level, player; 

​

function newSeq(){

  seq=[];

  for (let i=0;i<level ;i++)

    seq[i]=floor(random(0,12.1));

}

function preload() {

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

    img[i] = loadImage("data/id_" + i + ".png");

  }

  bg = loadImage("data/empty.png");

  scales = loadImage("data/ids.png");

}

​

function setup() {

  pixelDensity(1);

  let w = bg.width;

  let h = bg.height;

  //createCanvas(windowWidth, windowHeight);

  createCanvas(w, h);

  paintedbg = createGraphics(w, h);

  ids = createGraphics(w, h);

  ids.image(scales, 0, 0);

  frameRate(10);

  prePaintAll();

  id=-1;

  level=1;

  player=0;

  newSeq();

  print(seq);

}

​

function draw() {

  background("rgb(224,224,224)");

  debug();

  image(paintedbg, 2, 0);

  progressBar(1);  

  highlightID(id);

  image(bg, 0, 0);

}

function prePaintAll() {

  colorMode(HSB);

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

    paintedbg.tint(

      color(

        97 + randomGaussian(0, 1),

        32 + randomGaussian(17, 6),

        46 + randomGaussian(0, 6),

        0.8

      )

    );

    paintedbg.image(img[i], 0, 0);

  }

  noTint();

}

function progressBar(v) {

  for (let i = 0; i < v; i++) highlight("rgba(255,0,0,0.3)", img[i]);

}

function highlightID(id) {

  if (id >= 25 && id <= 37) {

    highlight("#FFEB3BB7", img[id]);

  }

}

function highlight(col, im) {

  colorMode(HSB);

  tint(col);

  image(im, 2, 0);

  noTint();

}

function debug() {

  text(id, 0, 12);

}

function mousePressed() {

  let c = ids.get(mouseX, mouseY);

  id = c[0];

}

function mouseReleased() {

  id = -1;

}

​

function touchStarted() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

document.ontouchmove = function (event) {

  event.preventDefault();

};

​