Kevin Riordan Project-09-Portrait

kzr project 09

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_09*/
var underlyingImage;
//making count variable, for end point and for switching point
var count = 0;

function preload() {
    var myImageLink = "https://i.imgur.com/UPry60m.jpg";
    myImage = loadImage(myImageLink);
}

function setup() {
    noStroke();
    createCanvas(480, 480);
    background(0);
    myImage.loadPixels();
}

function draw() {
    var posX = random(width);
    var posY = random(height);
    rectMode(CENTER);
    //front half uses createRect function
    if(count <= 5000) {
        var countMap1 = map(count,0,5000,100,20);
        createRect(int(posX),int(posY),countMap1 / 10);
        count++;
    }
    //back half uses detailedRect function
    else if(count <= 10000) {
        createDetailRect(posX,posY,2);
        count++;
    }
}
//making larger crosses at the beginning
function createRect(initialX, initialY, size) {
    var iX = constrain(floor(initialX), 0, width - 1);
    var iY = constrain(floor(initialY), 0, height - 1);
    var pixelColor = myImage.get(iX, iY);
    fill(pixelColor);
    for(var i = size; i > 0; i --) {
        var cCoord = map(i,0,size,size * 2,0);
        rect(initialX + cCoord,initialY,i,i);
        rect(initialX - cCoord,initialY,i,i);
        rect(initialX,initialY - cCoord,i,i);
        rect(initialX,initialY + cCoord,i,i);
    }
}
//making detailed shapes for the end
function createDetailRect(initialX, initialY, size) {
    var iX = constrain(floor(initialX), 0, width-1);
    var iY = constrain(floor(initialY), 0, height-1);
    var pixelColor = myImage.get(iX, iY);
    fill(pixelColor);
    for(var change = 0; change <= 12; change ++) {
        var side = map(change,0,12,1,0);
        rect(initialX + (change / 2),initialY,size * side,size * side);
        rect(initialX,initialY + (change / 2),size * side,size * side);
        rect(initialX + (change / 2),initialY + (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY,size * side,size * side);
        rect(initialX,initialY - (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY - (change / 2),size * side,size * side);
        rect(initialX + (change / 2),initialY - (change / 2),size * side,size * side);
        rect(initialX - (change / 2),initialY + (change / 2),size * side,size * side);
    }
}

I started this project by making a function based on the example code in the project description. It was pretty cool modifying the code and seeing what shapes appeared, and I played around with making an overall count variable that caused the size to decrease, increasing the detail. If I had more time, I would have played around with constraining the detailing after the count was above 5000, to constrain it to areas that had not been filled in. Overall, though, I am pretty satisfied with this project.

picture at beginning (count <2500)
picture during middle (count = 5000)
picture at end (count = 10000)
reference picture i used for underlying image

Leave a Reply