let myCanvas;

let squareIt;

let rollIt;

let bendIt;

let original;

​

let roll = false;

let selected = "none";

​

function preload() {

  // img = loadImage(

  //   "https://th.bing.com/th/id/OIG.aNqD2DLYf_snrEaj01eu?pid=ImgGn"

  // );

img = loadImage('./assets/ada.png');

}

​

function setup() {

  frameRate(20);

  img.resize(600, 600);

  myCanvas = createCanvas(img.width, img.height);

​

  original = createButton("Original");

  original.position(10, img.height + 10);

  original.mousePressed(originalImage);

​

  squareIt = createButton("Square It");

  squareIt.position(80, img.height + 10);

  squareIt.mousePressed(squareItImage);

​

  rollIt = createButton("Roll It");

  rollIt.position(160, img.height + 10);

  rollIt.mousePressed(rollItImage);

​

  bendIt = createButton("Bend It");

  bendIt.position(220, img.height + 10);

  bendIt.mousePressed(bendItImage);

​

  anime = createButton(roll ? "Stop" : "Animate");

  anime.position(320, img.height + 10);

  anime.mousePressed(animate);

​

  for (let col = 0; col < img.width; col += 1) {

    for (let row = 0; row < img.height; row += 1) {

      let c = img.get(col, row);

      stroke(color(c));

      point(col, row);

    }

  }

}

​

function originalImage() {

  background(0);

  for (let col = 0; col < img.width; col += 1) {

    for (let row = 0; row < img.height; row += 1) {

      let c = img.get(col, row);

      stroke(color(c));

      strokeWeight(10);

      point(col, row);

    }

  }

}

​

function rollItImage() {

  selected = "circle";

  background(0);

  for (let col = 0; col < img.width; col += 10) {

    for (let row = 0; row < img.height; row += 10) {

      let c = img.get(col, row);

      stroke(color(c));

      strokeWeight(2);

      c[3] = random(255); // add alpah

      fill(c);

      ellipse(col, row, random(1, 9));

    }

  }

}

​

function squareItImage() {

  selected = "cube";

  background(0);

  for (let col = 0; col < img.width; col += 10) {

    for (let row = 0; row < img.height; row += 10) {

      let c = img.get(col, row);

      stroke(color(c));

      strokeWeight(2);

      c[3] = random(255); // add alpah

      fill(c);

      rect(

        col + random(-5, 5),

        row + random(-5, 5),

        random(-10, 10),

        random(-10, 10)

      );

    }

  }

}

​

function bendItImage() {

  selected = "bend";

  background(0);

  for (let col = 0; col < img.width; col += 10) {

    for (let row = 0; row < img.height; row += 10) {

      let c = img.get(col, row);

      stroke(color(c));

      strokeWeight(random(0, 2));

      c[3] = random(255); // add alpah

      fill(c);

      arc(col, row, random(1, 20), random(1, 20), PI + QUARTER_PI, TWO_PI);

    }

  }

}

​

function animate() {

  roll = roll === true ? false : true;

  anime.html(roll ? "Stop" : "Animate");

}

​

function draw() {

  if (roll) {

    switch (selected) {

      case "cube":

        squareItImage();

        break;

      case "circle":

        rollItImage();

        break;

      case "bend":

        bendItImage();

        break;

      default:

        break;

    }

  }

}

​

function keyPressed() {

  if (key === 's') {

    saveGif('cosmy', 5);

  }

}

​