Project 09 – Portrait

projectsketch
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 09

var friendJer; //variable name for original image
var sentence; //variable name for array of words 


function preload() {
	friendJer = loadImage("https://i.imgur.com/ykv4p2z.jpg"); //loading in original image

	sentence = ["This", "is", "my", "friend", "Jeremy", "!!!"] //sentence explaining who the person is in the picture
}

function setup() {
    createCanvas(480, 300);
   
    noStroke();
    background(0); //black background

    friendJer.resize(480, 300); //image to fit canvas
    imageMode(CENTER); //placing image @ center

    friendJer.loadPixels(); //loading words
    frameRate(50); //speed of rendering
   
}

function draw() {

	var sentX = random(friendJer.width); //random x-coordinates for words
	var sentY = random(friendJer.height); //random y-coordinates for words

	var ix = constrain(floor(sentX), 0, width); 
	var iy = constrain(floor(sentY), 0, height);

	var xyColorLocation = friendJer.get(ix, iy); //color of original image @ xy location

	textSize(12); //size of words
	textFont('Georgia'); //type of font

	if (sentY < 100) {
        if (sentX < 150) {
            fill(xyColorLocation);
            text(sentence[0], sentX, sentY); //randomly placed "This"

        } else if(sentX >= 150 & sentX < 200) {
            fill(xyColorLocation);
            text(sentence[1], sentX, sentY); //randomly placed "is"
      
        } else {
            fill(xyColorLocation);
            text(sentence[2], sentX, sentY); //randomly placed "my"
        }
   
    } else if(sentY >= 100 & sentY < 350) {
        if(sentX < 200) {
            fill(xyColorLocation);
            text(sentence[3], sentX, sentY); //randomly placed "friend"
       
        } else if(sentX >= 200 & sentX < 480) {
            fill(xyColorLocation);
            text(sentence[4], sentX, sentY); //randomly placed "Jeremy"
        
        } else {
            fill(xyColorLocation);
            text(sentence[5], sentX, sentY); //randomly placed "!!!"
        }

    } 

}

For this project, I wanted to use a portrait of my friend’s side profile. Because the code renders the original image into an abstract image, I used words to load the image. The words are a sentence that states, “This is my friend Jeremy”. That way, the viewer knows who the person is. Below, is the rendering process of the portrait.

Project-09-Portrait

sketch
var friendpic;
var names;

function preload(){
   friendpic = loadImage("https://i.imgur.com/OlsgBPM.jpg");

   names = ["rachel", "noah", "selim", "chris", "erin", "dasol", "george", "jennifer", "sue"];
  print(names)
}

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

    noStroke();
    background('black'); //sky blue background

    friendpic.resize(300,480); //fit image to canvas
    imageMode(CENTER); //centering the image on the canvas
    friendpic.loadPixels();// loading the names
    frameRate(100); // speed of names popping in
}

function draw() {
    var x = random(friendpic.width);
    var y = random(friendpic.height);
    var c = friendpic.get(x,y); //get the color 

    fill(c);
	textFont("Helvetica");
	textStyle(BOLD);
	
	text(names[Math.floor((Math.random() * names.length))], x, y);

}

So for this project, I wanted to use a picture of my friends as it renders out with the name of each person. It starts off as black but the names pop up in different colors in random places and forms the original picture.

LO 9 – On Looking Outwards

Looking back to the wide variety of Looking Outwards projects, one specific blog post that I find very intriguing is poppy’s “Looking Outwards – 05 – 3D Computer Graphics“. As the title of this blog implies, the fifth week of Looking Outwards projects involved 3-dimensional computer graphics.

Poppy’s analysis focuses on Jennifer Steinkamp’s “Womb“, a piece that was featured at Talley Dunn Gallery in August 23, 2019. As a digital animator, Steinkamp uses 3D modeling software and Photoshop to explore the ideas of space, perception, and motion.

“Womb”, Jennifer Steinkamp’s, 2019

“Womb” allows viewers to walk up to an interactive wall of fruit that follows the movement of people and continues to move on its own. Poppy expresses, “I admire how eccentric and lively the piece is…Similar to a womb that takes up space within the body in order to generate life, her artpiece generates transformation, movement, and life as well.” I definitely agree with Poppy’s statement regarding Steinkamp’s purpose and how the piece affects its audience. Adding on to this, I believe that the piece’s interactive aspect allows viewers to be involved as participants, giving them a more personal experience overall.

