Month: October 2017

For this project, I selected an image that describes my passion for music and playing the viola. The portrait created from the code can be altered depending on where the mouse is located as the picture is being drawn one square at a time. The placement of the mouse determines the size of the squares. Pictured above, this is what occurs when both large and small squares are utilized.

Pictured directly above is when only small squares are utilized. This can be drawn by putting the mouse in the upper left hand corner.
Pictured below is when only large squares are used. This can be drawn by putting the mouse in the lower right hand corner.

sketch

//Angela Rubin
//Section C
//aerubin@andrew.cmu.edu
//Project-09-Computational Portrait

var hiddenImage;

function preload() {
    var myImageURL = "https://i.imgur.com/7jZWZyX.jpg";
    hiddenImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(338, 450);
    background(255);
    hiddenImage.loadPixels();
    frameRate(100);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var ColXY = hiddenImage.get(ix, iy);

    noStroke();
    fill(ColXY);
    //if the mouse is in the upper half of the canvas, make 2x2 squares
    if(mouseY<height/2) {
        rectMode(CENTER);
        rect(px, py, 2, 2); 
    }
    //if the mouse is on the left side of the canvas, make 4X4 squares
    if(mouseX<width/2) {
        rectMode(CENTER);
        rect(px, py, 4, 4)
    }
    //if the mouse is on the right side of the canvas, make 8x8 squares
    if (mouseX>width/2) {
        rectMode(CENTER);
        rect(px, py, 8, 8);
    }
    //if the mouse is in the lower half of the canvas, make 12x12 squares
    if (mouseY>height/2) {
        rectMode(CENTER);
        rect(px, py, 12, 12);
    }
}

sketch

var photo;

function preload(){
  photo = loadImage("https://i.imgur.com/3TDt7Za.jpg");
}

function setup() {
  createCanvas(480, 480);
  background(255);
  photo.loadPixels();//load the pixels of the underlying photo
}

function draw() {
  for(var x = 0; x < width;x+=10){
    for(var y = 0; y < height; y+=10){
        var c = photo.get(x,y);//stores RGB value of pixel at (x,y) in array c
        noStroke();
        fill(c);
        rect(x,y,10,10);//draw rectangle at (x,y)
        var r = c[0];//assign items from the array c to variables
        var g = c[1];
        var b = c[2];
        noStroke();
        fill(r-40, g-40, b-40);
        rect(x,y,8,8);//draw circle inside the rectangle
        noStroke();
        fill(r+20, g+20, b+20);
        ellipse(x +5,y+5,4,4);
    }
  }
}

For this assignment I was inspired by Chuck Close’s portraits made up of squares with detail inside them, and wanted to recreate this effect within my portrait. I like how the end result looks a bit like a lego portrait.

 
Note: this only works in Google Chrome for some unknown reason. So when viewing this project, please load it in Google Chrome.

sijings-portrait-week9

//Clair(sijing) Sun
//session C
//sijings@andrew.cmu.edu
//project-09

var underlyingImage;
var count=0;
var gAngle = [45,90,135,180];//for four circle's angles
var radius = [80,80/1.2,80/1.5,80/2];//for four circle's radius


function preload() {
    var myImageURL = "https://i.imgur.com/VEFcvLY.jpg";
    underlyingImage = loadImage(myImageURL);//loading pics

}

function setup() {
    createCanvas(480, 380);//within the size range
    background(0);
    underlyingImage.loadPixels();
    frameRate(30);//set to 30 so that it actually stay 

}

function draw() {
    var x = [cos(radians(gAngle[0])) * radius[0]];//build an array for x changing value
    var y = [sin(radians(gAngle[0])) * radius[0]];
    var px = [mouseX+x[0]];//array for x
    var py = [mouseY+y[0]];//array for y
    count+=1;//for determing when the second, third, fourth circles appear
    if (count>=150){
        x.push(cos(radians(gAngle[1]))*radius[1]);
        y.push(sin(radians(gAngle[1]))*radius[1]);
        px.push(mouseX+x[1]);
        py.push(mouseY+y[1]);
    }
    if (count>=170){
        x.push(cos(radians(gAngle[2]))*radius[2]);
        y.push(sin(radians(gAngle[2]))*radius[2]);
        px.push(mouseX+x[2]);
        py.push(mouseY+y[2]);

    }
    if (count>=190){
        x.push(cos(radians(gAngle[3]))*radius[3]);
        y.push(sin(radians(gAngle[3]))*radius[3]);
        px.push(mouseX+x[3]);
        py.push(mouseY+y[3]);
    }
    var ix = constrain(floor(px[0]), 0, width-1);//set the constrain for each x, y pos
    var iy = constrain(floor(py[0]), 0, height-1);
    var ix1 = constrain(floor(px[1]), 0, width-1);
    var iy1 = constrain(floor(py[1]), 0, height-1);
    var ix2 = constrain(floor(px[2]), 0, width-1);
    var iy2 = constrain(floor(py[2]), 0, height-1);
    var ix3 = constrain(floor(px[3]), 0, width-1);
    var iy3 = constrain(floor(py[3]), 0, height-1);
    var theColorAtLocationXY = [underlyingImage.get(ix, iy)];//get the color
    theColorAtLocationXY.push(underlyingImage.get(ix1,iy1));//add into the color array
    theColorAtLocationXY.push(underlyingImage.get(ix2,iy2));
    theColorAtLocationXY.push(underlyingImage.get(ix3,iy3));

    noStroke();
    fill(theColorAtLocationXY[0]);//call corresponding color
    ellipse(px[0], py[0], 10, 10);

    fill(theColorAtLocationXY[1]);
    ellipse(px[1],py[1],15,15);

    fill(theColorAtLocationXY[2]);
    ellipse(px[2],py[2],5,5);

    fill(theColorAtLocationXY[3]);
    ellipse(px[3],py[3],12,12);

    gAngle[0] = gAngle[0] + 2;//change of angles everytime
    gAngle[1] = gAngle[1] - 2;
    gAngle[2] = gAngle[2] + 2;
    gAngle[3] = gAngle[3] - 2;
}

For this project, I thought about Van Gogh’s painting with how each stroke is distorted and convey a unique feeling of the whole image. “The Starry Night” especially, is where my inspiration came from.  

With each part of the drawing circulating, I thought I will be interesting to apply a similar technique on a portrait. For this project, I chose to do a more interactive piece where the audience can manipulate the strokes with their mouses. According to the position of the mouse, four circles with different width and radius will draw accordingly. In the end, the how the picture looks like a portrait composed with hundreds of circles.

I was influenced by the “Cubism” idea.