Category: Uncategorized

Jonathan Perez Looking Outwards 9

For this weeks Looking Outwards, I found ikrsek’s looking outwards 5 to be particularly interesting, which discussed the work of Hayden Zezula.

Hayden Zezula is an animator who creates designs for companies such as HBO, Adidas, and Adult Swim. To sum his work up in a word… unsettling.

A lot of Zezula’s work, to me, explores the relationship between 2D and 3D. This perhaps differs or expands a bit from ikrsek’s description of his work as a “3D style on a 2D screen”.

Hayden Zezula’s “end”, a gif depicting a 3D human leaning over and covering his/her face with his/her hands in a 2D landscape.

This image on “end” for instance, shows a 3 dimensional figure sitting on a pretty 2 dimensional surface. The relationship between the two is both visually and thematically interesting.

Also, as ikrsek mentions, much of Zezula’s work has to do with texture. This, to me, is the most interesting aspect of his work.

Hayden Zezula’s “Options” gif, displaying a plastic-like human face and a fuzzy, synthetic tongue

The image above shows the kind of unsettling contrast between textures that Zezula likes to use. In fact, it’s much more unsettling if you watch the gif, since part of texture/material is shown through movement (for example, the tongue sort of ripples when it hits the top of the mouth). Not only is this visually really interesting, but actually I think Zezula is working with deeper ideas of the relationship between synthetic and organic things, like how organic things like humans and plants can be defiled by synthetic things; How what should be organic can be “replaced” by something synthetic; and how unnatural organic things can be when twisted and manipulated.

Check out his work for yourself at

his instagram: https://www.instagram.com/zolloc/

or his website: http://zolloc.com/work/

 

svitoora – 08 Lines in the Dark

sketch

// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E

var face = "https://i.imgur.com/EyvV5mU.jpg"
var img;
var pixel_info = [];

// Createm Node
function new_pixel(x, y, k) {
	this.x = x;
	this.y = y;
	this.k = contrast_add(k, .25);
	this.m = map(k, 0, 255, 50, 1);
}


// Load links to image into an array
function preload() {
	img = loadImage(face)
}

w = 480;
h = w;

function setup() {
	createCanvas(w, h);
	background(255 * .75);
	image(img, 0, 0, w, h);

	// Extract Image info
	step = 1;
	for (Y = 0; Y < w; Y += step) {
		for (X = 0; X < h; X += step) {
			k = brightness(get(X, Y));
			// print(X, Y, k);
			pixel_info.push(new new_pixel(X, Y, k));
			step = random(7, 10)
		}
	}

	// Sort pixels by brightness
	pixel_info.sort(function(a, b) {
		return a.k - b.k
	});

	// Print info and clear screen
	print(pixel_info);
	background(255 * .2);

	// Draw
	noStroke();
	print(pixel_info.length)
	draw_face(.9);
	add_lines();
	draw_face(.2);
}

// Draw Face
function draw_face(opacity) {
	for (i in pixel_info) {
		x = pixel_info[i].x;
		y = pixel_info[i].y;
		k = pixel_info[i].k;

		r = map(k, 0, 255, 15, 1);

		noStroke();
		fill(k, k, k, 255 * opacity);
		ellipse(x, y, r, r);
	}
}

// Increase contrast
// x is input
// k is percent e.g. 0.1
function contrast_add(x, p) {
	if (x < 255 / 2) {
		x = x * (1 + p);
	} else {
		x = x * (1 - p);
	}
	return x
}

// Add lines for sophistication
function add_lines() {
	for (i in pixel_info) {
		x = pixel_info[i].x;
		y = pixel_info[i].y;
		k = pixel_info[i].k;
		for (i in pixel_info) {
			x1 = pixel_info[i].x;
			y1 = pixel_info[i].y;
			k1 = pixel_info[i].k;
			if (round(k) == round(k1)) {
				strokeWeight(1);
				stroke(k, k, k, 255 * .05);
				line(x, y, x1, y1);
			}
		}
	}
}

Portrait

I was experiencing some dark times in my life, therefore I decided to make a dark portrait. I was inspired by the algorithmic portrait.

I tried to replicate the portrait above, but sadly I couldn’t do in time. Since my portrait is a bit computationally heavy, here is a still image of it:

SaveSave

SaveSave

monicah1-project-09-SectionA

 

sketch


