Project 09

// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-09

var christine;

function preload() {
    var myImageURL = "https://i.imgur.com/beoY7rv.jpg"; // load image
    christine = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    christine.loadPixels();
    frameRate(50000000);
}

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 rx = px + random(0,6); // randomize line x-value
    var ry = py + random(0,4); // randomize line y-value
    var rs = random(1,4); // randomize stroke weight
    var theColorAtLocationXY = christine.get(ix, iy);

    strokeWeight(rs);
    stroke(theColorAtLocationXY);
    line(px,py,rx,ry);
}

I chose a photo of my gorgeous current roommate (although the style of the photo made it hard to really capture her eyes!). I knew I wanted to do lines in order to emulate “strokes” and to further emulate this, I tried to vary the stroke weights as well as direction and lengths of the line. I didn’t want to make the line extend too far in order to ensure that facial features could moderately be made out.

I very much admire impressionist type paintings and so I tried to emulate thicker brush strokes. I made the frame rate ‘50000000’ because I preferred to see the photo render quickly. Below are photos further in to rendering and near completion.

atreu-proj-09

/*Austin Treu
    atreu@andrew.cmu.edu
    Section B
    Project-09*/

var underlyingImage, strtX = 0, strtY =0, iter = 0;

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

function setup() {
    createCanvas(240, 427);
    background(0);
    underlyingImage.loadPixels();
    frameRate(1000);
}

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);
    ellipse(px, py, 6, 6);
}

I found this picture of my little brother in my files, thought it was an interesting snapshot, so I utilized it in this. It is interesting to watch the image be formed and try to figure out what it is before it is complete.

Final Image:

Original Image:

chris

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-09-Portrait

var Chris;

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

function setup() {
    createCanvas(480, 367);
    background(0);
    Chris.loadPixels();
    frameRate(1000);
}

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

    //randomly creating the X length and thickness
    var len = random(2, 7);
    var thick = random(1, 5);

    //creating the X's
    stroke(col);
    strokeWeight(thick);
    line(px - len, py - len, px + len, py + len);
    line(px - len, py + len, px + len, py - len);
}

