​

let brightnessFactor = 0;

let exposureFactor = 1.0;

​

let blockSize = 7;

let n = 0;

let q = 50;

​

let aspectRatio = 4 / 3;

let lockStatus = true;

let lockIndicatorX = 10;

let lockIndicatorY = 10;

let lockIndicatorWidth = 20;

let lockIndicatorHeight = 20;

​

let ycircle = 274;

​

let arrowX = 20;

let arrowY = 20;

​

let abx = 20;

let aby = 20;

​

let lastModifiedRectIndex = -1;

​

let dragging = false;

let selectedRect = null;

let selectedQuadrantIndex = -1;

let lastKnownOrientation = "";

​

let lockVisible = true;

(function setDefaultOptions() {

  P5Capture.setDefaultOptions({

    disableUi: true,

    format: "gif",

    framerate: 15,

    quality: 1,

    width: arrowX,

  });

})();

​

let useFrontCamera = false;

let mirrorImage = false;

let m = 1;

​

let uiX = 20;

let uiX2 = 20;

let uiY = 20;

let offsetX1 = 20;

let offsetX2 = 20;

let offsetX3 = 20;

let offsetX4 = 20;

let offsetX5 = 20;

let offsetX6 = 20;

let offsetX7 = 20;

let offsetY1 = 20;

let offsetY2 = 20;

let offsetY3 = 20;

let offsetY4 = 20;

let offsetY5 = 20;

let offsetY6 = 20;

let offsetY7 = 20;

​

let cameraConstraints = {

  video: { facingMode: useFrontCamera ? "user" : "environment" },

  audio: false,

};

​

let cols1 = ["#00313d", "#ff6c72", "#ffcb8d", "#f1f2d7"];

let cols2 = ["#000000", "#606060", "#B0B0B0", "#FFF8FF"];

let cols3 = ["#3F1820", "#307070", "#FFB88F", "#FFF8FF"];

let cols4 = ["#3F383F", "#1F48AF", "#80C86F", "#EFF8D0"];

​

let colsRects = [

  {

    x: arrowX * 30.6,

    y: arrowY * 26.5,

    w: arrowX * 1.6,

    h: arrowX * 1.6,

    colors: cols1,

  },

  {

    x: arrowX * 32.4,

    y: arrowY * 26.5,

    w: arrowX * 1.6,

    h: arrowX * 1.6,

    colors: cols2,

  },

  {

    x: arrowX * 34.2,

    y: arrowY * 26.5,

    w: arrowX * 1.6,

    h: arrowX * 1.6,

    colors: cols3,

  },

  {

    x: arrowX * 36,

    y: arrowY * 26.5,

    w: 30,

    h: 30,

    colors: cols4,

  },

];

​

let currentColors = cols1.map((hex) => hexToRgb(hex));

​

class HideUI {

  constructor() {

    this.isVisible = false;

    this.buttonVisible = true;

    this.buttonX = windowWidth / 1.063;

    this.buttonY = windowHeight / 1.165;

    this.buttonWidth = arrowX / 20;

    this.buttonHeight = arrowY / 40;

  }

​

  drawButton() {

    if (!this.buttonVisible) return;

    push();

    fill(0);

    stroke(0);

    rect(this.buttonX, this.buttonY, this.buttonWidth, this.buttonHeight, 5);

    fill(255);

    noStroke();

    textSize(30);

    textAlign(CENTER, CENTER);

    text(

      "",

      this.buttonX + this.buttonWidth / 2,

      this.buttonY + this.buttonHeight / 2

    );

    pop();

  }

​

  toggleUI() {

    this.isVisible = !this.isVisible;

  }

​

  checkMousePressed() {

    if (

      mouseX >= this.buttonX &&

      mouseX <= this.buttonX + this.buttonWidth &&

      mouseY >= this.buttonY &&

      mouseY <= this.buttonY + this.buttonHeight

    ) {

      this.toggleUI();

    }

  }

​

  manageUI() {

    if (this.isVisible) {

      this.drawUIElements();

    }

    this.drawButton();

  }

​

