let s = 7;

let im = [];

let cs = [

  "#e0e0e0",

  "#ff0000",

  "#000000",

  "#ffffff",

  "#ffdd00",

  "#8bbb81",

  "#c0c0c0",

  "#e4dbc5",

  "#552c2a",

];

​

function setup() {

  print (deviceOrientation);

  createCanvas(350, 400);

  pixelDensity(1);

  c = 0;

  for (i = 0; i < 44 * 30; i++) im[i] = -1;

}

​

function draw() {

  background(cs[0]);

  randomSeed(0);

  for (i = 0; i < width * height; i = i + random(1000)) {

    fill(64 + random(64));

    noStroke();

    if (random(10) < 2) ellipse(i % width, i / height, random(5), random(3));

  }

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

    strokeWeight(0.5);

    stroke(0);

    if (i == c) {

      strokeWeight(3);

      stroke(255);

    }

    fill(cs[i + 1]);

    rect(5, 5 + 30 * i, 20, 20);

    fill(128);

    strokeWeight(0);

    textAlign("right", "bottom");

    textFont("Helvetica");

    textSize(14);

    text("storkify", width - 5, height - 5);

    strokeWeight(0.5);

  }

  if (isDrawingArea()) {

    noFill();

    stroke("white");

    for (x = 0; x < 43; x++)

      for (y = 0; y <= 30; y++)

        rect(width / 10 + x * s, height / 10 + y * s, s, s);

    stroke("red");

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    rect(width / 10 + xm * s, height / 10 + ym * s, s, s);

  }

  for (i = 0; i < 44 * 30; i++)

    if (im[i] != -1) {

      stroke("gray");

      fill(cs[im[floor(i / 43) * 43 + (i % 43)]]);

      rect(width / 10 + (i % 43) * s, height / 10 + floor(i / 43) * s, s, s, 1);

    }

}

​

function mousePressed() {

  if (isDrawingArea()) {

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    cc = im[ym * 43 + xm];

    im[ym * 43 + xm] = cc == c + 1 ? -1 : c + 1;

  } else if (isColorTilesArea()) {

    c = floor(mouseY / (height / 16));

  }

}

function mouseDragged() {

  if (isDrawingArea()) {

    xm = floor((mouseX - width / 10) / s);

    ym = floor((mouseY - height / 10) / s);

    cc = im[ym * 43 + xm];

    im[ym * 43 + xm] = c + 1;

  }

}

​

function isDrawingArea() {

  return (

    mouseX > width / 10 &&

    mouseX < (9 * width) / 10 &&

    mouseY > height / 10 &&

    mouseY < (9 * height) / 10

  );

}

​

function isColorTilesArea() {

  return mouseX < width / 10 && mouseY < height / 2;

}

​