For this project, I used a photo of my friend, Chris. I thought the X’s were a nice touch and I liked how I generated the X’s using randomness (in both the length and the thickness.

This is a photo of the early stage:

This is the final product:

(The original photo was of my friend sitting on a colorful staircase)

self-portraits

//Yingyang Zhou
//yingyanz@andrew.cmu.edu
//Project-09
//section A

var img;
var randomPos = 0;

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

function setup() {
    createCanvas(360, 480);
    background(200);
    // imageMode(CORNER);
    img.loadPixels();
    frameRate(500);
}
function draw(){

  //image(img, 0, 0, width, height);
  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 col = img.get(ix, iy);

  noStroke();
  fill(col);
  var randomSize = random(10);
  ellipse(px, py, randomSize, randomSize);
  stroke(col);
  strokeWeight(2);
  line(px+random(10), py+random(10), px+random(10), py+random(10));
  strokeWeight(1);
  line(px+random(10), py+random(10), px+random(10), py+random(10));
}

I like this project for a chance to envolve with something we are familiar in our daily life and it provide an interesting to way to look at the common thing in a different way.

sketch

//Kade Stewart
//Section B
//kades
//Project-09


var pic;
var bar = 0;
var barspeed = 5;


function preload() {
    pic = loadImage("https://i.imgur.com/TQDoVD9.png");
}


function setup() {
    createCanvas(480, 480);
}

function draw() {

	//resets the image every time draw is called
	image(pic, 0, 0);
	loadPixels(pic);


	// loop thru each row
	for (var y = 0; y < height; y++) {

		//every row, shift the pixels over some random amount
		//the limit is dictated by how recently an invisible bar has passed over it
		var limit = floor( ( ( (height + bar) - y) % height ) / 10 );
		var shift = floor(random(0, limit));

		// if (limit > 10) {
		// 	continue;
		// }

		// inner loop that goes thru each pixel in the row
		for (var x = 0; x < width; x++) {

			//this is the way to target each pixel in the pixels array
			var i = ( ( (x + shift) % width ) + y * width ) * 4;

			//setting the color of a pixel to the one a certain number away
			//pixels[i] is the red, [i+1] is the green, [i+2] is the blue
			set(x,y, color(pixels[i], pixels[i + 1], pixels[i + 2]))

		}

	}

	//actually draws the pixels as dictated above
	updatePixels();

	//moves the invisible bar down, wrapping when it hits the bottom
	bar = (bar + barspeed) % height;

}

I wanted to make a portrait that emulated the updating of a radar screen. While I didn’t do it exactly, I ended up using a downward moving bar to update the portrait. At first, it was wiping the screen to black. My final has the invisible bar resolving a horizontal shift in the bars of pixels.

I am using 1 of my grace days for this late submission.

This project was centered around the idea of portraying brightness by the size of the object and letting background shine through as opposed to just coloring them. This was achieved by taking the brightness value of each pixel visited (this version visits only every 15 pixels), multiplying them by a coefficient, and using as the size of the small triangles that make up the picture. The ultimate effect is surprisingly good, with just two colors and shades able to portray nuanced lighting and shadows.

sketch

var portrait;
var spacing =15; // distance between columns
var sizingcoefficient = 12; //ratio that greyscale value is converted into triangle dimension

function preload() {
    //var myImageURL = "./selfportrait.jpg";
    var myImageURL = "https://imgur.com/a/MHAIBeE"
    portrait = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background('grey');
    portrait.loadPixels();
    frameRate(120);

   	/*
	for(var i = 0; i <width*height; i+=15){
    	var pixelx = i%width; //x position of pixel
    	var pixely = floor(i/width); //y position of pixel
    	var greyscalevalue = brightness(portrait.get(pixelx, pixely))/12;

    	
    	noStroke();
    	//fill(greyscalevalue);
   		//ellipse(pixelx, pixely, 3, 3);
   		fill('orange');
   		//ellipse(pixelx, pixely, greyscalevalue, greyscalevalue);
   		triangle(pixelx, pixely, 
   			pixelx + greyscalevalue, pixely - greyscalevalue, 
   			pixelx + greyscalevalue, pixely + greyscalevalue);

  	}
	*/
	}

var i = 0;

function draw() {
		
	var pixelx = i%width; //x position of pixel
   	var pixely = floor(i/width); //y position of pixel
   	var greyscalevalue = brightness(portrait.get(pixelx, pixely))/sizingcoefficient; //retrieving brightness of pixel and converting into "greyscale value"

   	noStroke();
   	//fill(greyscalevalue);
   	//ellipse(pixelx, pixely, 3, 3);
	fill('orange');
   	//ellipse(pixelx, pixely, greyscalevalue, greyscalevalue); 
	triangle(pixelx, pixely, 
   	pixelx + greyscalevalue, pixely - greyscalevalue, 
   	pixelx + greyscalevalue, pixely + greyscalevalue); //drawing triangle; size of triangle is determined by brightness of pixel

	i+= spacing; //incrementing pixel; draw loop is essentially a giant for-loop

	if (i == width*height){
		i = 0;
	}
}

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project - 09
*/

var underlyingImage;

function preload() {
  var myImageURL = "https://i.imgur.com/VBTpoj5.jpg"; // i uploaded my own photo to http://i.imgur.com and get this link
  underlyingImage = loadImage(myImageURL);
}

function setup() {
  createCanvas(720, 480);
  background(0);
  underlyingImage.loadPixels();
  frameRate(2000); // make frame rate high to updare the image faster
}

// this function/routine is to get the pixel value of (x, y)
function getPixel(image, x, y) {
  var pix = 4 * (y * image.width + x);
  return color(image.pixels[pix], image.pixels[pix + 1], image.pixels[pix + 2]);
}

var iClickCurrent = 0,
  iCurrentEffect = 0,
  iPrevEffect = 0;

function draw() {
  if (iClickCurrent == 0) {
    drawGraduallyUsingEffects();
  } else { // display the final result at once instead of waiting for gradual update
    drawAtOnceUsingEffects();
  }
}

function drawGraduallyUsingEffects() {
  var px = random(width); // get a random x position
  var py = random(height); // get a random y position
  var ix = constrain(floor(px), 0, width - 1); // constrain it within canvas
  var iy = constrain(floor(py), 0, height - 1); // constrain it within canvas
  var theColorAtLocationXY = getPixel(underlyingImage, ix, iy);

  if (iCurrentEffect == 0) {
    fill(theColorAtLocationXY);
    text("i am jenni", ix, iy); // using text to update the image
  } else if (iCurrentEffect == 1) {
    noStroke();
    fill(theColorAtLocationXY);
    ellipse(ix, iy, 10, 10); // using circle
  } else if (iCurrentEffect == 2) {
    noStroke();
    fill(theColorAtLocationXY); 
    rect(ix, iy, 10, 10); // using rect
  }
}

function drawAtOnceUsingEffects() {
  var i = 0;
  // noprotect
  for (var iy = 0; iy < underlyingImage.height; iy += 5) {
    for (var ix = 0; ix < underlyingImage.width; ix += 5) {
      var theColorAtLocationXY = getPixel(underlyingImage, ix, iy); // get the color of the current pixel and drive an effect
      if (iCurrentEffect == 0) {
        fill(theColorAtLocationXY);
        text("i am jenni", ix, iy);
      } else if (iCurrentEffect == 1) {
        noStroke();
        fill(theColorAtLocationXY);
        ellipse(ix, iy, 10, 10);
      } else if (iCurrentEffect == 2) {
        noStroke();
        fill(theColorAtLocationXY);
        rect(ix, iy, 10, 10);
      }
    }
  }
}

function mousePressed() {
  iClickCurrent = (iClickCurrent + 1) % 2;
  if (iClickCurrent == 0) {
    while (iCurrentEffect == iPrevEffect) { // make sure the effect doesn't repeat
      iCurrentEffect = floor(random(0, 3)); // get random selection of effect
    }
    iPrevEffect = iCurrentEffect;
    loop ();
  }
  else {
    noLoop ();
  }
  background(0);
}

For this portrait project, I applied 3 effects onto a photo of myself from when I was in elementary school. The 3 effects I used were squares, ellipses, and the phrase “I am Jenni.” It was fun to choose a photo and customize the effects.

sketch

/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-09
*/

var underlyingImage;

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

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

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);
    rect(px, py, 10, 10);

}