  drawUIElements() {

    rects();

    lockDraw();

    sizeSlider();

    drawArrows();

    arrowButtons.draw();

    stroke(0);

    fill(255);

    textSize(uiX / 30);

    text(blockSize, captureX + arrowX / 19, captureY + offsetY6 / 1.36);

    text(

      brightnessFactor,

      captureX + offsetX6 / 15,

      captureY + offsetY7 / 1.16

    );

    text(exposureFactor, captureX + offsetX7 / 7.5, captureY + offsetY7 / 1.16);

  }

}

​

class CameraSwapButton {

  constructor(x, y, width, height, label, texts) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.label = label;

    this.texts = texts;

    this.isVisible = true;

  }

​

  drawButton() {

    if (!this.isVisible) return;

    push();

    fill(0);

    stroke(0);

    rect(this.x, this.y, this.width, this.height, 5);

    fill(255);

    noStroke();

    textSize(this.texts);

    textAlign(CENTER, CENTER);

    text(this.label, this.x + this.width / 2, this.y + this.height / 2);

    pop();

  }

​

  checkMousePressed() {

    if (

      mouseX >= this.x &&

      mouseX <= this.x + this.width &&

      mouseY >= this.y &&

      mouseY <= this.y + this.height

    ) {

      swapCamera();

    }

  }

  updatePosition(x, y, width, height) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

  }

}

​

class ScreenshotButton {

  constructor(x, y, width, height, label, texts) {

    this.buttonWidth = windowWidth / 15;

    this.buttonHeight = windowHeight / 12;

    this.rounding = 10;

​

    this.isVisible = true;

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.label = label;

    this.texts = texts;

  }

​

  drawButton() {

    if (!this.isVisible) return;

​

    push();

    fill(0);

    stroke(0);

    rect(this.x, this.y, this.width, this.height, this.rounding);

​

    fill(255);

​

    textSize(this.texts);

    textAlign(CENTER, CENTER);

    textFont("Courier New");

    noStroke();

    pop();

  }

​

  checkMousePressed() {

    if (!this.isVisible) return;

​

    if (

      mouseX >= this.x &&

      mouseX <= this.x + this.buttonWidth &&

      mouseY >= this.y &&

      mouseY <= this.y + this.buttonHeight

    ) {

      this.takeScreenshot();

    }

  }

​

  takeScreenshot() {

    this.isVisible = false;

    videoRecordButton.isVisible = false;

    cameraSwapButton.isVisible = false;

    hideUIButton.isVisible = false;

    hideUIButton.buttonVisible = false;

    lockVisible = false;

    draw();

    setTimeout(() => {

      saveCanvas("screenshot", "png");

    }, 100);

  }

}

​

class VideoRecordButton {

  constructor(x, y, width, height, label, texts) {

    this.buttonWidth = windowWidth / 15;

    this.buttonHeight = windowHeight / 12;

    this.rounding = 10;

​

    this.x = x;

    this.y = y;

    this.isRecording = false;

    this.isVisible = true;

​

    this.captureInstance = P5Capture.getInstance();

    this.width = width;

    this.height = height;

    this.label = label;

    this.texts = texts;

  }

​

  drawButton(g) {

    if (!this.isVisible) return;

​

    g.push();

    g.fill(this.isRecording ? color(255, 0, 0) : color(0));

    g.noStroke();

    g.rect(this.x, this.y, this.width, this.height, this.rounding);

​

    g.fill(255);

​

    g.textSize(this.texts);

    g.textAlign(CENTER, CENTER);

    g.textFont("Courier New");

    g.text(

      this.isRecording ? "" : "",

      this.x + this.width / 2,

      this.y + this.height / 2

    );

    g.pop();

  }

​

  toggleRecording() {

    this.isRecording = !this.isRecording;

    console.log(this.isRecording);

    if ((this.isRecording = true)) {

      hideUIButton.isVisible = false;

      hideUIButton.buttonVisible = false;

      screenshotButton.isVisible = false;

      cameraSwapButton.isVisible = false;

      videoRecordButton.isVisible = false;

      lockVisible = false;

      draw();

​

      this.captureInstance.start({

        format: "gif",

        framerate: 15,

​

        width: windowWidth,

      });

    }

  }

​