Looking Outwards-09

For this week, I decided to read a blog post written by my peer Dreami. I was particularly struck by her analysis of the project named “Facebook Flowers” by Stamen Design. This cited project is something I would be also intrigued by because it collects real life data and translates it into a piece of art. I thought it was interesting how Stamen Design chose to represent the activity of a Facebook post through flowers. The parallel of a post getting attention and growing is shown through the flowers getting bigger and flourishing. I don’t necessarily disagree with Dreami’s assessment because I agree with her how it’s cool that motion is used in this data visualization.

Project-09-Portrait

I chose to do a portrait of myself when I was little. I chose to use symbols that represent the astrology of my birthday. I did my zodiac sign which is Virgo, and I did what the moon looked like on my birthday (Sep 10 2001), a waning gibbous. When you press the up arrow the symbols get larger, and if you press the down arrow they get smaller. Additionally, if you click then there will be a blur filter applied to the image.

graanak-09
//Graana Khan 
//Section B
//Custom Pixels

var img;

//my zodiac sign is a Virgo and the moon was a waning gibbous on my birthday Sep 10 2001
let skyView = ['♍︎', '🌔︎']; 


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

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

    //setting the image in the center and resizing it to the canvas size
    imageMode(CENTER);
    img.loadPixels();
    img.resize(480,480);
    frameRate(20000);

    //orange backdrop
    background(252, 226, 119);
}

function draw() {

	//getting pixel colors and location
	let x = floor(random(img.width));
	let y = floor(random(img.height));
	let pix = img.get(x, y);
	//setting the color to be the pixel locations of the image
	fill(pix);

	// up arrow makes the symbols larger, down arrow makes them smaller
	if(keyIsDown(UP_ARROW)){
		textSize(random(10, 15));
	}else if(keyIsDown(DOWN_ARROW)){
		textSize(random(3, 5));
	}else{
		textSize(8);
	}

	text(random(skyView), x, y);

}

//this blurs the image further everytime the mouse is pressed
function mousePressed(){
	filter(BLUR, 1);
}

Initial generation.
Almost fully generated without blur.
Generated with blur added.
The original photo.

Project 09 – Portrait

I decided to use an image of my friend and sample individual pixels to slowly fill out the screen. I made sure to keep the size of the pixels big enough to keep the image abstract.

sketchDownload
// Carson Michaelis
// Section C
// cmmichae

// variable to hold my image
let myImage;

// loading in my image
function preload () {
    myImage = loadImage("https://i.imgur.com/Rd1FDlT.jpg");
}

function setup() {
    // scaling down the image becuase it was too big
    myImage.resize(myImage.width/4, myImage.height/4);
    myImage.loadPixels();

    // sizing the canvas to work with other images as well
    createCanvas(myImage.width, myImage.height);
    background(220);
}

function draw() {
    // picking a random pixel out from within the image
    var pixelX = floor(random(myImage.width));
    var pixelY = floor(random(myImage.height));

    // retrieving the color of the pixel selected
    var pix = myImage.get(pixelX,pixelY);

    rectMode(CENTER);

    // defining the size and stroke(or lack thereof)
    fill(pix);
    noStroke();

    // drawing pixel big enough to provide some level of abstraction and overlap
    rect(pixelX, pixelY, 10, 10);
}

//picture is of my friend who gave permisson for the photo to be used

LO – 09

From Bennett’s LO – 04 on Tomu Tomu’s “Plant Sounds” project:

I really like the idea of being able to hear plant sounds. I like to think that everything makes noise, it’s just the matter of being able to hear it, like how when in a really quiet space or after working out you can hear your own body working, your inhale and exhale, your pulse, your blood running through your body. I guess plants don’t actually make noises, but I think that synthesizing certain noises to specific biological processes of the plant would be interesting. I think it would actually be an interesting exploration of tracking a plant’s growth or health. Assuming that certain processes are only for producing a new growth–maintaining current growths, cutting off nutrients from certain areas of the plant(like flowers on a plant dying), or trying to heal from damage or fight off infection–the general sounds produced by the plant would change according to what processes it’s engaging in, so you would be able to tell if the state of the plant is undergoing change prior to any visible change simply by the change in the sound produced. Although I think that would be far more complicated to create.

