let capture;

​

let brightnessFactor = 0;

let exposureFactor = 1.0;

​

let blockSize = 7;

let n = 0;

let q = 50;

// Desired aspect ratio

let aspectRatio = 4 / 3;

let lockStatus = true; // Variable to track the lock status

let lockIndicatorX = 10; // X position of the lock indicator

let lockIndicatorY = 10; // Y position of the lock indicator

let lockIndicatorWidth = 20; // Width of the lock indicator

let lockIndicatorHeight = 20; // Height of the lock indicator

​

let ycircle = 274;

​

let arrowX = 20;

let arrowY = 20;

​

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; // false for rear camera, true for front camera

let mirrorImage = false; 

let m = 1;

​

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 = true; // Default UI visibility

    this.buttonVisible = true;

    this.buttonX = windowWidth / 1.063; // Position the button on the top right corner

    this.buttonY = windowHeight / 1.165;

    this.buttonWidth = arrowX / 20;

    this.buttonHeight = arrowY / 40;

  }

​

  drawButton() {

    if (!this.buttonVisible) return;

    push(); // Start a new drawing state

    fill(0); // Set button color

    stroke(0);

    rect(this.buttonX, this.buttonY, this.buttonWidth, this.buttonHeight, 5); // Draw the button with rounded corners

    fill(255); // Set text color

    noStroke();

    textSize(30);

    textAlign(CENTER, CENTER);

    text(

      "-",

      this.buttonX + this.buttonWidth / 2,

      this.buttonY + this.buttonHeight / 2

    ); // Label the button

    pop(); // Restore original drawing state

  }

​

  toggleUI() {

    this.isVisible = !this.isVisible; // Toggle visibility state

  }

​

  checkMousePressed() {

    // Check if the mouse is within the button bounds and toggle UI visibility

    if (

      mouseX >= this.buttonX &&

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

      mouseY >= this.buttonY &&

      mouseY <= this.buttonY + this.buttonHeight

    ) {

      this.toggleUI();

    }

  }

​

  // Method to call in the draw function to manage UI visibility

  manageUI() {

    if (this.isVisible) {

      this.drawUIElements();

    }

    this.drawButton(); // Always draw the button so it can be interacted with

  }

​

  // Central method to draw all UI elements

  drawUIElements() {

    // Place all UI drawing code here, e.g., drawArrows(), sizeSlider(), etc.

    // This example assumes these functions are defined elsewhere in your code

    rects();

    lockDraw();

    sizeSlider();

    drawArrows();

    stroke(0);

    fill(255);

    textSize(22);

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

    text(brightnessFactor, captureX + arrowX / 19, captureY + arrowY / 1.15);

    text(exposureFactor, captureX + arrowX / 8.5, captureY + arrowY / 1.15);

​

    // Add any other UI elements that need to be shown or hidden

  }

}

​

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); // Set button color

    stroke(0);

    rect(this.x, this.y, this.width, this.height, 5); // Draw the button with rounded corners

    fill(255); // Set text color

    noStroke();

    textSize(this.texts);

    textAlign(CENTER, CENTER);

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

    pop();

  }

​

  checkMousePressed() {

    if (

      mouseX >= this.x &&

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

      mouseY >= this.y &&

      mouseY <= this.y + this.height

    ) {

      swapCamera(); // Call the function to swap the camera

    }

  }

  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) {

    // Adjust these values to change the button's size and position

    this.buttonWidth = windowWidth / 15;

    this.buttonHeight = windowHeight / 12;

    this.rounding = 10; // Rounded corner radius

    // Position the button in the top right corner

    this.isVisible = true; // Initially visible

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.label = label;

    this.texts = texts;

  }

​

  drawButton() {

    if (!this.isVisible) return; // Don't draw if set to invisible

​

    push();

    fill(0); // Black fill

    stroke(0);

    rect(this.x, this.y, this.width, this.height, this.rounding); // Draw the button with rounded corners

    //rect(this.x, this.y, this.buttonWidth, this.buttonHeight, this.rounding);

    fill(255); // White text

​

    textSize(this.texts);

    textAlign(CENTER, CENTER);

    textFont("Courier New");

    text("⌞ ⌝", this.x + this.buttonWidth / 2, this.y + this.buttonHeight / 2);

    noStroke();

    pop();

  }

