carmen

var img; // Declare image variable

var brush; // Declare brush variable

​

var interactiveBtn; // Define button

var autonomousBtn; // Define button

var pixelatedBtn; // Define button

var saveBtn; // Define button

​

var isInteractive = false; // variable to track interactive mode

var isPixelated = false; //  variable to track pixelated mode

var brushSize = 40; // Brush size

var revealGrid = []; // Grid to track revealed pixels

​

function preload() {

  img = loadImage("Carmen Sandiego.png"); // Load image

  brush = loadImage("brush.png"); // Load brush image

}

​

function setup() {

  createCanvas(img.width, img.height); // canvas with image dimensions

​

  // Initialize buttons and set positions

  interactiveBtn = createButton('Make Interactive');

  interactiveBtn.position(10, 10);

  interactiveBtn.mousePressed(setInteractiveMode);

​

  autonomousBtn = createButton('Make Autonomous');

  autonomousBtn.position(10, 40);

  autonomousBtn.mousePressed(setAutonomousMode);

​

  pixelatedBtn = createButton('Make Pixelated');

  pixelatedBtn.position(10, 70);

  pixelatedBtn.mousePressed(setPixelatedMode);

​

  saveBtn = createButton('Save Image');

  saveBtn.position(10, 100);

  saveBtn.mousePressed(saveImage);

  // Initialize grid for pixel reveal

  initializeGrid();

}

​

function initializeGrid() {

  for (var y = 0; y < img.height / 20; y++) {

    var row = [];

    for (var x = 0; x < img.width / 20; x++) {

      row.push(false); // Mark grid as not revealed

    }

    revealGrid.push(row); // Add row to revealGrid

  }

}

​

function setInteractiveMode() {

  isInteractive = true;

  isPixelated = false;

}

​

function setAutonomousMode() {

  isInteractive = false;

  isPixelated = false;

}

​

function setPixelatedMode() {

  isPixelated = true;

  isInteractive = false;

}

​

function saveImage() {

  saveCanvas('CarmenSandiego_' + Date.now(), 'jpg'); // Save with dynamic filename

}

​

function draw() {

  background(255);

​

  // Adjust grid size for pixelated mode

  var gridSize = isPixelated ? 40 : 20;

​

  // Draw revealed pixels

  for (var y = 0; y < img.height; y += gridSize) {

    for (var x = 0; x < img.width; x += gridSize) {

      if (revealGrid[y / gridSize][x / gridSize]) {

        fill(img.get(x, y)); // Get pixel color from image

        noStroke();

        rect(x, y, gridSize, gridSize); // Draw grid cell

      }

    }

  }

​

  // Interactive mode: update grid based on mouse

  if (isInteractive) {

    var xIndex = floor(mouseX / gridSize);

    var yIndex = floor(mouseY / gridSize);

    if (xIndex >= 0 && yIndex >= 0 && xIndex < img.width / gridSize && yIndex < img.height / gridSize) {

      revealGrid[yIndex][xIndex] = true;

    }

    image(brush, mouseX - brushSize / 2, mouseY - brushSize / 2, brushSize, brushSize); // Draw brush

  }

​

  // Autonomous mode: reveal random grid cells

  if (!isInteractive && !isPixelated) {

    for (var i = 0; i < 10; i++) {

      var xIndex = floor(random(0, img.width / gridSize));

      var yIndex = floor(random(0, img.height / gridSize));

      revealGrid[yIndex][xIndex] = true;

    }

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    brushSize += 5; // Increase brush size

  } else if (keyCode === DOWN_ARROW) {

    brushSize = max(5, brushSize - 5); // Decrease brush size 

  }

​

}