Assignment 7

var img;      //variable for image

var brush;  

​

​

var butn;            //variable for button

var drawyourself;    //variable for button to draw mannualy 

var drawautomatic;   //variable for button to draw automatically

​

var gridsz;

​

var x;

var y;

​

var revealGrid = [];

​

function preload() {

  img = loadImage('barbie.jpg');  //load image 

  brush = loadImage('barbie.logo.png');

}

​

​

​

​

function setup() {

  createCanvas(img.width, img.height);      //canvas size

  butn = createButton('Clear All');                 //button name

  butn.position(0,0);                               //button position

  butn.mousePressed(butnPressed);                    //call custom function 

  drawyourself = createButton('Draw Yourself');     //button name

  drawyourself.position(80, 0);                     //button position

  drawyourself.mousePressed(butnPressedpaint);      //call custom function

  drawautomatic = false;               //when code is first run it default starts to draw automatic

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

  //image(barbieImage, 0, 0, width, height);   //uncomment this to see the original picture on canvas

  noStroke();

  var gridSize = 20;

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

        noStroke();

        rect(x, y, gridSize, gridSize); 

      }

    }

  }

    if(drawautomatic == true) {

    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;

  }

  if(drawautomatic == false) {

    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;

    }

  }

  }

​

  /*push(); 

  img.loadPixels();

  var sz = 10;

  let pix = img.get(x, y); 

  fill(red(pix), green(pix), blue(pix), 200);

  rect(x, y,sz);

  pop();

  */

​

​

}

​

​

​

​

​

​

​

​

function butnPressed() {   

  background(255);       //draws a white canvas clearing everything

}

​

​

​

function butnPressedpaint() {

  if(drawautomatic == false) {

    drawautomatic = true;

    drawyourself.html('Draw Automatic');

  }

  else if(drawautomatic == true) {

    drawautomatic = false;

    drawyourself.html('Draw Yourself');

  }

}

​

​

​

function keyPressed() {

  if( key == 's'|| key == 'S'){

    saveCanvas('Image.Variation.jpg');

  }

}

​

​

​

//for interactivity

  /*if(drawautomatic == true) {

    x = mouseX;

    y = mouseY;

  }

  if(drawautomatic == false) {

    x = floor(random(0, img.width));

    y = floor(random(0, img.height));

​

  }

  */

​

  //let x = floor(random(0, barbieImage.width));      //randomize x and y cordinates for all the options

  //let y = floor(random(0, barbieImage.height));

  //let pix = barbieImage.get(x, y);                     //return pixel colors

  //fill(red(pix), green(pix), blue(pix), 200);       //fill for the shape from image

    //Option 1 -- Generate pixelated image 

  //uncomment following code to enable

  /*img.loadPixels();

  for (var y = 0; y < height; y += gridsz) {

  for (var x = 0; x < width; x += gridsz) {

  let index = (x + y * width) * 4;

  var sz = 10;                                 //change this value to change pixel size

  let pix = img.get(x, y); 

  fill(red(pix), green(pix), blue(pix), 255);

  rect(x, y,sz);

  }

  }

  */

  //Option 2 -- Generate pixelated image with circles

  //uncomment following code to enable

  /*barbieImage.loadPixels();

  for (var y = 0; y < height; y += sz) {

  for (var x = 0; x < width; x += sz) {

  let index = (x + y * width) * 4;

  var sz = 8;                                 //change this value to change pixel size

  let pix = barbieImage.get(x, y); 

  fill(red(pix), green(pix), blue(pix), 200);

  circle(x, y,sz);

  }

  }

  */

​

  //Option 3 -- Generate moisac image

  //uncomment following code to enable

  /*gridsz = 10;                       //change this value to increase/decrease space between tiles

  img.loadPixels();

  for (var y = 0; y < height; y += gridsz) {

  for (var x = 0; x < width; x += gridsz) {

  let index = (x + y * width) * 4;

  var sz = 8;    

  let pix = img.get(x, y); 

  fill(red(pix), green(pix), blue(pix), 200);

  rect(x, y,sz);

  }

  }

*/

  //Option 5 -- Custom Brush

  //uncomment following code to enable

  /*push();

  imageMode(CENTER);

  angleMode(DEGREES);

  translate(x, y);

  rotate(random(360));

  scale(random(0.01, 0.06));

  tint(red(pix), green(pix), blue(pix), 150);

  image(brush, 0, 0);

  pop();

  */

​

​

​

​

​

​

​