Tanvi Harkare – Project 09 – Portrait

tanvi09

/* Tanvi Harkare
tharkare@andrew.cmu.edu
Section B
Project-09*/

var img;
var ix;
var iy;
var px;
var py;
var sizeC = 10;
var colAtLoc;

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

function setup() {  
    createCanvas(480, 480);
    background(255);
    img.loadPixels();
}

function draw() {
    //x and y locations for ellipses
    px = int(random(0, 480));
    py = int(random(0, 480));
    //saving x and y locations of mouse
    ix = mouseX;
    iy = mouseY;
    //colors for circle and text
    colAtLocCircle = img.get(px, py);
    colAtLocText = img.get(ix, iy);
    //drawing text based on mouseX and mouseY
    noStroke();
    fill(colAtLocText);
    textSize(6); 
    text("PK", ix - 3, iy + 3); //so mouse is in center of text
    //setting random size and drawing circles
    randomSize();
    fill(colAtLocCircle);
    ellipse(px, py, sizeC, sizeC);
}

function randomSize(){
    sizeC = int(random(0, 10));
}

For this project I chose a picture of my friend Prerana that I took myself last year! Circles appear on the canvas in a random order, and also vary in size because of the randomSize function. In addition to the points, if you run the mouse over the canvas, her initials appear in the color of wherever the mouse position is located based off the image pixel color.

original photo
If the circles were set to the same size each frame
how the final image could potentially look

Leave a Reply