  checkMousePressed() {

    if (this.isVisible == false) {

      if (

        mouseX >= windowWidth - windowWidth &&

        mouseX <= windowWidth &&

        mouseY >= windowHeight - windowHeight &&

        mouseY <= windowHeight

      ) {

        this.isRecording = false;

        this.captureInstance.stop();

​

        setTimeout(() => {

          hideUIButton.isVisible = true;

          lockVisible = true;

          hideUIButton.buttonVisible = true;

          screenshotButton.isVisible = true;

          cameraSwapButton.isVisible = true;

          videoRecordButton.isVisible = true;

        }, 100);

      }

    } else if (this.isVisible == true) {

      if (

        mouseX >= this.x &&

        mouseX <= this.x + this.buttonWidth &&

        mouseY >= this.y &&

        mouseY <= this.y + this.buttonHeight

      ) {

        this.toggleRecording();

      }

    }

  }

}

​

let hideUIButton;

let cameraSwapButton;

let screenshotButton;

let videoRecordButton;

let arrowButtons;

let uiLayer;

let button;

let xalpha = 0;

let newWidth, newHeight;

let orientationPermissionRequested = false;

​

function preload() {

  font = loadFont("pixel.ttf");

}

​

function hexToRgb(hex) {

  let r = parseInt(hex.slice(1, 3), 16);

  let g = parseInt(hex.slice(3, 5), 16);

  let b = parseInt(hex.slice(5, 7), 16);

  return [r, g, b];

}

​

let color1 = hexToRgb("#FFB88F");

let color2 = hexToRgb("#80C86F");

let color3 = hexToRgb("#B0B0B0");

let color4 = hexToRgb("#ff6c72");

​

let marginBgColor = "#000000";

​

function setup() {

  hideUIButton = new HideUI();

  let cnv = createCanvas(windowWidth, windowHeight);

  uiLayer = createGraphics(windowWidth, windowHeight);

  background(marginBgColor);

  startCapture();

  pixelDensity(1);

  frameRate(15);

  exposureFactor = 1.0;

  strokeCap(SQUARE);

  strokeWeight(1);

  textFont(font);

  textSize(20);

  textAlign(CENTER, CENTER);

  cameraSwapButton = new CameraSwapButton(

    windowWidth / 1.18,

    windowHeight / 75,

    arrowX / 24,

    arrowY / 24,

    "",

    20

  );

  screenshotButton = new ScreenshotButton(

    windowWidth / 1.1,

    windowHeight / 20,

    0,

    0,

    30

  );

  videoRecordButton = new VideoRecordButton(

    windowWidth / 1.1,

    windowHeight / 7.5,

    0,

    0,

    40

  );

  arrowButtons = new ArrowButtons();

  windowResized();

​

  button = createButton("Orientation Permission Required");

  button.mousePressed(requestOrientationPermission);

  button.position(-windowWidth / 2 - 90, windowHeight / 2);

​

  if (deviceOrientation === "landscape") {

    m = -1;

  } else if (deviceOrientation === "portrait") {

    m = 1;

  }

}

function drawUIElements() {

  uiLayer.clear();

  videoRecordButton.drawButton(uiLayer);

}

function startCapture() {

  if (capture) {

    capture.remove();

  }

  capture = createCapture(cameraConstraints, function (stream) {

    if (!track) {

      console.error("No video track found");

      return;

    }

    let settings = track.getSettings();

​

    aspectRatio = settings.aspectRatio || capture.width / capture.height;

​

    windowResized();

  });

  capture.size(windowWidth, windowHeight);

  capture.hide();

}

​

function requestOrientationPermission() {

  if (typeof DeviceOrientationEvent.requestPermission === "function") {

    DeviceOrientationEvent.requestPermission()

      .then((permissionState) => {

        if (permissionState === "granted") {

          window.addEventListener(

            "deviceorientation",

            handleOrientation,

            false

          );

          hideButton();

        } else {

          console.error("Permission not granted for DeviceOrientation");

        }

      })

      .catch(console.error);

  } else {

    window.addEventListener("deviceorientation", handleOrientation, false);

    hideButton();

  }

  orientationPermissionRequested = true;

}

​

function hideButton() {

  button.hide();

}

​

function handleOrientation(event) {

  xalpha = event.alpha;

}

​

function orientationUpdate() {

  if (deviceOrientation !== lastKnownOrientation) {

    windowResized();

  }

}

​