var frames = []; // An array to store the images
var characterX;  // The X location of the character
var characterY;  // The Y location of the character
var targetX;     // The X goal, from the user's click
var targetY;     // The Y goal, from the user's click
var exampleImgOnly; 

 
//---------------------------------------
function preload(){
  
    // These URLs are for the individual walk cycle images,
    // stored in the imgur album http://imgur.com/a/85DTu
    var filenames = [];
    filenames[0] = "http://i.imgur.com/svA3cqA.png";
    filenames[1] = "http://i.imgur.com/jV3FsVQ.png";
    filenames[2] = "http://i.imgur.com/IgQDmRK.png";
    filenames[3] = "http://i.imgur.com/kmVGuo9.png";
    filenames[4] = "http://i.imgur.com/jcMNeGq.png";
    filenames[5] = "http://i.imgur.com/ttJGwkt.png";
    filenames[6] = "http://i.imgur.com/9tL5TRr.png";
    filenames[7] = "http://i.imgur.com/IYn7mIB.png";
  
  
    // LOAD THE IMAGES INTO THE frames ARRAY,
    // USING THE FILENAMES STORED IN THE filenames ARRAY.
    for (var i = 0; i < filenames.length; i++){
    	frames.push(loadImage(filenames[i]));
    } 
}
 
//---------------------------------------
function draw() {
    background(222);
  
    // MOVE THE CHARACTER TOWARDS THE TARGET.
    var dx = targetX - characterX;
    var dy = targetY - characterY;
    var distanceFromCharacterToTarget = sqrt(dx*dx + dy*dy);
  
  
    // DISPLAY THE CHARACTER, CYCLING THROUGH THE FRAMES.
    image(frames[frameCount%8], characterX, characterY);
    
    // FLIP THE IMAGE IF THE CHARACTER'S HEADING LEFT. 
    /*if(mouseX < targetX){
        image= scale(filesnames, -1,1);
    }
    image*/
    // Don't touch this:
    // Draw a spot at the target, colored based on the character's proximity. 
    drawTargetEllipse (distanceFromCharacterToTarget);
    characterX = lerp(characterX,targetX,0.1);
    characterY = lerp(characterY,targetY,0.1);
}
 
 
//=======================================================
// PROBABLY NO REASON TO CHANGE ANYTHING BELOW THIS LINE. 
function setup() {
    createCanvas(800, 480);
    imageMode(CENTER);
    frameRate(12);
  
    // Initialize the character and target positions. 
    characterX = width / 2; 
    characterY = height / 2; 
    targetX = characterX;
    targetY = characterY;
}
 
//---------------------------------------
function drawTargetEllipse(distanceFromCharacterToTarget){
    if (distanceFromCharacterToTarget < 80){
        fill(0,200,0, 40); // Green if we're nearby
    } else {
        fill(255,0,0, 40); // Red if we're far away
    }
    noStroke();
    ellipse(targetX, targetY, 160,160); 
}
 
//---------------------------------------
function mousePressed() {
    targetX = mouseX;
    targetY = mouseY;
}

This is a portrait of my grand-grand-father. The effect of slowly revealing  pixels of the portrait brings in the sense of history and senses. I almost want the picture to become three dimensional and see my grand-grand-father in reality.

Project-09 Portrait in Jasper

This is Jasper.

sketch

//Ty Van de Zande
//ctv@andrew.cmu.edu
//Section B
//Project-09

//sorry for not commenting

var underlyingImage;
var dir = 1;

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

function setup() {
    createCanvas(420, 420);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
    var r = random(90);
    var r2 = random(3, 20);
    
    if(r <= 1){
    underlyingImage.loadPixels();
    var stepSize = round(constrain(mouseX / 8, 6, 32));
    for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - underlyingImage.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, r2, r2);
    }
  }
    }
    
    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);
    var sz = random(0, 30);
    

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, sz, sz);
}

function mousePressed(){
    dir = dir *(-1);
}

enwandu-Project-09-Portrait

sketch

// Emmmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section D
// Project-09: Computational Portrait

var underlyingImage;
var angle = 5;
var radius = 1;
var eWidth = 2;

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

function setup() {
    createCanvas(400, 360);
    background(0);
    underlyingImage.loadPixels();
    frameRate(5000);
}