This is Mimi. She is eating pizza. I thought it’d be a fun creating this build up to see a girl munching on pizza.

Original Photo

Mid-way through Rendering

Nearly finished Rendering

finalfinal2

//Elizabeth Maday
//Section A
//emaday@andrew.cmu.edu
//Project 9

var theImage;

function preload() {
	theImage = loadImage("https://i.imgur.com/zBgacYu.png");
}

function setup() {
	createCanvas(400, 480);
	background(0);
	theImage.loadPixels();
	frameRate(100);
}

function draw() {
    translate(-10, -10);
    
    var x = random(width);
    var y = random(height);
    var col = theImage.get(x, y);

    stroke(col);
    var lengthmap = constrain(map(15, 0, mouseY, 0, 20), 5, 50);
    var weightmap = constrain(map(3, 0, 10, 0, mouseX/50), 0.2, 5);

    push();
    strokeWeight(weightmap);
    line(x + random(-20, 20), y + random(-10, 10), x + lengthmap, y + lengthmap);   
    pop();

    if (mouseX > width/2) {
        fill(col);
        ellipse(x, y, 2, 2);
    }
}

I liked working on this project because I got to see all the things that I could play around with while working in this format of altering a pre-existing image. I am interested in doing more creative things with this in the future. For this project, I used the position of the mouse to manipulate line length, strokeWeight, and whether or not ellipses are drawn.

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project 9

var img;

function preload() {
	var me = "https://i.imgur.com/iiz3eb4.jpg";
	img = loadImage(me);
}
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    frameRate(100);
}

function draw() {
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width);
	var iy = constrain(floor(py), 0, height);
	var color = img.get(ix,iy);

	noStroke();
	fill(color);
	shape(px,py,random(4,9),random(9,15));

}


function shape(x, y, r, n) {
  var angle = TWO_PI / n;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * r;
    var sy = y + sin(a) * r;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}