'use strict';

​

var drawMode = 1;

​

var img;

​

function preload() {

  img = loadImage('data/pic.png');

}

​

function setup() {

  createCanvas(603, 873);

  print(img.width + ' • ' + img.height);

}

​

function draw() {

  background(247, 194, 255);

​

  var mouseXFactor = map(mouseX, 0, width, 0.05, 1);

  var mouseYFactor = map(mouseY, 0, height, 0.05, 1);

​

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

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

      // grid position + tile size

      var tileWidth = width / img.width;

      var tileHeight = height / img.height;

      var posX = tileWidth * gridX;

      var posY = tileHeight * gridY;

​

      // get current color

      img.loadPixels();

      var c = color(img.get(gridX, gridY));

      // greyscale conversion

      var greyscale = round(red(c) * 0.3333 + green(c) * 0.707 + blue(c) * 0.071);

​

      switch (drawMode) {

      case 1:

        // greyscale to stroke weight

        var w1 = map(greyscale, 0, 255, 15, 0.1);

        stroke(0);

        strokeWeight(w1 * mouseXFactor*w1);

        line(posX, posY, posX + 25, posY + 5);

        break;

      case 2:

        // greyscale to ellipse area

        fill(0);

        noStroke();

        var r2 = 1.1284 * sqrt(tileWidth * tileWidth * (1 - greyscale / 255));

        r2 *= mouseXFactor * 3;

        ellipse(posX, 25, r2, r2);

        break;

      case 3:

        // greyscale to line length

        var l3 = map(greyscale, 0, 255, 30, 0.001);

        l3 *= mouseXFactor;

        strokeWeight(1 * mouseYFactor);

        line(posX, posY, posX + l3, posY + l5);

        break;

      }

    }

  }

}

​

function keyReleased() {

  if (key == 's' || key == 'S') saveCanvas(gd.timestamp(), 'png');

​

  // change draw mode

  if (key == '1') drawMode = 1;

  if (key == '2') drawMode = 2;

  if (key == '3') drawMode = 3;

}

​