​

  checkMousePressed() {

    if (!this.isVisible) return; // Don't detect if set to invisible

    // Check if the mouse click is within the button's boundaries

    if (

      mouseX >= this.x &&

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

      mouseY >= this.y &&

      mouseY <= this.y + this.buttonHeight

    ) {

      this.takeScreenshot();

    }

  }

​

  takeScreenshot() {

    hideUIButton.isVisible = false;

    hideUIButton.buttonVisible = false;

    videoRecordButton.isVisible = false;

    cameraSwapButton.isVisible = false;

    lockVisible = false;

    this.isVisible = false; // Temporarily hide the button

    draw(); // Redraw the canvas without the button

    setTimeout(() => {

      saveCanvas("screenshot", "png"); // Take the screenshot

      this.isVisible = true;

      hideUIButton.isVisible = true; // Show the UI again

      hideUIButton.buttonVisible = true;

      cameraSwapButton.isVisible = true;

      lockVisible = true;

      videoRecordButton.isVisible = true;

      draw(); // Redraw the canvas to show the UI again

    }, 50); // Delay to ensure the canvas is updated, adjust time as needed

  }

}

​

class VideoRecordButton {

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

    // Adjust these values to position the button below the ScreenshotButton

    this.buttonWidth = windowWidth / 15;

    this.buttonHeight = windowHeight / 12;

    this.rounding = 10; // Rounded corner radius

    // Position the button below the ScreenshotButton with some padding

    this.x = x; // Same padding from the right edge as ScreenshotButton

    this.y = y; // Below the ScreenshotButton with padding

    this.isRecording = false; // State to track recording status

    this.isVisible = true; // Initially visible

    // Configure the capturer: specify format and framerate

    this.captureInstance = P5Capture.getInstance();

    this.width = width;

    this.height = height;

    this.label = label;

    this.texts = texts;

  }

​

  drawButton(g) {

    if (!this.isVisible) return; // Don't draw if set to invisible

​

    g.push();

    g.fill(this.isRecording ? color(255, 0, 0) : color(0)); // Red fill when recording, black otherwise

    g.noStroke();

    g.rect(this.x, this.y, this.width, this.height, this.rounding); // Draw the button with rounded corners

​

    g.fill(255); // White text for visibility

​

    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(); // Redraw the canvas without the button

​

      // Start recording

      this.captureInstance.start({

        format: "gif", // or other formats like "gif", "mp4", etc.

        framerate: 15, // Example framerate

        // Add more options as needed

        width: windowWidth,

      });

    } 

  }

​

  checkMousePressed() {

    if (this.isVisible == false) {

      if (

        mouseX >= windowWidth - windowWidth &&

        mouseX <= windowWidth &&

        mouseY >= windowHeight - windowHeight &&

        mouseY <= windowHeight

      ) {

        this.isRecording = false;

        this.captureInstance.stop();

      //this.isVisible = true;

      hideUIButton.isVisible = true; // Show the UI again

      lockVisible = true;

      hideUIButton.buttonVisible = true;

      screenshotButton.isVisible = true;

      cameraSwapButton.isVisible = true;

      videoRecordButton.isVisible = true;

      }

    } // if invisible any part of the screen stop recording

    else if (this.isVisible == true) {

      // Check if the mouse click is within the button's boundaries

      if (

        mouseX >= this.x &&

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

        mouseY >= this.y &&

        mouseY <= this.y + this.buttonHeight

      ) {

        this.toggleRecording();

      }

    }

  }

}

​

class ArrowButton {

  constructor(x, y, direction, action) {

    this.x = x;

    this.y = y;

    this.width = 30; // Width of the arrow (adjust as necessary)

    this.height = 20; // Height of the arrow (adjust as necessary)

    this.direction = direction; // 'up' or 'down'

    this.action = action; // Function to execute on click, e.g., a function to increase or decrease a value

  }

​

