Project-09-Portrait

After looking through all the examples and code offered on the website, I decided I wanted to experiment with a number of designs. I decided I would do this by dividing up my screen and designating a type of design/pattern for each section. I was originally going to divide it up equally into three parts, but then I experimented a bit and decided to make it more interesting than that. I first decided to bring attention to my eyes by having the section over them be in HSB color value. Then I had there be two sections like this, one vertical and one horizontal, overlapping on one of my eyes, creating a cross section. This divided up the screen, and I filled up the sections this cross created with different patterns.

sketch

var myImage;
var topOfEyes = 100;//general height of where the top of my eyes are
var bottomOfEyes = 160;//general height of where the bottom of my eyes are
var leftOfEye = 260;//general left of where the left of my right eye is
var rightOfEye = 320;//general right of where the right of my right eye is

function preload() {
    var imgURL = "https://i.imgur.com/P9ng7Hd.jpg";
    myImage = loadImage(imgURL);//loads image
}

function setup() {
    createCanvas(480, 480);
    background(0);
    myImage.loadPixels();//loads pixels from image
    frameRate(1000);//faster framerate
}

function draw() {
    myImage.resize(620,480);//resizes image so my face fits onscreen
    var pixlX = random(width);//random pixel from width values
    var pixlY = random(height);//random pixel from height values
    var constrX = constrain(floor(pixlX), 0, width - 1);//constrains x value 
    //and keeps it at whole number
    var constrY = constrain(floor(pixlY), 0, height - 1);//constrains y value 
    //and keeps it at whole number
    var colorFromXY = myImage.get(constrX, constrY);//constrains color to image
    noStroke();

    push();
    colorMode(HSB,100);//changes color value to HSB
    fill(colorFromXY);//takes color from photo "below" it
    //ribbons
    ellipse(pixlX, random(topOfEyes,bottomOfEyes), 3, 3);//verticle red line
    ellipse(random(leftOfEye,rightOfEye),pixlY, 3, 3);//horizontal red line
    pop();

    fill(colorFromXY);//takes color from photo "below" it
    ellipse(pixlX,pixlY, 5, 5);//puts circles of portrait across screen
    //gradation of rectanbgles that slowly increases from 320 to width
    rect(random(rightOfEye,rightOfEye + 32),pixlY, .5,.5);
    rect(random(rightOfEye + 32,rightOfEye + (32 * 2)),pixlY, 1,1);
    rect(random(rightOfEye + (32 * 2),rightOfEye + (32 * 3)),pixlY, 1.5,1.5);
    rect(random(rightOfEye + (32 * 3),rightOfEye + (32 * 4)),pixlY, 2,2);
    rect(random(rightOfEye + (32 * 4),rightOfEye + (32 * 5)),pixlY, 2.5,2.5);
}