Project-09

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-09-Portrait

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/P9QQAmA.png";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 416);
    background(255);
    underlyingImage.loadPixels();
    frameRate(500);
}

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

    // drawing rectangles
    noStroke();
    fill(theColorAtLocationXY, random(0, 255));
    rect(px, py, random(5, 20), random(5, 20));

    // writing Bells
    noStroke();
    fill(theColorAtLocationXY);
    textFont('Helvetica');
    textSize(5);
    text("BELLS", px, py);
}

// resets with blank canvas once mouse pressed
function mousePressed() {
    clear();
}

For this project, I used a photo of my friend, Bella. I think this was especially fun and meaningful because it felt as if the final product had a specific recipient. I initially had larger end bounds for the dimensions of the rectangles, but realized that if the rectangles are too big, the end stage seems a bit too abstract to the point that you can hardly recognize the person.

 

sketch

// Han Yu
// Section D
// hyu1@andrew.cmu.edu
// Project 09 Portrait

var poolpic; //image variable
var pattern=["♛","♨","☆","♞","✌︎","🀧"]; //stores patterns to be drawn later

function preload() {
    var myImageURL = "https://i.imgur.com/f4kVoqD.jpg";
    poolpic = loadImage(myImageURL);
}

function setup() {
    createCanvas(600,400);
    background(95,171,188);
    poolpic.loadPixels();    
}

function draw() {
    scale(0.333,0.333); //makes the original image smaller

    //location and color variable of each pattern
    var x = random(width*3);
    var y = random(height*3);
    var c = poolpic.get(x, y);
    var randomly = floor(random(0,5.9)); //pattern to be drawn
    var p = pattern[randomly];  //randmly picks an item from pattern

    noStroke();
    fill(c);
    textSize(random(30,80));
    text(p, x, y);
}

In this project I used a picture of my bf. I was inspired by cool symbols and characters used in other people’s projects so I decided to use an array of symbols that describes my bf in my project.

Portrait

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project-09-Portrait

// global variables
var underlyingImage;
var sx = [];
var sy = [];
var dx = [];
var dy = [];

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

function setup() {
    createCanvas(300, 400);
    background(255);
    underlyingImage.loadPixels();

    for (i = 0; i < 1000; i++){ // for loop to randomly pick the positions and speed of each square
        sx[i] = random(width);
        sy[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
    }
    frameRate(10);

}

function draw() {
    background(255);
    noStroke();
    for (i = 0; i < 1000; i++) {
        var colorAtSquare = underlyingImage.get(sx[i], sy[i]); // the color of each square changes as it moves across
        // the screen to match the photo under neath
        fill(colorAtSquare);
        rect(sx[i], sy[i], 20, 20); // drawing the rectangles and updating their locations with the speed
        sx[i] += dx[i];
        sy[i] += dy[i];

        // lets the rectangles wrap arround to the other side when they go off screen
        if (sx[i] > width){
         sx[i] = 0;
        } else if (sx[i] < 0) {
        sx[i] = width;
        }
        if (sy[i] > height) {
            sy[i] = 0;
        } else if (sy[i] < 0) {
            sy[i] = height;
        }
        
    }




}

It took me a while to decide on how I wanted to make this portrait. Although I knew which photo I wanted to do, I wasn’t sure how I wanted to manipulate it. I ended up really like this project because it allowed me manipulate photos in fun and interesting ways.

my-sketch.js

//Lan wei
//lanw@andrew.cmu.edu
//Section D
//Project-09

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

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

function draw() {
   var x = floor(random(img.width));
   var y = floor(random(img.height));
   push();
   translate(x, y);
   var col = img.get(x, y);
   stroke(col);
   strokeWeight(map(brightness(col), 0, 100, 3, 1)); //line weight depending on brightness
   var length = map(brightness(col), 0, 100, 25, 5); //line length depending on brightness
   rotate(random(0, PI));
   line(- length/2, 0, length/2, 0);
   pop();
}

My idea is using lines to create the abstract portrait. To emphasize the human figure instead of the dark background, and also to make bright areas look brighter, I made the lines in areas with smaller brightness thicker and longer. I think it would look nicer if I choose a picture with more color changes.