  draw() {

    push();

    stroke(0);

    fill(255); // White color

    if (this.direction === 'up') {

      triangle(

        this.x, this.y + this.height,

        this.x + this.width / 2, this.y,

        this.x + this.width, this.y + this.height

      );

    } else if (this.direction === 'down') {

      triangle(

        this.x, this.y,

        this.x + this.width / 2, this.y + this.height,

        this.x + this.width, this.y

      );

    }

    pop();

  }

​

  checkMousePressed() {

    if (

      mouseX >= this.x &&

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

      mouseY >= this.y &&

      mouseY <= this.y + this.height

    ) {

      this.action();

    }

  }

}

​

​

​

let hideUIButton;

let cameraSwapButton;

let screenshotButton;

let videoRecordButton;

let arrowButtons;

let uiLayer;

let button;

let xalpha = 0; // Compass direction

let newWidth, newHeight;

let orientationPermissionRequested = false;

​

function preload() {

  font = loadFont("pixel.ttf");

  font2 = 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");

​

function setup() {

  hideUIButton = new HideUI();

  let cnv = createCanvas(windowWidth, windowHeight); // Use window dimensions

  uiLayer = createGraphics(windowWidth, windowHeight);

  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,

    "[o°]",

    20

  );

  screenshotButton = new ScreenshotButton(

    windowWidth / 1.1,

    windowHeight / 20,

    0,

    0,

    30

  );

  videoRecordButton = new VideoRecordButton(

    windowWidth / 1.1,

    windowHeight / 7.5,

    0,

    0,

    40

  );

  windowResized(); 

  arrowButtons = new ArrowButtons();

  button = createButton('Request Orientation Permission');

  button.mousePressed(requestOrientationPermission);

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

}

function drawUIElements() {

  uiLayer.clear(); // Clear previous drawings

  videoRecordButton.drawButton(uiLayer); // Draw the button on the uiLayer

}

function startCapture() {

  if (capture) {

    capture.remove(); // Stop and remove the existing capture if it exists

  }

  capture = createCapture(cameraConstraints, function (stream) {

    // This callback ensures the stream is ready and dimensions are set

    if (!track) {

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

      return;

    }

    let settings = track.getSettings();

    // Calculate the aspect ratio

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

    // Call windowResized to adjust layout based on the new aspect ratio

    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(); // Hide the button after permission is granted

        } else {

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

        }

      })

      .catch(console.error);

  } else {

    // Handle regular non-iOS 13+ devices.

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

    hideButton(); // Hide the button since permission is auto-granted on these devices

  }

  orientationPermissionRequested = true; // Ensure this is set to true here

}

​

function hideButton() {

  button.hide();

}

​

function handleOrientation(event) {

  xalpha = event.alpha;

}

​

function orientationUpdate() {

  if (deviceOrientation !== lastKnownOrientation){

    windowResized();

  }

  }

​

function swapCamera() {

  useFrontCamera = !useFrontCamera; // Toggle the camera type

  if (!useFrontCamera) {

    m = 1;

  } else {

    m = -1;

  }

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

  startCapture(); // Restart the capture with the new constraints

  windowResized();

  draw();

}

​