function swapCamera() {

  useFrontCamera = !useFrontCamera;

  if (!useFrontCamera) {

    m = 1;

  } else {

    m = -1;

  }

​

  cameraConstraints.video.facingMode = useFrontCamera ? "user" : "environment";

  startCapture();

  windowResized();

  draw();

}

​

function windowResized() {

  windowWidth = window.innerWidth;

  windowHeight = window.innerHeight;

​

  console.log(aspectRatio);

​

  if (deviceOrientation == "portrait") {

    newWidth = windowWidth;

    newHeight = windowWidth * (4 / 3);

  } else if (deviceOrientation == "landscape") {

    if (windowHeight * aspectRatio <= windowWidth) {

      newHeight = windowHeight;

      newWidth = windowHeight * aspectRatio;

    } else {

      newWidth = windowWidth;

      newHeight = windowWidth / aspectRatio;

    }

  }

​

  resizeCanvas(windowWidth, windowHeight);

  capture.size(newWidth, newHeight);

​

  captureX = (windowWidth - newWidth) / 2;

  captureY = (windowHeight - newHeight) / 2;

​

  arrowX = newWidth;

  arrowY = newHeight;

​

  uiX = newWidth;

  uiX2 = newWidth;

  uiY = newHeight;

  offsetX1 = newWidth;

  offsetX2 = newWidth;

  offsetX3 = newWidth;

  offsetX4 = newWidth;

  offsetX5 = newWidth;

  offsetX6 = newWidth;

  offsetX7 = newWidth;

  offsetY1 = newHeight;

  offsetY2 = newHeight;

  offsetY3 = newHeight;

  offsetY4 = newHeight;

  offsetY5 = newHeight;

  offsetY6 = newHeight;

  offsetY7 = newHeight;

​

  let isMobile = windowWidth < 800;

​

  if (isMobile && deviceOrientation === "portrait") {

    uiX *= 2;

    uiX2 *= 5;

    uiY *= 2;

    offsetX1 *= 0.74;

    offsetX2 *= 0.82;

    offsetX3 *= 0.89;

    offsetX4 *= 0.95;

    offsetX5 *= 1.23;

    offsetX6 *= 0.95;

    offsetX7 *= 1.23;

    offsetY1 *= 1.13;

    offsetY2 *= 1.05;

    offsetY3 *= 1.3;

    offsetY4 *= 0.7;

    offsetY5 *= 1.13;

    offsetY6 *= 1.05;

    offsetY7 *= 1.13;

  } else if (isMobile && deviceOrientation === "landscape") {

    uiX *= 2;

    uiX2 *= 5;

    uiY *= 2;

    offsetX1 *= 0.74;

    offsetX2 *= 0.82;

    offsetX3 *= 0.89;

    offsetX4 *= 0.95;

    offsetX5 *= 1.23;

    offsetX6 *= 0.95;

    offsetX7 *= 1.23;

    offsetY1 *= 0.9;

    offsetY2 *= 0.78;

    offsetY3 *= 1.6;

    offsetY4 *= 1.2;

    offsetY5 *= 0.95;

    offsetY6 *= 0.04;

    offsetY7 *= 0.88;

  } else {

    offsetY1 *= 0.995;

    offsetX6 *= 0.86;

    offsetX7 *= 0.92;

    offsetY5 *= 0.995;

    offsetY7 *= 0.995;

  }

​

  colsRects = [

    {

      x: captureX + offsetX1 / 1.272,

      y: captureY + offsetY1 / 1.09,

      w: uiX / 21,

      h: uiX / 21,

      colors: cols1,

    },

    {

      x: captureX + offsetX2 / 1.192,

      y: captureY + offsetY1 / 1.09,

      w: uiX / 21,

      h: uiX / 21,

      colors: cols2,

    },

    {

      x: captureX + offsetX3 / 1.122,

      y: captureY + offsetY1 / 1.09,

      w: uiX / 21,

      h: uiX / 21,

      colors: cols3,

    },

    {

      x: captureX + offsetX4 / 1.06,

      y: captureY + offsetY1 / 1.09,

      w: uiX / 21,

      h: uiX / 21,

      colors: cols4,

    },

  ];

​

  if (deviceOrientation !== lastKnownOrientation) {

    if (deviceOrientation === "landscape") {

      ycircle = newHeight / 1.55;

    } else if (deviceOrientation === "portrait") {

      ycircle = newHeight / 1.3;

    }

​

    lastKnownOrientation = deviceOrientation;

  } else {

    if (deviceOrientation === "landscape") {

      ycircle = newHeight / 1.55;

    } else if (deviceOrientation === "portrait") {

      ycircle = newHeight / 1.3;

    }

  }

​

  //sizeSlider();

​

  abx = arrowX;

  aby = arrowY;

​

}

