# Julia Nishizaki – Project 09 – Computational Portrait

``````//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 09 - Computational Portrait

var siblingImage;

var siblingImageURL = "https://i.imgur.com/oi1ahe3.jpg";
}

function setup() {
createCanvas(320, 480); // same ratio as photo, 2:3
background('white'); // white background
rectMode(CENTER);
frameRate(1000); // beginning frame rate
}

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 theColorAtLocationXY = siblingImage.get(ix, iy);
var psize = map(mouseY, 0, height, 1, 7); // size of rectangles based on y coordinate of mouse
var pcorner = 1; // how curved the corners of the rectangle are
var pdimenW = map(mouseX, 0, width, 4, 8); // As mouse moves to right, width increases, height decreases
var pdimenH = map(mouseX, 0, width, 8, 4); // As mouse moves to left, height increases, width decreases

noStroke();
push()
translate(px, py);
if (mouseIsPressed) { // if mouse is pressed, rectangles are rotated 45 degrees
rotate(PI / 4);
}
scale(psize); // rectangle size increases and decreases as mouse moves vertically
fill(theColorAtLocationXY);
rect(0, 0, pdimenW, pdimenH, pcorner, pcorner, pcorner, pcorner); //creates colored squares
pop();
}
``````

For this project, I chose a photo of my siblings and I when we were younger (I’m the one who’s lying on the floor half covered by a blanket). I wanted to create something that was fun and interactive, while also obscuring the contents of the photo a little, allowing you to view different layers of information, and conveying the emotions and silliness of that memory. The rectangles scale in size, width and height depending on the coordinates of the mouse, and when you click, the rectangles rotate 45 degrees.