function windowResized() {

  // Get the window dimensions

  windowWidth = window.innerWidth;

  windowHeight = window.innerHeight;

​

  // Calculate the aspect ratio if not already done

  console.log(aspectRatio);

  // Calculate the new dimensions based on the aspect ratio

​

  if (deviceOrientation == 'portrait') {

    // In portrait mode, you might want to adjust the canvas to be taller than wide

    // Adjust the size based on your specific needs or constraints

    newWidth = windowWidth; // Use full width available

    newHeight = windowWidth * (4 / 3); // Maintain a specific aspect ratio, e.g., 4:3

  }

  else if (deviceOrientation == 'landscape') {

  // Check if scaling by width goes out of bounds

  if (windowHeight * aspectRatio <= windowWidth) {

    newHeight = windowHeight;

    newWidth = windowHeight * aspectRatio;

  } else {

    // Scale by width otherwise

    newWidth = windowWidth;

    newHeight = windowWidth / aspectRatio;

  }

  }

  // Resize the canvas and video capture to match new dimensions

  resizeCanvas(windowWidth, windowHeight); // Keep the canvas full-window

  capture.size(newWidth, newHeight); // Resize capture based on calculated dimensions

​

  // Update elements' positions if necessary

  // Example: Center the capture if it doesn't fill the window

  captureX = (windowWidth - newWidth) / 2; // Calculate X to center capture

  captureY = (windowHeight - newHeight) / 2; // Calculate Y to center capture

​

  arrowX = newWidth;

  arrowY = newHeight;

  colsRects = [

    {

      x: captureX + arrowX / 1.235,

      y: captureY + arrowY / 1.08,

      w: arrowX / 25,

      h: arrowX / 25,

      colors: cols1,

    },

    {

      x: captureX + arrowX / 1.165,

      y: captureY + arrowY / 1.08,

      w: arrowX / 25,

      h: arrowX / 25,

      colors: cols2,

    },

    {

      x: captureX + arrowX / 1.105,

      y: captureY + arrowY / 1.08,

      w: arrowX / 25,

      h: arrowX / 25,

      colors: cols3,

    },

    {

      x: captureX + arrowX / 1.05,

      y: captureY + arrowY / 1.08,

      w: arrowX / 25,

      h: arrowX / 25,

      colors: cols4,

    },

  ];

  if (deviceOrientation !== lastKnownOrientation) {

    // Orientation has changed, handle the change

    if (deviceOrientation === 'landscape') {

      ycircle = captureY + arrowY / 1.55;

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

      ycircle = captureY + arrowY / 1.94;

    }

​

    // Update the last known orientation

    lastKnownOrientation = deviceOrientation;

  }

  else{

    if (deviceOrientation === 'landscape') {

      ycircle = captureY + arrowY / 1.55;

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

      ycircle = captureY + arrowY / 1.94;

    }

  }

​

  sizeSlider();

  hideUIButton.buttonX = captureX + arrowX/1.04; //REDO calculations with capture X and Y

  hideUIButton.buttonY = captureY + arrowY/75;

  hideUIButton.buttonWidth = arrowX / 30;

  hideUIButton.buttonHeight = arrowY / 25;

​

  cameraSwapButton.texts = arrowX / 50;

​

  screenshotButton.x = captureX + arrowX / 1.115; // Update to desired position

  screenshotButton.y = captureY + arrowY / 15; // Update to desired position

  screenshotButton.texts = arrowX / 25;

​

  videoRecordButton.x = captureX + arrowX / 1.1; // Update to desired position

  videoRecordButton.y = captureY + arrowY / 6; // Update to desired position

  videoRecordButton.width = arrowX / 14.5; // Update to desired size

  videoRecordButton.height = arrowY / 12; // Update to desired size

  videoRecordButton.texts = arrowX / 20;

  lockIndicatorX = captureX + arrowX / 1.279; // X position of the lock indicator

  lockIndicatorY = captureY + arrowY / 1.065; // Y position of the lock indicator

  lockIndicatorWidth = arrowX / 55; // Width of the lock indicator

  lockIndicatorHeight = arrowX / 55;

​

  if (cameraSwapButton) {

    cameraSwapButton.updatePosition(

      captureX + arrowX / 1.18,

      captureY + arrowY / 75,

      arrowX / 24,

      arrowY / 24

    );

  }

}

function draw() {

  strokeWeight(1);

  background(0);

  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);

​

  blockSize = round(map(ycircle, arrowY / 5.5, arrowY / 1.4, q, 1), n);

​

  push();

  if (m === -1) {

    translate(width, 0); // Adjust translation to keep content aligned with captureX when flipped

  } else {

    translate(0, 0); // No need to adjust translation when not flipped

  }

  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() 

​

  //devmode

  text(xalpha, captureX+200, captureY+100);

  text(deviceOrientation, captureX+200, captureY + 200);

  text(orientationPermissionRequested, captureX + 200, captureY + 300);

  text(ycircle, captureX+200, captureY+250);

  text(mouseY, captureX+200, captureY+280);

  text(useFrontCamera, captureX+200, captureY+320);

  text(m, captureX+200, captureY+350);

  text(captureY, captureX+200, captureY+380);

