​

let brightnessFactor = 0;

let exposureFactor = 1.0; 

let ycircle = 274;

let blockSize = 7;

let n = 0;

let q = 50;

// Desired aspect ratio

const aspectRatio = 4 / 3;

​

let arrowX = 20;

let arrowY = 20;

​

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

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

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

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

​

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[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 setup() {

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

  capture = createCapture(VIDEO);

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

  capture.hide();

  windowResized();

  pixelDensity(1);

  frameRate(15);

  exposureFactor = 1.0; 

  strokeCap(SQUARE)

  strokeWeight(1);

  textFont(font);

  textSize(20);

  textAlign(CENTER, CENTER);

}

​

​

​

function windowResized() {

​

​

  // Calculate max possible width based on window height

  let newWidth = windowHeight * aspectRatio;

  let newHeight = windowHeight;

  arrowX = newWidth;

  arrowY = newHeight;

​

  // If calculated width is wider than window, adjust based on width instead

  if (newWidth > windowWidth) {

    newWidth = windowWidth;

    console.log(newWidth);

    newHeight = windowWidth / aspectRatio;

    console.log(newHeight);

    arrowX = newWidth;

    arrowY = newHeight;

  }

​

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

  resizeCanvas(newWidth, newHeight);

  capture.size(newWidth, newHeight);

​

  // Optionally, adjust other elements' sizes or positions based on the new canvas size

  colsRects = [

  { x: arrowX/1.235, y: arrowY/1.08, w: arrowX/25, h: arrowX/25, colors: cols1 },

  { x: arrowX/1.165, y: arrowY/1.08, w: arrowX/25, h: arrowX/25, colors: cols2 },

  { x: arrowX/1.105, y: arrowY/1.08, w: arrowX/25, h: arrowX/25, colors: cols3 },

  { x: arrowX/1.05, y: arrowY/1.08, w: arrowX/25, h: arrowX/25, colors: cols4 }

];

  ycircle = arrowY/1.55;

}

​

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

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

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

​

  blockSize = round(map(ycircle, arrowY/5.5, arrowY/1.4, 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();

  stroke(1);

  //add all 4 colors to rect image

  for (let rectInfo of colsRects) {

    fill(hexToRgb(rectInfo.colors[1])[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 / 19, height / 1.36);

  text(brightnessFactor, width / 19, height / 1.15);

  text(exposureFactor, width / 8.5, height / 1.15);

  }

​

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

  // Draw Up Arrow

  stroke(0);

  fill(255); // White color

  triangle(arrowX/40, arrowY / 1.08, arrowX/20, arrowY / 1.12, arrowX/13, arrowY / 1.08); // Adjust coordinates as needed

​

  // Draw Down Arrow

  fill(255); // White color

  triangle(arrowX/40, arrowY / 1.05, arrowX/20, arrowY / 1.02, arrowX/13, arrowY / 1.05); // Adjust coordinates as needed

  //noStroke();

      // Draw Up Arrow

  fill(0); // Black color

  triangle(arrowX/11, arrowY / 1.08, arrowX/8.5, arrowY / 1.12, arrowX/7, arrowY / 1.08); // Adjust coordinates as needed

  //noStroke();

    // Draw Down Arrow

  fill(0); // Black color

  triangle(arrowX/11, arrowY / 1.05, arrowX/8.5, arrowY / 1.02, arrowX/7, arrowY / 1.05); // Adjust coordinates as needed

  //noStroke();

  noFill();

  strokeWeight(2);

  circle(arrowX/20, arrowY/7, 15);

  strokeWeight(1);

​

  noStroke();

  fill(cols1[0]);

  rect(arrowX/1.235, arrowY/1.08, arrowX/50, arrowX/50);

  fill(cols1[2]);

  rect(arrowX/1.235, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols1[3]);

  rect(arrowX/1.206, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols2[0]);

  rect(arrowX/1.165, arrowY/1.08, arrowX/50, arrowX/50);

  fill(cols2[2]);

  rect(arrowX/1.165, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols2[3]);

  rect(arrowX/1.139, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols3[0]);

  rect(arrowX/1.105, arrowY/1.08, arrowX/50, arrowX/50);

  fill(cols3[2]);

  rect(arrowX/1.105, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols3[3]);

  rect(arrowX/1.082, arrowY/1.05, arrowX/50, arrowX/50);

​

  fill(cols4[0]);

  rect(arrowX/1.05, arrowY/1.08, arrowX/50, arrowX/50);

  fill(cols4[2]);

  rect(arrowX/1.05, arrowY/1.05, arrowX/50, arrowX/50);

  fill(cols4[3]);

  rect(arrowX/1.029, arrowY/1.05, arrowX/50, arrowX/50);

  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 >= arrowX/40 && mouseX <= arrowX/13 && mouseY >= arrowY / 1.12 && mouseY <= arrowY / 1.08) {

    brightnessFactor += 10; // Increase brightness

  }

​

  // Check for Down Arrow click

  if (mouseX >= arrowX/40 && mouseX <= arrowX/13 && mouseY >= arrowY / 1.05 && mouseY <= arrowY / 1.02) {

    brightnessFactor -= 10; // Decrease brightness

  }

    // Check for Up Arrow click

  if (mouseX >= arrowX/11 && mouseX <= arrowX/7 && mouseY >= arrowY / 1.12 && mouseY <= arrowY / 1.08) {

    exposureFactor = round((exposureFactor + 0.1),1); // Increase brightness

  }

​

  // Check for Down Arrow click

  if (mouseX >= arrowX/11 && mouseX <= arrowX/7 && mouseY >= arrowY / 1.05 && mouseY <= arrowY / 1.02) {

    exposureFactor = round((exposureFactor - 0.1),1); // Decrease brightness

  }

  //slider

  if (mouseX >= arrowX/22 && mouseX <= arrowX/18 && mouseY >= arrowY/5.5 && mouseY <= arrowY/1.4) {

    ycircle = mouseY;

    //arrowX/22, arrowY/5.5, arrowX/20, arrowY/1.4

  }

  //glitch button

  //arrowX/20, arrowY/7, 15

  if (mouseX >= arrowX/22 && mouseX <= arrowX/18 && mouseY >= arrowY/8 && mouseY <= arrowY/6){

    if (n == 0){

      n = 1;

    }

    else{

      n = 0;

    }

    if (q == 50){

      q = 10;

    }

    else{

      q = 50;

    }

      fill(255);

      circle(arrowX/20, arrowY/7, 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);

  stroke(0);

  line(arrowX/20, arrowY/5.5, arrowX/20, arrowY/1.4);

  fill(255);

  circle(arrowX/20, ycircle, 12);

  strokeWeight(1);

}

​

function swapCamera(){

}