profile

let img;

let rows;

let cols;

let xStep;

let yStep;

let xStepIm;

let yStepIm;

let scale;

​

function preload(){

  // url = "https://www.liveabout.com/thmb/rhmTZKvGZH-RlhXGOU049XLnUCI=/2034x1480/filters:fill(auto,1)/Mondrian_TheGrayTree-large--57c733085f9b5829f46e5d93.jpg";

  // img = loadImage(url, "jpg");

  img = loadImage("me.jpg");

  // img = loadImage("76856760_109462957092869_7626324102340034117_n.jpg");

}

​

function setup() {

  // frameRate(25);

  let imWidth = 600;

  let imHeight = img.height * imWidth / img.width;

  createCanvas(imWidth, imHeight);

  rows = 300;

  cols = 600;

  scale = 255;

  xStep = width/cols;

  yStep = height/rows;

  xStepIm = img.width/cols;

  yStepIm = img.height/rows;

  noFill();

}

​

function getGreyLevel(pixel) {

  return 0.299 * pixel[0] + 0.587 * pixel[1] + 0.114 * pixel[2];

}

​

function drawCircle(x,y,scale) {

  strokeWeight(10*scale/255);

  let xPos = x * xStep;

  let yPos = y * yStep;

  let xPosIm = x * xStepIm;

  let yPosIm = y * yStepIm;

  let pixel = img.get(xPosIm, yPosIm)

  let greyLevel = getGreyLevel(pixel);  

  // fill(pixel[0], pixel[1], pixel[2], (255-scale)*greyLevel/2048)

  stroke(pixel[0], pixel[1], pixel[2], (255-scale)*greyLevel/255);

  if(frameCount%2)

   ellipse(xPos, yPos, map(greyLevel, 0, 255, 0, (scale+1)*xStep), map(greyLevel, 0, 255, 0, (scale+1)*yStep))

  else

    rect(xPos, yPos, map(greyLevel, 0, 255, 0, (scale+1)*xStep), map(greyLevel, 0, 255, 0, (scale+1)*yStep))

}

​

function draw() {

  if(scale < 0) {

    return noLoop();

  }

  scale -= 10;

  background(255, 1/(scale+1));

  for(let x = 0; x < cols; x++) { 

    for(let y = 0; y < rows; y++) {

      if(random(-100, 1) > 0) {;

        drawCircle(x, y, scale);                              

      }

      if(random(-500, 1) > 0) {;

        let _x = parseInt(random(0,cols));

        let _y = parseInt(random(0,rows));

        drawCircle(_x, _y, scale);  

      }

    }

  }

}

​