​

  screenshotButton.drawButton();

  hideUIButton.manageUI();

  arrowButtons.draw();

  cameraSwapButton.drawButton();

  drawUIElements();

  image(uiLayer, 0, 0);

}

​

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); // Ensure within range

​

  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; // Increase exposure

    exposureFactor = round(constrain(exposureFactor, 0.1, 3), 1); // Example range, adjust as needed

  } else if (keyCode === LEFT_ARROW) {

    exposureFactor -= 0.1; // Decrease exposure

    exposureFactor = round(constrain(exposureFactor, 0.1, 3), 1); // Example range, adjust as needed

  }

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

}

​

function adjustExposure(color, exposureFactor) {

  // Ensure color is an array; if not, attempt to convert or return black on error

  if (!Array.isArray(color)) {

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

    return [0, 0, 0]; // Return black or any default color in case of error

  }

​

  // Adjust each color component by the exposure factor and ensure it's within the valid range

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

}

​

function drawArrows() {

  noFill();

  strokeWeight(2);

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

  strokeWeight(1);

​

  noStroke();

  strokeWeight(1);

}

​

function mousePressed() {

  hideUIButton.checkMousePressed();

  cameraSwapButton.checkMousePressed();

  screenshotButton.checkMousePressed();

  videoRecordButton.checkMousePressed();

  arrowButtons.checkMousePressed();

​

  // Check for color palette selection

  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;

      }

    }

    //slider

    if (

      mouseX >= captureX + arrowX / 22 &&

      mouseX <= captureX + arrowX / 18 &&

      mouseY >= captureY + arrowY / 5.5 &&

      mouseY <= captureY + arrowY / 1.4

    ) {

      ycircle = mouseY;

      }

​

    if (

      mouseX >= captureX + arrowX / 22 &&

      mouseX <= captureX + arrowX / 18 &&

      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, 15);

    }

​

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

        let quadrantWidth = rect.w / 2;

        let quadrantHeight = rect.h / 2;

        // Check if the mouse is within the rectangle

        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; // Store the selected rectangle

            dragging = true; // Set dragging to true

        }

    });

  if (mouseX >= lockIndicatorX && mouseX <= lockIndicatorX + lockIndicatorWidth &&

      mouseY >= lockIndicatorY && mouseY <= lockIndicatorY + lockIndicatorHeight) {

    lockStatus = !lockStatus;

  }

  brightnessFactor = constrain(brightnessFactor, -255, 255); // Ensure the brightnessFactor stays within bounds

​

  exposureFactor = constrain(exposureFactor, 0.1, 3); // Ensure the brightnessFactor stays within bounds

​

  let buttonWidth = windowWidth / 2;  

  let buttonHeight = windowHeight / 2;

}

}

​

​

function sizeSlider() {

  strokeWeight(5);

  strokeCap(ROUND);

  stroke(0);

  line(captureX + arrowX / 20, captureY + arrowY / 5.5, captureX + arrowX / 20, captureY + arrowY / 1.4);

  fill(255);

  circle(captureX + arrowX / 20, ycircle, 12);

  strokeWeight(1);

}

​

function rects() {

  for (let rectInfo of colsRects) {

    // Calculate width and height for each quadrant

    let quadWidth = rectInfo.w / 2;

    let quadHeight = rectInfo.h / 2;

    // Iterate over each color in the rectangle's color palette

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

      let color = hexToRgb(rectInfo.colors[i]); // Convert hex to RGB

      fill(color[0], color[1], color[2]); // Set fill to the current color

      // Calculate the quadrant's x and y position based on the current index

      // (0,0) for top-left, (1,0) for top-right, (0,1) for bottom-left, and (1,1) for bottom-right

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

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

      // Draw the quadrant

      noStroke();

      rect(x, y, quadWidth, quadHeight);

    }

  }

}

​

function mouseDragged() {

  console.log(!lockStatus);

  if (!lockStatus) {

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