​

let hasRandomized = false;

​

function randomize() {

    blockSize = round(random(2, 25), 0);

    brightnessFactor = round(random(-10, 30), 0);

    exposureFactor = round(random(0.4, 1), 1);

    selectedRect = round(random(3), 0);

    for (let rectInfo of colsRects) {

        currentColors = colsRects[selectedRect].colors.map((hex) =>

        hexToRgb(hex)

        );

    }

    console.log(exposureFactor);

    console.log(brightnessFactor);

    console.log(blockSize);

    console.log(selectedRect);

    //hasRandomized = true; // Set the flag to true after randomization

}

​

function draw() {

    strokeWeight(1);

    background(currentColors[1]);

    let minu = minute();

    let s = second();

    if (s % 5 == 0 && !hasRandomized) {

      randomize();

    } else if (s % 5 != 0) {

      hasRandomized = false; // Reset the flag when not in the target second

    }

  if (capture.width > 0 && capture.height > 0) {

    capture.loadPixels();

  }

  let w = capture.width;

  let h = capture.height;

  let blocksX = Math.ceil(w / blockSize);

  let blocksY = Math.ceil(h / blockSize);

​

  let isMobile = windowWidth < 800;

​

​

  push();

  if (m === -1) {

    translate(width, 0);

  } else {

    translate(0, 0);

  }

  scale(m, 1);

​

  for (let by = 0; by < blocksY; by++) {

    for (let bx = 0; bx < blocksX; bx++) {

      grayscaleBlock(bx * blockSize, by * blockSize, blockSize, blockSize);

    }

  }

​

  capture.updatePixels();

  image(capture, captureX, captureY);

  pop();

  stroke(1);

​

  textSize(20);

  stroke(1);

  fill(255);

​

  orientationUpdate();

​

}

​

function grayscaleBlock(x, y, w, h) {

  let i = (x + y * capture.width) * 4;

  let sum = 0;

  let count = 0;

​

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      let r = capture.pixels[idx];

      let g = capture.pixels[idx + 1];

      let b = capture.pixels[idx + 2];

      let avg = (r + g + b) / 3;

      sum += avg;

      count++;

    }

  }

​

  let blockAvg = Math.floor(sum / count);

​

  blockAvg = blockAvg + brightnessFactor;

  blockAvg = constrain(blockAvg, 0, 255);

​

  let color;

  if (blockAvg < 64) {

    color = currentColors[0];

  } else if (blockAvg < 128) {

    color = currentColors[1];

  } else if (blockAvg < 192) {

    color = currentColors[2];

  } else {

    color = currentColors[3];

  }

​

  let adjustedColor = adjustExposure(color, exposureFactor);

  for (let by = 0; by < h; by++) {

    for (let bx = 0; bx < w; bx++) {

      let idx = i + (bx + by * capture.width) * 4;

      capture.pixels[idx] = adjustedColor[0];

      capture.pixels[idx + 1] = adjustedColor[1];

      capture.pixels[idx + 2] = adjustedColor[2];

    }

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    brightnessFactor += 10;

  } else if (keyCode === DOWN_ARROW) {

    brightnessFactor -= 10;

  } else if (keyCode === RIGHT_ARROW) {

    exposureFactor += 0.1;

    exposureFactor = round(constrain(exposureFactor, 0.1, 3), 1);

  } else if (keyCode === LEFT_ARROW) {

    exposureFactor -= 0.1;

    exposureFactor = round(constrain(exposureFactor, 0.1, 3), 1);

  }

  brightnessFactor = constrain(brightnessFactor, -255, 255);

}

​

function adjustExposure(color, exposureFactor) {

  if (!Array.isArray(color)) {

    console.error("Invalid color input passed to adjustExposure:", color);

    return [0, 0, 0];

  }

​

  return color.map((c) => constrain(Math.floor(c * exposureFactor), 0, 255));

}

​

