Category: Section B

sketch.js

//Hanna Jang 
//hannajan@andrew.cmu.edu
//Section B 
//Project -09

var underlyingHanna;
var randommax=13;

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

function setup() {
    createCanvas(500, 500);
    background(255);
    underlyingHanna.loadPixels();
    frameRate(40);
}

function draw() {
    var px = random(width);	//random y from canvas width
    var py = random(height);	//random x from canvas height
    var thex = constrain(floor(px), 0, width-1);
    var they = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingHanna.get(thex, they); //var color from image background 

    noStroke();
    fill(theColorAtLocationXY);
    
    //make smiley face 
    
    //happy mouth is made 
  arc(px, py, 10, 10, 0, PI); 
  
  //happy eyes are made 
  ellipse(px-3, py-5, 5, 5); 
  ellipse(px+3, py-5, 5, 5); 

	//when mouse moves, a trail of squares follow 
    var theColorAtTheMouse = underlyingHanna.get(mouseX, mouseY);
	stroke(theColorAtTheMouse);
	rect(mouseX, mouseY, 3, 3);
}

function mousePressed(){
	//random sizes for sad face generation from mouse press 
	var sizex=random(7,randommax); 
	var sizey=random(7, randommax); 
	 var Mousecolor = underlyingHanna.get(mouseX, mouseY);

	//sad mouth is made 
	 fill(Mousecolor);
    arc(mouseX, mouseY, sizex, sizey, PI, TWO_PI); 
    //sad eyes are made 
    ellipse(mouseX-3, mouseY-10, 5, 5); 
    ellipse(mouseX+3, mouseY-10, 5, 5); 
}

I decided to do a self-portrait image background of me smiling into the camera. I then thought of an idea to use faces for the custom pixels, to make up a bigger picture of a smiling face.

nayeonk1

var portrait;

//image loading from imgur
function preload() {
    var imageURL = "https://i.imgur.com/WgHeMvC.jpg";
    portrait = loadImage(imageURL);
}

//setup loadPixel function here & setup frame Rate(speed)
function setup() {
    createCanvas(480, 480);
    background(0);
    portrait.loadPixels();
    frameRate(20);
}

//draw stitches and ellipses changing there size and length depend on mouse position
function draw() {
    var px = random(width);
    var py = random(height);
    var px1 = random(width);
    var py1 = random(height);
    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var col = portrait.get(ix, iy);
    var dia = round(constrain(mouseX / 5, 0, 15))
    var len = round(constrain(mouseY / 5, 0, 10))
//ellipse
    noStroke();
    fill(col);
    ellipse(px, py, dia, dia)
//stitches
    stroke(col);
    strokeWeight(random(0.5, 2))
    line(px1, py1, px1 + len, py1 + len);
    line(px1 + len, py1, px1, py1 + len);
    pop();

}

I choose one of the photos from a last year trip to japan. It was fun and interesting trip. So I wanted to make this pixel loading image to be shine as the memory.
Here are some images of portrait.

This project was SO MUCH FUN. I had way too many ideas for just this week, so after I finish this post I’ll probably go back to making portraits.

At first I had only abstract concepts to work towards. Like gravity was definitely something I wanted to play around with. Unfortunately, I ran into issues with how ridiculously long it took to load the program every time I ran it…. there was no way I was going to be able to make anything that complicated. I was worried that I might not even finish the project! (every time I loaded the image it took on average 7 minutes to load. That’s like 8 an hour).

So, a good portion of my work on this project was figuring out how to make it run faster. After reading around on the reference page, I figured out if I used loadPixels, I could directly access the pixels[] array, and thus get the pixels information way faster. And.. hurray the code runs almost instantly!

I had a couple hours left, so I didn’t have room to be QUITE as ambitious as I wanted to be for this project (I was honestly going to turn in like 5 different codes as variations on a theme). Nonetheless, I think it turned out pretty well. I wanted to get a sort of old video game aesthetic going, so first I coded that up.

I played around with the size of the squares used to create the image, and the contrast between the darker parts (like the hair and lips) and the lighter parts (skin), but ultimately settled on the image above. Next, I (accidentally) made the stroke() color on the square pixels 10 below the fill color. This gave the image a more tile-esque look to it — closer to that old video game vibe I was going for. I decided to play around with that (intentionally this time), and settled on a white stroke. The reason being, is I wanted to print out the image on a huge poster, and have the affect of a bunch of separated squares, instead of a filled canvas.

At this point, I felt like the portrait was pretty good, but I wanted to do something a little bit more. Also, I just wanted to do something with code that is a bit out of my comfort zone… so I implemented objects into the portrait. I made each “tile” start at the bottom of the canvas, and slide upwards at varying speeds until it reached its correct location on the canvas.

I particularly like the effect that occurs around the bottom of the hair, as the dark pixels are sliding under the lighter pixels that have already reached their destination.

