oily_portrait

// original sketch https://www.openprocessing.org/sketch/533299

// https://goo.gl/sgDRu6

​

//

//

//  (c) Tariq Rashid 2018

//  sketch supports content of Make Your Own Algorithmic Art

//  https://www.amazon.com/Make-Your-Own-Algorithmic-Art-ebook/dp/B07BP13VPR

//

//

​

​

// source image based on https://pixabay.com/en/salvador-guillermo-allende-gossens-155939/

​

// load portrait

var img;

function preload() {

  img = loadImage('famous-portraits-4.jpg');

}

​

function setup() {

  simple();

  background('white');

  // create array from image

  img.loadPixels();

  loop();

}

​

function draw() {

  //strokeWeight(1);

  beginShape();

  for (var p = 0; p < 50; p += 1) {

    var x = int(map(mouseX, width/2-img.width/2, width/2+img.width/2, 0, img.width));

    var y = int(map(mouseY, height/2-img.height/2, height/2+img.height/2, 0, img.height));

    x += randomNumber(-5, 5);

    y += randomNumber(-5, 5);

    // read pixel value

    var [r, g, b] = get_rgb_from_image(img,x,y);

    // stroke depends on luminosity

    strokeWeight(map(r+g+b, 0, 255*3, 0.5, 2));

    //paint

    stroke(r, g, b, (r+g+b)/3);

    var x1 = x + width/2 - img.width/2;

    var y1 = y + height/2 - img.height/2;

    var x2 = x1 + 50*(noise(x/50, y/50)-0.5);

    var y2 = y1 + 50*(noise(y/50, x/50)-0.5);

    curveVertex(x1, y1);

    curveVertex(x2, y2);

  }

  endShape();

  // border

  noFill(); stroke(0); strokeWeight(1);

  rect(width/2 - img.width/2 - 50, height/2 - img.height/2 - 50, img.width + 100, img.height + 100);

  stroke(200); rect(0, 0, width-1, height-1);

}

​

​

// returns a greyscale value from image at given location

// retrun value is scaled between 0 and 1

function get_rgb_from_image(im, x, y) {

  // red value

  var r = im.pixels[4*x + (4*y*im.width)];

  // green

  var g = im.pixels[4*x + (4*y*im.width) + 1 ];

  // blue

  var b = im.pixels[4*x + (4*y*im.width) + 2 ];

  // return array of 3 numbers

  return [r, g, b];

}