The “Plant Sounds” project reminds me of a product I saw a while ago: Playtronica. It’s a TouchMe Midi that faciliates the production of sound when an electronic loop is formed, essentially making it so that when two people form hold either end of the midi, they are able to create music through touching each other. I think the Playtronica has a lot of potential for experimentation, especially when used for performance or music production. I would be really interested in seeing a dance performance where the dances have individual midis with a specific set of notes/sounds per performer so that the sounds are explicitly created by the interaction of touch between specific dancers. I wonder if that were applied to a longer performance, like a ballet, you would be able to find motifs within the created music that tracks the interactions and grown of relationships between certain characters of the ballet.

Playtronica TouchMe: https://shop.playtronica.com/touchme

Project-09-Portrait

sketchDownload
// Isabel Xu
//Section A
//yuexu@andrew.cmu.edu
//Project-09


var underlyingImage;
var ix;
var iy;
var px;
var py;

function preload(){
	var myIMG = "https://i.imgur.com/Kks4pC9.jpg"
	underlyingImage = loadImage(myIMG);
}
function setup() {
    createCanvas(735, 595);
    background(255);
    imageMode(CENTER);
    underlyingImage.loadPixels();////get pixels from the picturev
    frameRate(99999999);
}

function draw() {
	var px = random(width); //x position of the storke
    var py = random(height); //y postotion of the stroke
    var ix = constrain(floor(px), 0, width-1); //x position of each pixel
    var iy = constrain(floor(py), 0, height-1); //y position of each pixel
    var theColorAtLocationXY = underlyingImage.get(ix, iy);//get the color of each pixel

    noStroke();
    fill(theColorAtLocationXY);
    drawStar(px,py);

}
//star shape
function drawStar(px,py){
	beginShape();
	vertex(px-4,py-15);
	vertex(px-3.5,py-19);
	vertex(px-6,py-22);
	vertex(px-2,py-22);
	vertex(px,py-26);
	vertex(px+2,py-22);
	vertex(px+6,py-22);
	vertex(px+3.5,py-19);
	vertex(px+4,py-15);
	vertex(px,py-17);
	endShape();
}
programs runs for 1 min
more completed result
The portrait is a collage of myself.
Medium: Photography and oil paint

In the self-portrait, I want to bring in the gentleness and floating elements of water and the dreamy stars effect to the scene.

LookingOutwards-09

The project is an animation commercial for Nike’s Air Max sneaker by ManvsMachine with stimulating visual elements. ManvsMachine uses Cinema 4D ( a competent 3D suite program)to create motion graphic which is more eye catching than 2D graphics. I agree with Graana that this project is successful on playing with different textures and lighting to demonstrate lightness and airiness of the product.

While fashion editorial have championed extremely tangible imagery, ManvsMachine achieves a different effect in this work which is more conceptual and abstract. By animate morphing objects and diffusing colors, the campaign video is able to visualize the product with a more painterly approach that also leave imagination to the customer.

In many levels, the project is an artistic approach to demonstrate both aesthetics and functions of the product.

Artist Website: https://mvsm.com/project/air-max
Graana Khan’s Looking Outwards-05 post, October 05,2020
https://courses.ideate.cmu.edu/15-104/f2020/2020/10/03/looking-outwards-05-5/

LO: On Looking Outwards

bbccclll by Manolo Gamboa Naon

While I was browsing through the different Looking Outwards, this project by Manolo Gamboa Naon stood out to me. It is a generative digital art, but when I first looked at it, it screamed 3D to me. Despite it being digital, I kept on thinking of how they could bring to life in the real world, Such as using see-through fabric (like chiffon) to mimic the translucent outer circles and maybe even cardboard with the center circles to create a sense of depth and height. It is so interesting to me to envision this in reality and make it into something that is touchable. There are so many textures to explore. I agree with laurel in how the simpleness in the randomness makes the work complex. The explosion of color and circles is really mesmerizing and beautiful.

Manolo Gamboa Naon: https://www.behance.net/manoloide

laurel’s looking outwards post