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;

let slider;

​

function preload() {

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

}

​

function setup() {

​

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

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

  slider = createSlider(0, 255, 30);

  slider.position(width/2, 20);

  slider.style('width', '200px');

​

}

function draw(){

  background(245,245,245);

​

  let value = slider.value();

  let newValue = map(value,0,255,10,100);

  //print(value)

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

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

      push();

      let tileX = width / img.width;

      let tileY = height / img.height;

      posX = tileX * gridX;

      posY = tileY * gridY;

​

      //get color

      c = img.get(posX, posY);

      stroke(color(c));

      translate(posX, posY);

      rotate(radians(map(posX,0,width,0,360)))

      noFill();

      strokeWeight(map(sin(posX),0,1,1.2,10));

      curve(random(80), cos(posY) * random(150), sin(posX) * 50, cos(posY) * sin(posX) * 40, 0, 0, cos(posY) * sin(posX) * 40, cos(posY) * sin(posX) * 50)

      pop();

    }

  }

}

​

function keyPressed(){

  if (key === 's'){

    saveCanvas("portrait.jpg");

  }

}