function DrawSpiral(){
    // Start spiral in the middle of canvas
    translate(width/2, height/2);
    var x = cos(radians(angle))* radius;
    var y = sin(radians(angle))* radius;
    var centerX = 0;
    var centerY = 0;

    // Gets the color of the pixels in the underlaying image
    var theColorAtLocationXY = underlyingImage.get(width/2 - x, height/2 - y);

    fill(theColorAtLocationXY); // Colors the pixel based on the underlaying image
    noStroke(0);
    ellipse(centerX - x, centerY - y, eWidth, eWidth)

    //pixel dimensions
    angle += 2; //the angle between rays of pixels
    radius += 0.02; //the density of the spiral
    eWidth = eWidth + .0005; //the increase in pixel size
}

function draw(){
    DrawSpiral();
}

This computational portrait in one of myself. It is an image from my 60’s album cover entitled “A Romantic Evening With You”. I used a spiral of ellipses to generated the underlying image in order to give the portrait a nostalgic vinyl record type feel or spinning record.

Original:

Final Computational Portrait:

selinal-Project-09

sketch

var underlyingImage; //global variable for image that is not shown

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

function setup() {
    createCanvas(700, 600); 
    background(0); //black background
    underlyingImage.loadPixels(); //load pixels
    frameRate(10); //slow placement of objects when pixels called
}

function draw() {
    var px = random(width); //random x and y variables to place something at 
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1); //constrain the x and y variables for color sake
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy); //getting color of each pixel
	var r = theColorAtLocationXY[0]; //r value of color
    var g = theColorAtLocationXY[1]; // g value of pixel color
    var b = theColorAtLocationXY[2]; //b value of color
    var r2 = 255- r; //opposite r value
    var g2 = 255-r; //opposite g value
    var b2 = 255 - r; //opposite b value
    noStroke(); 

    if(g < 150 & b < 150) { //if g and b values are lower, make a clear ellipse of that pixel color and a smaller circle inside that is slightly redder
    	fill(r, g, b, 170);
    	ellipse(px, py, 20, 20);
    	fill(r + 10, g - 10, b - 10);
    	ellipse(px, py, 5, 5);
    }

    if(b > 230) { //if the b value is large, make an ellipse that is bluer than the pixel and make an arrangement of other blue circles surrounding it
    	fill(r- 10, g - 10, b + 10, 150);
    	ellipse(px, py, 5, 5);
    	var numObjects = 5;
    	var angleObject = 360/numObjects;																																																							
    	for(var i = 0; i < numObjects; i++) {
    		var posX = px + random(2, 7) *cos(radians(angleObject*i) );
			var posY = py + 5 *sin(radians(angleObject*i) );
			ellipse(posX, posY, 10, 10);
    	}
    } 
    if(g > 150) { //if the green value is low, make a circle slightly greener that is random in radius
    	fill(r, g + 10, b, 100);
    	var pointSize = random(10, 60);
    	ellipse(px, py, pointSize, pointSize);
    }

    if(r > 200) { //if the r value is large, make an arrangement of circles with strokes that is slightly redder
    	var numObjects = 8;
    	var angleObject = 360/numObjects;
    	for(var i = 0; i < numObjects; i++) {
    		var posX = px + random(-5, 5) *cos(radians(angleObject*i) );
			var posY = py + 5 *sin(radians(angleObject*i) );
			noFill();
			stroke(r +20, g - 10, b - 10);
			strokeWeight(random(.25, 5));
			ellipse(posX, posY, 10, 10);
    	}
    }
    if(r < 50 & g < 50 && b < 50) { //if all r g b values are on the lower end, make a row of five circles of that color which is moving downwards to the right
    	for(var i = 0; i < 5; i++) {
    		fill(theColorAtLocationXY, 300 - i*40);
    		ellipse((px - 15) +5* i, (py-15)+ 5* i, 2, 2);
    	}
    }
    else {
    	noFill(); //if the pixel does not meet any of the conditional statements, make a blank circle with the strokeWeight random and the stroke of the color at the pixel
    	stroke(theColorAtLocationXY);
    	strokeWeight(random(1, 8));
    	ellipse(px,py, 10, 10);
    }

    var sx = mouseX; //when the mouse runs over the canvas
    var sy = mouseY;
    var mx = constrain(floor(sx), 0, width-1); //constrain the mouse value for color
    var my = constrain(floor(sy), 0, height-1);
    var theColorAtLocationMxMy = underlyingImage.get(mx, my); //color at point of mouse

    var drawSize = dist(pmouseX, pmouseY, mouseX, mouseY); //distance between mouse coordinates at previous to current point
    fill(r2, g2, b2, 200); //opposite color
    ellipse(sx, sy, drawSize/10, drawSize/10); //draw a circle with mouse stroke depending on the mouse speed
	
	if(mouseIsPressed) { //if the mouse is pressed, make a circle the color of that pixel
		fill(theColorAtLocationMxMy);
		ellipse(mouseX, mouseY, 7, 7);
	}
}

