Project 09: Computational Portrait (Custom Pixel)

//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Assignment-09

//Click to switch between "circles" or "lines" mode.

//"Circles" Mode: 
//move the mouse left or right to change the circles' size and stroke weight 
//to make the portrait more blurry.

//"Lines" Mode: 
//move the mouse left or right to change the rotation angle of the lines 
//to create the wind blowing effect.

var click = 0; //number of clicks

function preload() {
  
  img = loadImage("https://i.imgur.com/ncc1zMh.jpg");
  //original url https://i.imgur.com/mOmrZEo.jpg
}

function setup() {
  createCanvas(547, 547);
  background(255);
  imageMode(CENTER);
  img.loadPixels(); //load pixels
}

function draw() { 
  //click to switch between "circles" or "lines" mode
  if (click % 2 == 0) {
    draw1(); //circles mode
  }
  else {
    draw2(); //lines mode
  }
}


function draw1() { //circles
  for (i=0; i<100; i++) {
    var x = floor(random(img.width)); //random x of the center of circles
    var y = floor(random(img.height)); //random y of the center of circles
    var dotcolor = img.get(x, y); //get the pixel color info
    var point = (dotcolor[0]+dotcolor[1]+dotcolor[2])/3; //get the average RGB value

    //map the mouseX position to circle sizes
    var mapsize = map(mouseX, 0, width, 5, 30);
    //map the mouseX position to circle stroke weights
    var mapWeight = map(mouseX, 0, width, 5, 0.5);;

    strokeWeight(mapWeight);
    stroke(dotcolor); //strokecolor is the pixel color
    noFill();
    ellipse(x, y, mapsize, mapsize);
    stroke(dotcolor[0]+35, dotcolor[1]+35, dotcolor[2]+35); //stroke color ligher
    ellipse(x, y, mapsize*1.5, mapsize*1.5); //circle size bigger
    stroke(dotcolor[0]-35, dotcolor[1]-35, dotcolor[2]-35); //stroke color darker
    ellipse(x, y, mapsize*0.5, mapsize*0.5); //circle size smaller
  }
}


function draw2() { //lines
  for (i=0; i<10000; i++) {
    var initdegree = mouseX; //mouseX determines the initial degree
    //x, y of the starting point of the lines, random points within the canvas
    var x = floor(random(img.width)); 
    var y = floor(random(img.height));
    var dotcolor = img.get(x, y);
    var point = (dotcolor[0]+dotcolor[1]+dotcolor[2])/3;

    //map the average RGB value to degrees, the greater the value the greater the degrees
    var mapdegree = initdegree+map(point, 0, 255, 0, 180);
    //map the average RGB value to line lengths, the greater the value the shorter the lengths
    var maplength = map(point, 0, 255, 15, 2);
    //map the average RGB value to stroke weights, the greater the value the smaller the stroke weights
    var mapWeight = map(point, 0, 255, 5, 0.3);

    noFill();
    strokeWeight(mapWeight);

    push();
    translate(x,y); //translate the origin to (x,y)
    rotate(radians(mapdegree)); //rotate mapdegree
    stroke(dotcolor);
    line(0, 0, 0+maplength, 0+maplength);
    stroke(dotcolor[0]+35, dotcolor[1]+35, dotcolor[2]+35);
    line(10, 0, 10+maplength+5, 0+maplength+5);
    stroke(dotcolor[0]-35, dotcolor[1]-35, dotcolor[2]-35);
    line(-10, 0, -10+maplength-5, 0+maplength-5); 
    pop();
  }

}

function mousePressed() {
  click ++ ; //if mouse is pressed, increase number of clicks
}