​

let brightnessFactor = 0;

let exposureFactor = 1.0; 

let ycircle = 274;

let blockSize = 7;

let n = 0;

let q = 50;

​

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

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

let cols3 = ["#000000","#606060", "#B0B0B0", "#FFF8FF"]

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

​

let colsRects = [

  { x: 460, y: 415, w: 30, h: 30, colors: cols1 },

  { x: 495, y: 415, w: 30, h: 30, colors: cols2 },

  { x: 530, y: 415, w: 30, h: 30, colors: cols3 },

  { x: 565, y: 415, w: 30, h: 30, colors: cols4 }

];

​

//let currentColors = [cols1[0], cols1[1], cols1[2], cols1[3]];

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

​

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

​

​

function windowResized() {

  if (captureReady) {

    adjustCanvasToAspectRatio();

  }

}

​

function adjustCanvasToAspectRatio() {

  // Determine the best fit for the window while keeping the camera aspect ratio

  let windowRatio = windowWidth / windowHeight;

  let cameraRatio = 16 / 9; // Adjust this based on your camera's aspect ratio

  let newWidth, newHeight;

  if (windowRatio > cameraRatio) {

    // Window is wider than camera ratio

    newHeight = windowHeight;

    newWidth = windowHeight * cameraRatio;

  } else {

    // Window is narrower than camera ratio

    newWidth = windowWidth;

    newHeight = windowWidth / cameraRatio;

  }

  resizeCanvas(newWidth, newHeight);

  if (capture) {

    capture.size(newWidth, newHeight);

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight); // Use window dimensions

  capture = createCapture(VIDEO);

  capture.size(windowWidth, windowHeight); // Adjust video capture size

  capture.hide();

  pixelDensity(1);

  frameRate(15);

  exposureFactor = 1.0;

  strokeCap(SQUARE);

  strokeWeight(1);

  textFont(font);

  textSize(20);

  textAlign(CENTER, CENTER);

  adjustCanvasToAspectRatio();

}

function draw() { 

  strokeWeight(1);

  background(0);

  capture.loadPixels();

​

  let w = capture.width;

  let h = capture.height;

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

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

​

  blockSize = round(map(ycircle, 100, 300, q, 1), n);

​

  console.log(blockSize);

  console.log(ycircle);

  push();

  translate(width, 0);

  scale(-1, 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, 0, 0);

  pop();

  noStroke();

  for (let rectInfo of colsRects) {

    fill(hexToRgb(rectInfo.colors[0])[0], hexToRgb(rectInfo.colors[0])[1], hexToRgb(rectInfo.colors[0])[2]);

    rect(rectInfo.x, rectInfo.y, rectInfo.w, rectInfo.h);

  }

  drawArrows();

  sizeSlider();

  text(blockSize, width / 15, height / 1.4);

  }

​

function mousePressed() {

  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;

    }

  }

}

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 = constrain(exposureFactor, 0.1, 3); // Example range, adjust as needed

  } else if (keyCode === LEFT_ARROW) {

    exposureFactor -= 0.1; // Decrease exposure

    exposureFactor = constrain(exposureFactor, 0.1, 3); // 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() {

  // Draw Up Arrow

  stroke(0);

  fill(255); // White color

  triangle(20, 400, 40, 380, 60, 400); // Adjust coordinates as needed

​

  // Draw Down Arrow

  fill(255); // White color

  triangle(20, 420, 40, 440, 60, 420); // Adjust coordinates as needed

  //noStroke();

      // Draw Up Arrow

  fill(0); // White color

  triangle(80, 400, 100, 380, 120, 400); // Adjust coordinates as needed

  //noStroke();

    // Draw Down Arrow

  fill(0); // White color

  triangle(80, 420, 100, 440, 120, 420); // Adjust coordinates as needed

  //noStroke();

  noFill();

  strokeWeight(2);

  circle(40, 80, 15);

  strokeWeight(1);

​

}

​

function mousePressed() {

  // Check for color palette selection

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

      return; // Exit the function to avoid adjusting brightness after selecting a color

    }

  }

​

  // Check for Up Arrow click

  if (mouseX >= 20 && mouseX <= 60 && mouseY >= 380 && mouseY <= 400) {

    brightnessFactor += 10; // Increase brightness

  }

​

  // Check for Down Arrow click

  if (mouseX >= 20 && mouseX <= 60 && mouseY >= 420 && mouseY <= 440) {

    brightnessFactor -= 10; // Decrease brightness

  }

    // Check for Up Arrow click

  if (mouseX >= 80 && mouseX <= 120 && mouseY >= 380 && mouseY <= 400) {

    exposureFactor += 0.1; // Increase brightness

  }

​

  // Check for Down Arrow click

  if (mouseX >= 80 && mouseX <= 120 && mouseY >= 420 && mouseY <= 440) {

    exposureFactor -= 0.1; // Decrease brightness

  }

  //slider

  if (mouseX >= 15 && mouseX <=50 && mouseY >= 100 && mouseY <= 300) {

    ycircle = mouseY;

  }

  if (mouseX >= 15 && mouseX <= 50 && mouseY >= 70 && mouseY <= 85){

    if (n == 0){

      n = 1;

    }

    else{

      n = 0;

    }

    if (q == 50){

      q = 10;

    }

    else{

      q = 50;

    }

      fill(255);

      circle(40, 80, 15);

  }

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

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

}

​

function sizeSlider(){

  strokeWeight(5);

  strokeCap(ROUND);

  line(40, 100, 40, 300);

  fill(255);

  circle(40, ycircle, 12);

  strokeWeight(1);

}