function drawArrows() {

  noFill();

  strokeWeight(arrowX / 300);

  circle(captureX + arrowX / 20, captureY + offsetY2 / 7, uiX / 60);

  strokeWeight(1);

​

  noStroke();

  strokeWeight(1);

}

​

function mousePressed() {

  hideUIButton.checkMousePressed();

  cameraSwapButton.checkMousePressed();

  screenshotButton.checkMousePressed();

  videoRecordButton.checkMousePressed();

  arrowButtons.checkMousePressed();

​

  if (hideUIButton.isVisible) {

    for (let rectInfo of colsRects) {

      if (

        mouseX >= rectInfo.x &&

        mouseX <= rectInfo.x + rectInfo.w &&

        mouseY >= rectInfo.y &&

        mouseY <= rectInfo.y + rectInfo.h

      ) {

        currentColors = rectInfo.colors.map((hex) => hexToRgb(hex));

        break;

      }

    }

    if (

      mouseX >= captureX + arrowX / 36 &&

      mouseX <= captureX + arrowX / 6 &&

      mouseY >= captureY + arrowY / 5.5 &&

      mouseY <= captureY + arrowY / 1.4

    ) {

      ycircle = mouseY;

    }

​

    if (

      mouseX >= captureX + arrowX / 36 &&

      mouseX <= captureX + arrowX / 6 &&

      mouseY >= captureY + arrowY / 8 &&

      mouseY <= captureY + arrowY / 6

    ) {

      if (n == 0) {

        n = 1;

      } else {

        n = 0;

      }

      if (q == 50) {

        q = 10;

      } else {

        q = 50;

      }

      fill(255);

      circle(captureX + arrowX / 20, captureY + arrowY / 7, uiX / 55);

    }

​

    colsRects.forEach((rect, rectIndex) => {

      let quadrantWidth = rect.w / 2;

      let quadrantHeight = rect.h / 2;

      if (

        mouseX > rect.x &&

        mouseX < rect.x + rect.w &&

        mouseY > rect.y &&

        mouseY < rect.y + rect.h

      ) {

        let quadrantX = mouseX < rect.x + quadrantWidth ? 0 : 1;

        let quadrantY = mouseY < rect.y + quadrantHeight ? 0 : 1;

        selectedQuadrantIndex = quadrantY * 2 + quadrantX;

        selectedRect = rect;

        lastModifiedRectIndex = rectIndex;

        dragging = true;

      }

    });

    if (

      mouseX >= lockIndicatorX &&

      mouseX <= lockIndicatorX + lockIndicatorWidth &&

      mouseY >= lockIndicatorY &&

      mouseY <= lockIndicatorY + lockIndicatorHeight

    ) {

      lockStatus = !lockStatus;

    }

    brightnessFactor = constrain(brightnessFactor, -255, 255);

​

    exposureFactor = constrain(exposureFactor, 0.1, 3);

​

    let buttonWidth = windowWidth / 2;

    let buttonHeight = windowHeight / 2;

  }

}

​

function sizeSlider() {

  strokeWeight(uiX2 / 150);

  strokeCap(ROUND);

  stroke(0);

  line(

    captureX + arrowX / 20,

    captureY + arrowY / 5.5,

    captureX + arrowX / 20,

    captureY + arrowY / 1.4

  );

  fill(255);

  stroke(0);

  strokeWeight(uiX / 300);

  circle(captureX + arrowX / 20, ycircle, uiX2 / 80);

  stroke(0);

  strokeWeight(1);

}

​

function rects() {

  for (let rectInfo of colsRects) {

    let quadWidth = rectInfo.w / 2;

    let quadHeight = rectInfo.h / 2;

​

    for (let i = 0; i < rectInfo.colors.length; i++) {

      let color = hexToRgb(rectInfo.colors[i]);

      fill(color[0], color[1], color[2]);

​

      let x = rectInfo.x + (i % 2) * quadWidth;

      let y = rectInfo.y + Math.floor(i / 2) * quadHeight;

​

      noStroke();

      rect(x, y, quadWidth, quadHeight);

    }

  }

}

​

function mouseDragged() {

  console.log(!lockStatus);

  if (!lockStatus) {

    if (!dragging || selectedRect === null) return;

    let grayscale = Math.floor(map(mouseX, 0, width, 0, 255));