Project-09 Portrait in Jasper

This is Jasper.

sketch

//Ty Van de Zande
//ctv@andrew.cmu.edu
//Section B
//Project-09

//sorry for not commenting

var underlyingImage;
var dir = 1;

function preload() {
    var myImageURL = "https://i.imgur.com/xIecQsR.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(420, 420);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
    var r = random(90);
    var r2 = random(3, 20);
    
    if(r <= 1){
    underlyingImage.loadPixels();
    var stepSize = round(constrain(mouseX / 8, 6, 32));
    for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - underlyingImage.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, r2, r2);
    }
  }
    }
    
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var sz = random(0, 30);
    

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, sz, sz);
}

function mousePressed(){
    dir = dir *(-1);
}