Assignment 7 - OpenProcessing

mySketch
xxxxxxxxxx
 
​
var img; // Declare image variable
var brush; // Declare brush variable
​
var interactiveBtn; // Define button
var autonomousBtn; // Define button
var saveBtn; // Define button
​
​
var isInteractive = false; // variable to track interactive mode
var brushSize = 40; // Brush size
var revealGrid = []; // Grid to track revealed pixels
​
function preload() {
  img = loadImage("barbie.jpg"); // Load image
  brush = loadImage("barbie.logo.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);
 
  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 saveImage() {
  saveCanvas('CarmenSandiego_' + Date.now(), 'jpg'); // Save with dynamic filename
}
​
function draw() {
  background(255);
  
    // Adjust grid size for pixelated mode
  var gridSize =  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) {
    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;
    }
  }
}
​