Category: Project-09-Portrait

sketch

// Portrait
// Name: Sheenu You
// Andrew ID: sheenuy
// Section E

//Variables
var sheenu;
var a =0;
var b =0;
//Loads Image
function preload() {
    var myImageURL = "https://i.imgur.com/JCe4MPY.jpg";
    sheenu = loadImage(myImageURL);
}

function setup() {
    createCanvas(480, 480);
    background(0);
    //Load Pixels of image
    sheenu.loadPixels();
    frameRate(120);
}

function draw() {
    //Variables that generate Image
    var x = random(width);
    var y = random(height);
    //Gets all those pixels and arranges into variable
    //Generates "Sheenu" pixel
    var image = sheenu.get(x, y);
    fill(image);
    textSize(7);
    text("Sheenu",x, y);
    //Generates random "You" pixel
    text("You",a,b)
    //"You" pixel genereator
  a += 20;
  if (a > width) {
    a = 0;
    b += 20;
  }



}

I wanted to do something with text, so I decided to use my name as a custom pixel. I guess you can say this portrait has my name (and face) all over it. I like how the text starts to appear like brush strokes or pastel as more text generates and creates the full image. I found it as an interesting effect I wasn’t aware of nor expecting. I also wanted to do something with my last name, so I made them generate in an orderly fashion but with randomly generated colors. The “You” is definitely a huge contrast compared to the “Sheenu”, which generates randomly and has a specifically generated fill. In the end, all I can say is that a picture is truly worth a thousand words (or names).

sketch 66

var image;
var circleDiam = 15; //diameter of dots


function preload() {
    var URL = "https://i.imgur.com/tOU8IHH.jpg"; //locating image on web
    image = loadImage(URL);
}

function setup() {
    createCanvas(480, 480);
    background(255);
    image.loadPixels();
    frameRate(60); // 60 circles a second
}

function draw() {
	var x = random(width);
	var y = random(height);
	var pixelColor = image.get(x, y); //retrieve color value of pixel;
	noStroke();
	fill(pixelColor); //fill circle with color of pixel at x,y
	ellipse(x, y, circleDiam, circleDiam); //draw circles at random locations
	
	//buttons to make the circles smaller or larger
	fill(180, 244, 180); //green fill
	rect(10, 220, 50, 30); //"smaller" button
	rect(415, 220, 50, 30); //"larger" button
	fill(0); //text fill
	text("smaller", 15, 238);	
	text("larger", 425, 238);

}

function mousePressed() {
	if (mouseX < 60 & mouseX > 10 && mouseY > 220 && mouseY < 250 && circleDiam > 4) {
		circleDiam += -3; //if the mouse is over the smaller button, and the current diameter is greater than 4, make the circles smaller by 3 px
	}

	if (mouseX < 465 & mouseX > 415 && mouseY > 220 && mouseY < 250 && circleDiam < 100) {
		circleDiam += 3; //if the mouse is over the "larger" button, and the current diameter is less than 100, make the circles alrger by 3 px
	}
}

I had trouble at first, because my diameter values were going negative and doing weird things so I tried using constrain() to no avail. Then, I just added a few more conditions to my if() statements, and that worked.

Some possible outcomes:

A portrait rendered with a combination of large and fine dots.

A portrait rendered with finer dots.

This is a portrait of my friend, Amber. Mine uses a very basic element, just circles so I wanted to make it more interactive. Using my highly-advanced HCI skills, I devised a very intuitive interface, consisting of two buttons that say “smaller” and “larger.”
When you click on each corresponding button, the dots get larger or smaller.

I had trouble at first, because my diameter values were going negative and doing weird things so I tried using constrain() to no avail. Then, I just added a few more conditions to my if() statements, and that worked.

Some possible outcomes:

I decided to focus on my friend Sharon’s LookingOutward-03, which focused on the work of David Wicks, who works with data visualization. He quotes, “Making Information Beautiful.” The work she decided to focus on was a map of the US with representation of rainfall and water flow.

I thought it was interesting that this beautiful visual representation could translate into data information. Although it does not present any numbers, it still provides a general idea of how the water flows. I also thought it was unique that the artist was able to figure out an algorithm that would draw and create such as piece.

sketch

//Elizabeth Wang
//elizabew@andrew.cmu.edu
//Section E
//Project-09

var underlyingImage;

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

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

function draw() {

    var x = random(width); //finds random x value on canvas
    var y = random(height); //finds random y value on canvas
    var ix = constrain(floor(x), 0, width - 1);
    var iy = constrain(floor(y), 0, height - 1);
    var color = underlyingImage.get(ix, iy); //gets color

    push();
    fill(color); //calls for color from image
    noStroke();
    var rw = random(1, 15); //random width of rectangles
    var rh = random(1, 15); //random height of rectangles
    rect(x, y, rw, rh); //rectangles
    pop();


}
function mouseDragged() { //when user presses and drags mouse over image, makes a bunch of random cirlces
    var colorAtMouse = underlyingImage.get(mouseX, mouseY);
    fill(colorAtMouse);
    var ew = random(5, 25); //random width of ellipses
    var eh = random(5, 25); //random height of ellipses
    noStroke();
    ellipse(mouseX, mouseY, ew, eh);
}

For this project, I was initially inspired by the style that one of my favorite painters, Jeremy Mann, uses. To me his paintings visually express an almost pixelated and futuristic-esque view of cities, and I wanted to add that sharpness and softness into this project as well.

I ended up choosing a more artsy portrait of one of my good friends. I felt that the green and white of the flower would make the final piece more visually interesting since most likely they won’t be 100% discernible.

Overall I am pretty satisfied with the results. I achieved the sharpness I wanted from the small rectangles, and the softness that the user is able to put in themselves using mousePressed.