I liked playing with opacity in the shapes we make in class. I think the randomization of pixels along with the overlapping of the colors is nice.

rgroves – Project09 – Portrait

sketch

var Will;

function preload() {
	var URL = "https://i.imgur.com/sdnZ6UU.jpg"
	Will = loadImage(URL);
}

function setup() {
    createCanvas(360, 480);
    background(120, 212, 204);
    Will.loadPixels();
    frameRate(3000);
}

function draw() {
	var px = random(0, width);
    var py = random(0, height);
    var ix = floor(px);
    var iy = floor(py);
    var color = Will.get(ix, iy);
    stroke(color);
    if (dist(px, py, 190, 320) < 10) { //centered at nose
    	line(px + 15, py + 15, 190, 320);
    } else {
    	line(lerp(190, px, .9), lerp(320, py, .9), px, py);
    }
}

For this project I used a picture of my friend Will. Because it’s a funny picture, I wanted to create a funny way to generate it. I decided to use lines that radiate out from his nose, which looks really big at this angle. I changed the background color after I took this screenshot, but this is what it looks like after you let it run for a while. I like how not only do the lines point to his nose, but they get longer as they get father away. It gives the picture a cool exploding effect.

This is photograph I used.

 

katieche-project 09

katieche-09

var underlyingImage;

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

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

function draw() {
    var px = random(width);
    var py = random(height);

    var w = random(0,20);
    var h = random(0,20);

    var ix = constrain(floor(px), 0, width);
    var iy = constrain(floor(py), 0, height);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);
    arc(px, py, w, h, PI+QUARTER_PI, TWO_PI);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    noStroke();
    var z = random(0,80);
    var d = random(0, 10);
    ellipse(mouseX, mouseY, d,d);
    arc(pmouseX, pmouseY, w, h, PI+QUARTER_PI, TWO_PI);
}

My code creates lots of small arcs in random areas like scales. I was inspired by when you run your finger through scales and the sheen on them changes. The mouse also creates small ellipses like a brush, if you’d like to speed up the image creation process.

jennyzha – Project 09

sketch

// Jenny Zhang
// jennyzha
// Section D
// Project 09

var jennyzha;

function preload() {
    var Image = "https://i.imgur.com/c3AjAad.jpg";
    jennyzha = loadImage(Image);
}

image(jennyzha);

function setup() {
    createCanvas(480, 480);
    background(0);
    jennyzha.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 ColorXY = jennyzha.get(ix, iy);

    push();
    stroke(ColorXY);
    strokeWeight(1);
    line(px, py, px, py + 30); 
    pop();

    stroke(ColorXY);
    strokeWeight(1);
    line(mouseX, mouseY, mouseX, mouseY + 30); 
}

This project took me a lot of trial and error, interestingly enough, not because of the code but because of imgur and the image itself. First, after seeing that my code would not load, and feeling fairly confident in my code itself, I realized that I had used the wrong url for the image on imgur. Second, after the code started to run the way I wanted it to, I saw that it was loading just the background. This is when I realized that it was because the image was over 1000X1000 pixels and my canvas was only the max requirement, 480X480. I quickly went back to the original image, shrunk it down and the code worked perfectly.

rkondrup-Looking-Outwards-09

Upon discovering the work of Beeple, as reviewed by danny noh in Looking Outwards, I was amazed at the idea of the projects which this man undertakes every SINGLE DAY, FROM SCRATCH. Honestly the things he draws would take me months, yet somehow the man produces amazing AMAZING graphic work at an incredible pace and without falling into stylistic ruts or creative dead-ends. I only wish danny noh had better stressed how unbelievably intricate and beautiful and amazing this work is, considering the production rate of one EVERY SINGLE DAY wowza. For 3308 consecutive days !
The idea of this project as a continuous daily task is one which I am a big fan of because building up a library of work which is a visual, tangible reminder of one’s progress in a task like graphic design is something which produces a concrete sense of accomplishment and meaning. Personally, I would like to pursue a similar sort of project initiative in order to further my own design skills and build a portfolio of completed work.