Category: Project-09-Portrait

sketchDownload

 //Yanina Shavialena
 //Section B

//My portrait
var image;
//Places I've been/Want to go to
var words = ['Belarus','USA','Bulgaria','Poland','Spain','France','South Korea'];
//The state of mouse pressed
let pressedState = false;

//This function loads the image
function preload() {
    var imagelink= "https://i.imgur.com/CQ38vbw.jpg";
    image = loadImage(imagelink);
}
 
//This function created canvas and makes sure the picture is in dimensions of the canvas
function setup() {
    createCanvas(480, 480);
    image.resize(480, 480); 
    background(0);
    image.loadPixels();
    frameRate(10000000);
}
 
function draw() {
    //random x and y positions and get the color from that x and y from my portrait
    var x = random(width);
    var y = random(height);
    var c = image.get(x, y);

    if( pressedState == false){
        //random start controlling point
        var x1 = x + random(-25,25);
        var y1 = y + random(-25,25);
        //random final point
        var x3 = x + random(-15,15);
        var y3 = y + random(-15,15);
        //random final controlling point
        var x4 = x3 + random(-25,25);
        var y4 = y3 + random(-25,25);

        stroke(color(c));
        curve(x1, y1, x, y, x3, y3, x4, y4);

        //hearts at the beginning and final point
        heart(x,y,5,c);
        heart(x3,y3,5,c);
    }

    //puts words at random points
    else{
        noStroke();
        fill(c);
        textSize(random(10));
        text(random(words),x,y)
    }
}

//when mouse is pressed, mouseState is updated and the background is reset
function mousePressed(){
    if(pressedState == false) {
        pressedState = true;
    }
    else {
        pressedState = false;
    }
    background(0);
}

//creates hearts to use for the ends of the lines
function heart(x, y, size, color) {
    fill(color);
    beginShape();
    vertex(x, y);
    bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
}

I really enjoyed this project because I could finally implement the idea of pixels and creativity. It was hard to come up with something at first but then I thought about what could describe me in my portrait so I decided to use an emoji of a heart because I think love is one of the strongest feelings on Earth and after the click of a mouse multiple countries would pop up randomly to make up an image: one of the countries is where I was born, one of the countries is where I live right now, then the remaining countries are where I visited or where I want to visit.

var img;

function preload() {
    img = loadImage("https://i.imgur.com/TWN7sA6.jpeg");
}

function setup() {
    createCanvas(300, 300);
    frameRate(60);
    noStroke();
    img.resize(width, height);
    img.loadPixels();
}

function draw() {
    fill(0);
    text("keep mouse pressed for different effect", 50, 10);

    if(mouseIsPressed) { // while mouse is pressed, generate random squares 
        let pix_x = floor(random(img.width));
        let pix_y = floor(random(img.height));
        let pix = img.get(pix_x, pix_y);
        fill(pix);
        var square_x = random(width);
        var square_y = random(height);
        let mapX = map(mouseX, 0, width, 0, 20);
        square(square_x, square_y, mapX);
    } else { // otherwise, use circles 
        let x = floor(random(img.width));
        let y = floor(random(img.height));
        let pix = img.get(x, y);
        fill(pix);
        circle(x, y, random(15)); //diameter random 
    }
}

I used an image that I found on imgur by Mihaela Noroc, a Romanian photographer. I chose this particular image because it involved a lot of vibrant colors, which I thought would be fun to work with. Here are some screenshots of my portrait:

The first thing that came to mind when thinking of portrait is Warhol’s Mao. I radially sampled a portrait of Mao and mapped the sum of each sampled pixel’s red and blue values from 0 to 5, and used that as the size of each dot to make a pop-art-esk halftone effect. I attached a photo because the actual output is too big. Enjoy!!

var img;
var step = 5;
var rmax = 6;
var xpos = [];
var ypos = [];
var rad = [];

function preload() {
    img = loadImage('https://i.imgur.com/R13OPCr.jpeg');
}


function setup() {
    createCanvas(2*530, 2*670);
    image(img, 0, 0, width/2, height/2);
}


function draw() {
    rectMode(CENTER);
    noStroke();
    var xposNum;
    var yposNum;
    for (var r = 0; r < img.width; r+=step) {
        for (var theta = 0; theta < img.height; theta+=step) {
            xposNum = img.width/2+r*cos(radians(theta));
            yposNum = img.height/2+r*sin(radians(theta));
            var c = get(xposNum,yposNum);
            fill(c);
            xpos.push(xposNum);
            ypos.push(yposNum);

            c = red(c)+blue(c);
            c = map(c, 0, 510, 0, rmax);
            if (xposNum > img.width || yposNum > img.height || xposNum < 0 || yposNum < 0) {
                c = rmax;
            }
            rad.push(rmax - c);
        }
    }

    background(255);

    push();
    for (var i = 0; i < xpos.length; i++) {
        fill('RED');
        ellipse(xpos[i], ypos[i], rad[i]);
    }
    translate(width/2, 0);
    for (var i = 0; i < xpos.length; i++) {
        fill('GREEN');
        ellipse(xpos[i], ypos[i], rad[i]);
    }
    pop();
    push();
    translate(0, height/2);
    for (var i = 0; i < xpos.length; i++) {
        fill('BLUE');
        ellipse(xpos[i], ypos[i], rad[i]);
    }
    pop();
    push();
    translate(width/2, height/2);
    for (var i = 0; i < xpos.length; i++) {
        fill('MAGENTA');
        ellipse(xpos[i], ypos[i], rad[i]);
    }

    noLoop();
}