Click the in the image below if you want to see the program run again!

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Project 9

var img;
var rectSize = 9 //size of square pixels
var margin = 1 //gap between square pixels


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

function myTile(x, y, finalY, dy, color) {
    this.x = x
    this.y = y
    this.finalY = finalY
    this.dy = dy
    this.color = color
    this.draw = function() {
        rectMode(CENTER);
        stroke(255);
        strokeWeight(margin+1) // creates a white border around the tiles for visual emphasis and irregularity
        rect(this.x, this.y, rectSize, rectSize);
    };

    this.move = function() {
        if(this.y > this.finalY) {
            this.y = this.y - this.dy; //move the tile upwards
        }
        
    };
}

var myTile
var allTiles = [];

function setup() {
    createCanvas(img.width, img.height);
    background(200); 
    pixelDensity(1); //scales pixelDensity to image
    image(img, 0, 0)
    loadPixels(); //loads pixel array
    for(y = 0; y < img.height; y += rectSize+margin) { //scans through one row at a time from top to bottom
        for(x = 0; x < img.width; x += rectSize+margin) { //scans through all of the pixels in the row
            var d = pixelDensity();
            var off = (y * width + x) * d * 4; //location of the R value of x and y coordinate in pixel array
            var bright = pixels[off];
            
            if(bright  < 30) { //checks current pixels brightness against current brightest pixel
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 0));
            } else if(bright < 40 & bright >= 30) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 20));
            } else if(bright < 60 & bright >= 40) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 40));
            } else if(bright < 70 & bright >= 60) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 60));
            } else if(bright < 80 & bright >= 70) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 70));
            } else if(bright < 90 & bright >= 80) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 130));
            } else if(bright < 100 & bright >= 90) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 140));
            } else if(bright < 110 & bright >= 100) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 140));
            } else if(bright < 120 & bright >= 110) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 150));
            } else if(bright < 130 & bright >= 120) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 160));
            } else if(bright < 140 & bright >= 110) { //switch from lower bound to upper bound
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 175));
            } else if(bright < 170 & bright >= 140) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 210));
            } else if(bright < 200 & bright >= 170) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 220));
            } else if(bright < 220 & bright >= 200) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 230));
            } else if(bright < 240 & bright >= 220) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 250));
            } else if(bright < 260 & bright >= 240) {
                allTiles.push(new myTile(x, height+(rectSize/2), y, random(2,4), 255));
            }
            
        }
    }
    print(img.width, img.height)


}

function draw() {
    scale(.65);
    background(255);
    for(i = 0; i < allTiles.length; i++) {
        fill(allTiles[i].color);
        allTiles[i].draw();
        allTiles[i].move();
        
    }
}

function mouseClicked() {
    for(i = 0; i < allTiles.length; i++) {
        allTiles[i].y = height + rectSize/2
        
    }
}

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project 09

var imgYugy;

function preload() {
    var yugyURL = "https://i.imgur.com/Ghau5tT.jpg"; 
    //load image using the URL
    imgYugy = loadImage(yugyURL);
}

function setup() {
    createCanvas(480, 480);
    background(255);

    imgYugy.loadPixels();
    //how fast curves get drawn on canvas
    frameRate(750);
}
 
function draw() {
    //calling created functions
    circleYugy();
    curveYugy();
}

//circular pixels following position of mouse
function circleYugy() {
    var startX = mouseX;
    var startY = mouseY;
    var limitX = constrain(floor(startX), 0, width - 1);
    var limitY = constrain(floor(startY), 0, height - 1);
    var color = imgYugy.get(limitX, limitY);
    var diam = random(3, 10);

    noFill();
    stroke(color);
    ellipse(startX, startY, diam, diam);
}

//diagonal lines at random
function curveYugy() {
    var startX = random(0, width);
    var startY = random(0, height);
    var limitX = constrain(floor(startX), 0, width-1);
    var limitY = constrain(floor(startY), 0, height-1);
    var color = imgYugy.get(limitX, limitY);
    var diagonalLength = random(5, 25);
    var thickness = random(.5, 3);
    var curveScale = random(.1, .6)

    stroke(color);
    strokeWeight(thickness);
    noFill();
    beginShape();
    curveVertex(startX, startY);
    curveVertex(startX, startY);
    curveVertex(startX+curveScale*diagonalLength, startY+.6*diagonalLength);
    curveVertex(startX+diagonalLength, startY+diagonalLength);
    curveVertex(startX+diagonalLength, startY+diagonalLength);
    endShape();
}

There are two ways the portrait gets drawn onto the canvas: through random curves following the FrameRate and circular lines that follow the position of the mouse while capturing pixel color of each location. I wanted to create a paint-brushed effect as the end product while incorporating another geometry to disturb what could be a smooth surface. Bellow are the screenshots of the stages with just the curves and with circular curves.

           original picture                first stage (just curves)               second stage

   first stage (with circles)                 second stage                            third stage