Category: Project-09-Portrait

var sonia;
var smallPoint, largePoint;

function preload() {
    sonia = loadImage("https://i.imgur.com/3h0u1wQ.jpeg");
}
function setup() {
    createCanvas(480, 480);
    //creating variables for the smallPoint size and the largePoint size
    smallPoint = 4;
    largePoint = 20;
    noStroke();
    background(220);
    rectMode(CENTER)
}

function draw() {
    //created 6 x and y variables to hold different sizes of widths and heights based on the corresponding variable
    var x1 = floor(random(sonia.width));
    var y1 = floor(random(sonia.height));
    //-10 and +10 so that it would always draw a shorter line, so when I used get, it would get a color closer to the point.
    var x2 = floor(random(x1 - 10, x1 + 10));
    var y2 = floor(random(y1 -10, y1 + 10));
    var x = floor(random(sonia.width));
    var y = floor(random(sonia.height));
    var lineLength = ((y2 - y1) / (x2 - x1)) / 10;
    createMultipleLines(x1,y1, x2,y2);
    createMultipleRectangles(x,y);
    createMultiplePoints(x,y);
}

function createMultipleLines(x1, y1, x2, y2) {
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    //gets color
    var pix = sonia.get(x1,y1);
    var pix1 = sonia.get(x2,y2);
    stroke(pix);
    //random strokeWeight
    strokeWeight(random(0.1, pointillize));
    line(x1,y1,x2,y2);
}

function createMultipleRectangles(x,y) {
    //creates multiple rectangles using same method
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    print(sonia.width);
    print(sonia.height)
    var pix = sonia.get(x,y);
    fill(pix);
    noStroke();
    rect(x,y, pointillize, pointillize);
}

function createMultiplePoints(x,y) {
    //creates multiple circular points using same method.
    var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
    print(sonia.width);
    print(sonia.height)
    var pix = sonia.get(x,y);
    fill(pix);
    noStroke();
    ellipse(x,y, pointillize, pointillize);
}
    


// function createTinyLines(x1,y1,x2,y2, lineLength) {
//     var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
//     for (var i = 0; i< lineLength; i ++) {
//         var pix = sonia.get(x1,y1);
//         var pix1 = sonia.get(x2,y2);
//         stroke(pix);
//         line(x1,y1,x2,y2);
//         var slopeY = y2 - y1;
//         var slopeX = x2 - x1;
//         x1 = x2;
//         y1 = y2;
//         x2 += slopeX;
//         y2 += slopeY;
//     }
// }

// function createOneLine(x1,y1,x2,y2, lineLength) {
//     //var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
//     var pix = sonia.get(x1,y1);
//     var pix1 = sonia.get(x2,y2);
//     stroke(pix);
//     for (var i = 0; i< 20; i ++) {
//         line(x1,y1,x2,y2);
//         var slopeY = y2 - y1;
//         var slopeX = x2 - x1;
//         x1 == x2;
//         y1 == y2;
//         x2 += slopeX;
//         y2 += slopeY;
    
//     }
    
// }

//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
}