Month: October 2018

after one image is formed, click for another!

/*
Alice Fang
Section E
acfang@andrew.cmu.edu
Project-09
*/

var friend = []; // picture of friend!
var state = 0; // indicates which picture

function preload() {
	var imgURL = [];
	imgURL[0] = "https://i.imgur.com/62FXNHg.jpg"; // full body
  	imgURL[1] = "https://i.imgur.com/ieqrCP3.jpg"; // torso
  	imgURL[2] = "https://i.imgur.com/e4nON6h.jpg"; // portrait

  	for (var i = 0; i < imgURL.length; i++) {
  		friend[i] = loadImage(imgURL[i]);
  	}
}

function setup() {
  createCanvas(270, 400);
  background('lightyellow');
  imageMode(CENTER);
  noStroke();
  friend[state].loadPixels();
}

function draw() {
	// select pixels from center of canvas outwards
	var pX = randomGaussian(width / 2, 75);
	var pY = randomGaussian(height / 2, 75);
	
	// constrain to canvas
	var cX = constrain(floor(pX), 0, width - 1);
	var cY = constrain(floor(pY), 0, height - 1);

	// get color from pixel
	var col = friend[state].get(cX, cY);

	fill(col); 
	textSize(16 - (state * 4));
	text("美", cX, cY);
}

function mousePressed() { // change image
	background('lightyellow'); // 'refresh' canvas
	state = state + 1;
	if (state > 2) state = 0;
}

This is a picture of my friend Meijie that I took for a photo class last semester! Originally, the shape I used for the color was an ellipse, and I spent a lot of time playing around with image ‘resolution’ compared to the underlying image. When I changed it to the character 美, which is ‘beauty’ in Chinese, and also part of her name, I didn’t like how large the character was and the lack of detail it created in the image. Because of that, I explored with changing the image from a full body shot, to a torso shot, to a closer crop of her face; I couldn’t decide which one I liked better so I decided to use all three! As the image zooms in, the resolution becomes sharper!

sketch

/* Rachel Lee
Section E
rwlee@gmail.com
Project 09: Custom Pixel*/

var pic;

// preloads image
function preload() {
    pic = loadImage("https://i.imgur.com/iuFu4yy.jpg"); 
}

function setup() {
    createCanvas(358, 480);
    pic.loadPixels();
    background(255);
    imageMode(CENTER);
    frameRate(100);
}

function draw() {
	// randomizes position of pixel appearance 
    var x = constrain(floor(random(width)), 0, width - 1);
    var y = constrain(floor(random(height)), 0, height - 1);
    // randomizes arc width and height
    var w = random(5, 30);
    var h = random(5, 30);

    noStroke();
    // picks colors from pixel position 
    var picCol = pic.get(x, y);
    fill(picCol);
    // draws arcs as 'custom pixel'
    arc(x, y, w, h, HALF_PI, PI);
}

I decided to create a custom pixel portrait of my dad for his birthday this weekend. Due to its personal significance, I found this project to be super fun and rewarding, and hope he enjoys the project! I will be doing more of these in the future to try out different options.

Click to increase frameRate!

sketch

/* Dani Delgado
Section E
ddelgad1@andrew.cmu.edu
Project-09
*/

//global variable for calling image
var sunset;
//global variables for adjusting the frame rate and size of the rects
var pixNo = 0;
var fr = 15;

function preload() {
	//load the underlaying image into the canvas
    var picture = "https://i.imgur.com/BBnFAII.jpg";
    sunset = loadImage(picture);
}

function setup() {
	//set the overall canvas settings
    createCanvas(480, 320);
    background(250, 240, 230);
    frameRate(fr);

    //draw the underlaying image
    sunset.loadPixels();    
}

function draw() {
    //first set variables to draw the rects at random locations
    var rx = random(width);
    var ry = random(height);
    //constrain these rectangles to the canvas
    var pixx = constrain(floor(rx), 0, width - 1);
    var pixy = constrain(floor(ry), 0, height - 1);
    //create this variable to call the colors from the underlaying image
    var colPix = sunset.get(pixx, pixy);
    //create the variables for size and roundness adjustments
    var size;
    var round;
    //create the variable that sets the objects at diff angles
    var pixAng = random(radians(360));

    //these if statements change the size and roundness of the rects based on quantity 
    if (pixNo < 600) {
        size = 20;
        round = 1;
    } else if (pixNo < 1200) {
       	size = 16;
       	round = 2;
    }else if (pixNo < 1800) {
    	size = 12; 
    	round = 4;
    } else if (pixNo < 2400) {
    	size = 8;
    	round = 6; 
    } else {
    	size = 5;
    	round = 5;
    }

    pixNo ++; 
    
    //set rect color and stroke
    noStroke();
    fill(colPix);

    //draw the rects
    push(); 
    translate(rx, ry);
    rotate(pixAng); 
    rect(0, 0, size, size, round);
    pop();
}

function mousePressed() {
	//this function will increase frame rate whenever mouse is pressed
	fr += 10;
	fr = constrain(fr, 15, 125);
	frameRate(fr);
}

For this project, I decided to use a picture I took of my friend Margot last year! I enjoyed the project, despite struggling with it at first (my colors were all messed up and flashing for a while). I played around with a few ideas, including using different shapes and having the pixels be denser in certain areas, but I ultimately decided on making it a quantity based portrait where the more “pixels” appear, the smaller and rounder they get (however, this was done in a step-down sort of way rather than a smooth way). I also added the “click to increase frameRate” feature because of how impatient I was to see the final product appear and I figured other people would get impatient too.

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 9
*/

var img;

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

function setup() {
  createCanvas(400, 580);
  imageMode(CENTER);
  noStroke();
  background(18, 121, 80);
  img.loadPixels();
 
}

function draw() {
  //change angle of the stroke
  var angle = random(360);
  var x = floor(random(img.width));
  var y = floor(random(img.height));
  var pix = img.get(x, y);
  
  //make "paint stroke"
  //push();
  //rotate(radians(angle));
  fill(pix, 128);
  rect(x, y, 30, 10, 10, 10, 0, 10);
  //pop();



}

This is my mother. I chose this picture for the smile, which is so fun and genuine. I actually really like this project, I missed them from last week. I feel like I learn more from the projects because I have more room to experiment and mess around with code from scratch, as opposed to the set, set of ways I can solve an assignment. I suppose that’s a very artist thing of me to say, though.

This is the original photo, isn’t she cute?!