Category: Project-09-Portrait

sketch-231.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project-09

var underlyingImage;
var xarray = [];
var yarray = [];

function preload() {
    var myImageURL = "https://i.imgur.com/Z0zPb5S.jpg?2";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(20);
}

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 = underlyingImage.get(ix, iy);

    stroke(theColorAtLocationXY);
    strokeWeight(random(1,5));
    var size1 = random(5,15);
    //brush strokes from bottom left to top right diagnal direction
    line(px, py, px - size1, py + size1);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    var size2 = random(1,8);
    for (var i = 0; i < xarray.length; i++) {
        stroke(theColorAtTheMouse);
        strokeWeight(random(1,5));
        //an array of brush strokes from top left to bottom right diagnal direction controlled by mouse
        line(xarray[i], yarray[i],xarray[i]-size2,yarray[i]-size2);
        size2 = size2 + 1;
        if (i > 10) {
            xarray.shift();
            yarray.shift();
        }
    }
}

function mouseMoved(){
    xarray.push(mouseX);
    yarray.push(mouseY);
}

This is a weaving portrait of my friend Fallon. The color pixels will be concentrated on the cross between strokes of two directions

sketch

//Minjae Jeong
//Section B
//minjaej@andrew.cmu.edu
//Project-9


var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/4WraCGa.jpg";
    underlyingImage = loadImage(myImageURL);
    underlyingImage.resize(480,480);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

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 = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    var size = random(10, 30); //random from 1-10
    ellipse(px, py, size, size); //draw circles!

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    textSize = random(10, 30);
    text("SQUARE", mouseX, mouseY); //draw "squares"
}

For this project, I used a photo of my roommate. One issue I could not solve was to adjust the size of the picture according to the canvas size, which is currently 3024 x 4032. Because of it, I do not think canvas is showing the whole image properly, which is why there are so many browns on canvas.

sketch

//Fallon Creech
//Section B
//fcreech@andrew.cmu.edu
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/nmxNHkl.jpg?1";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

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 = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    textStyle(NORMAL);
    textSize(random(15, 25));
    text("sketch", px, py);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    textStyle(BOLDITALIC);
    textSize(random(25, 35));
    text("doodle", pmouseX, pmouseY);
}

For this project, I used a picture of a friend sketching in her sketchbook. I decided to differentiate between interactions of the animation by using different text styles and words; the animation randomly generates the word “sketch,” but the word “doodle” appears at the mouse’s location, giving the animation some visual complexity. 

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);
}