author weidi zhang

this demo is to show how to use image data to create a generative art

*/

​

let img;

let posX, posY;

let cnv;

let c;

​

function preload() {

  img = loadImage('assets/face3.jpg');

}

​

function setup() {

​

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

  cnv.position((windowWidth - img.width) / 2, (windowHeight - img.height) / 2)

  // print(img.width, img.height)

  background('lightgrey');

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

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

      push();

      let tileX = 1;

      let tileY = 1;

      posX = tileX * gridX;

      posY = tileY * gridY;

​

      //get color

      c = img.get(posX, posY);

      stroke(color(c));

      translate(posX, posY);

      rotate(radians(random(360)))

      noFill();

      strokeWeight(random(5));

      point(posX,posY);

      strokeWeight(random(5));

      curve(0, 0, sin(posX) * 60, cos(posY) * sin(posX) * 40, 0, 0, cos(posY) * sin(posX) * 140, cos(posY) * sin(posX) * 50)

      pop();

    }

  }

}

​

function keyPressed(){

  if (key === 's'){

    saveCanvas("portrait.jpg");

  }

}