LookingOutwards-09

Expressions by Kund and Yu Miyashita

One of my classmates whose post I came across was Rachel Kim’s (rkim) Looking Outwards 04, where she analyzed Kynd and Yu Miyashita collaborative artwork called Expressions. I liked how my classmate gave thoughtful insight about how the artist used thick and bold paint as inspirations for creating 2D and 3D graphics. I agree that the artwork is interesting, especially because there is a play with light and shadows to create a digitized representation of paint strokes.

From my own observation of the work, I can add on to the conversation that the variation in texture and intersecting strokes create a visually harmonious and balanced composition which is pleasing to the eye. The use of light and shadows is what makes the artwork appear like oil paint, which is very unique.

Project 9

This week, I coded a self-portrait based on an old picture of myself. I wanted to express my love for drawing and painting, so I included a draw and erase mode. As the portrait renders, it adopts a painterly style with brushstrokes in the shape of a pencil. When mouse is pressed, it goes into erase mode. Together, they demonstrate the imperfect creative process which I’ve become familiar with.

sketch
Beginning of rendering
Halfway rendered
Near-complete rendering
Erase mode
var img;
var txttype = 1;

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

function setup() {
  createCanvas(480, 480);
  background(255);
  
  img.loadPixels();
  frameRate(10000000);
}

function draw() {
  //image(img, -20, -10, 640, 500);  //fix warped image
  //image (img, 0, 0);
  
  var x = floor(random(img.width)); // random x position
  var y = floor(random(img.height)); // random y position
  var pixel = img.get(x, y); // associate locations of pixels to image

  
  fill(pixel); //text color is pixel color
  noStroke();
  
  //var time = millis(); //text movement = rotation to milliseconds
  //rotateX(time / 1000);
  //rotateY(time / 1000);
  textSize(20);
  if (txttype ==1){ //drawmode
   // rect(x, y, 10, 10);
    textSize(20);
    text ("✎", x, y);
  }
  if (txttype ==2){ //erase mode
    push();
    fill(255);
    textSize(100); //erase faster than draw
    text ("✸", x, y);
    pop();
  }
  
}

function mousePressed(){
//switch between draw and 
  if (txttype ==1){
    txttype =2;
  }
  else
  if (txttype ==2){
    txttype =1;
  }
  }
  

Looking Outwards 09

During week 8, the Looking Outwards assignment focused on the creative practice of an individual. As an architecture student, I am constantly interested in the different explorations that other people connect with the study of architecture. I came across the individual that my peer, Aadya Bhartia, wrote about in that week’s blog.

Meejin Yoon is the Dean of Architecture at Cornell University. She is also an architect and designer that focuses on the relationships between space, technology, and materiality. After watching her presentation from the Eyeo Festival, I really enjoyed the aspect of interaction within public spaces through responsive and interactive technology. Throughout her presentation, I appreciated the process of her design for her projects and also the connection she makes with technology as well. Overall, I do not have any disagreement with my classmate’s overview of the work of this individual. The relationship between design and technology is constantly evolving, and there is so much more to be explored and discovered.

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.

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 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

Looking Outwards – 09

One Looking Outwards that I found to be pretty interesting was Francis Park’s LO-5 on virtual fashion shows. This assignment wanted us to discuss 3D computational art. With the global pandemic, it’s been difficult holding events as one usually would. A fashion label, called Hanifa, worked around this by holding a virtual fashion show. This fashion show used technology in order to stream animated 3D outfits through Instagram Live. I thought this method was very effective with the current circumstances. I’m also amazed with how well these models were rendered, as the outfits and material look so realistic. Because of this digital fashion show, I decided to do more research on how fashion companies are handling the pandemic. Though not done in the same manner of Hanifa, many fashion shows used 360 videos and VR technology to create a realistic experience. Here is an example of one: 

Project – 09 – Portrait

sketch
//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-09-Project

var img

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

function setup() {
  var w = img.width/5 //new width
  var h = img.height/5 //new height
  createCanvas(w, h)
  background(255)
  imageMode(CENTER)
  img.resize(w, h)
  img.loadPixels()
}

function draw() {
  var m = minute() 
	var x = floor(random(img.width)) //random x value
	var y = floor(random(img.height)) //random y value
	var pixel = img.get(x, y)
	fill(pixel, 128)
  noStroke()
  drawheart(x, y, m) //draws hearts
}

function drawheart(x, y, m){
    strokeWeight(0)
    push()
    translate(x, y) //random x and y pos
    beginShape();
    scale(random(0.1, 1)) //random size
    rotate(radians(180))
    for (var i = 0; i < TWO_PI; i+=0.1) {
        var mx = constrain(m/40, 0.7, 1.5) //x multiplier based on minute
        var my = constrain(m/40, 0.7, 1.5) //y multiplier based on minute
        var x = mx*16*pow(sin(i),3)
        var y = my*13*cos(i) - 5*cos(2*i) - 2*cos(3*i) - cos(4*i)
        vertex(x,y) 
    }
    endShape(CLOSE)
    pop()
}

For this project, I wanted to make use of the hearts I created in the curves project. I used a picture of me as a child for the program. The size of the hearts are random, but the shape slightly changes depending on the time.

Hearts at 1:59 | Hearts at 2:00 | Image after some time has passed
Original image

Project 9: Portrait

For this assignment, I used circles that size in size in correspondence to clicking the up or down arrow. It was inspired by the concept of paint splash art where it can create a very interesting portrait when you mix different brush sizes.

sketch

//Helen Cheng
//helenc1@andrew.cmu.edu
//Section C
//Project-09

var selfie;
var pixelSize = 5;

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

function setup() {
  createCanvas(480, 320);
  selfie.resize(480, 320);
  selfie.loadPixels();
}

function draw() {
  //random pixel drawer
  var picX = floor(random(selfie.width));
  var picY = floor(random(selfie.height));
  fill(selfie.get(picX, picY)); 
  drawPixel(picX, picY);

  //mouse brush
  fill(selfie.get(mouseX, mouseY));
  drawPixel(mouseX, mouseY);

}

 function drawPixel(x, y) {
    //circlular brush strokes
    strokeWeight(0);
    circle(x, y, pixelSize);
  }

//increase or decreases brush stroke using up and down arrows
function keyPressed() {
  if (keyCode === UP_ARROW) {
    pixelSize += 1;
  }
  else if (keyCode === DOWN_ARROW);
    pixelSize = pixelSize - 1;
  }