Category: Uncategorized

Monica Chang – Looking Outwards – 05

Instagram: universaleverything.

Website: Universal Everything

Universal Everything is a digital art and design collection based in Sheffield, England founded by creative director Matt Pyke. Most of their projects incorporate combine technology and humanities in hopes to also utilize the viewers’ sensations and participation. They gather a group of video artists, experience designers and future thinkers to bring a variety of artwork that allows the observers to witness immersive installations, exotic architecture and huge launch events.

Future You by Universal Everything
Inside The Sound: Voices, VR Installation, Universal Everything

I chose to talk about these two pieces created by UniversalEverything because they both pertained to the idea of immersive installations which is something that I have always been interested in trying. Not only are the visuals absolutely spectacular but the calculations and the concept put into the work is astounding.

The first piece is called “Future You” and its this video installation that computes the viewer’s movements into something so beautifully mapped and structured. The fluidity of this digital movement was what drew me towards this project as I know that for smooth movement in a digital piece like this requires an insane amount of calculations and observation to conclude with a smooth representation.

The second piece called “Inside the Sound” was a piece where the designers explored the idea of the audiovisual “synaesthetic experience”. This child-like experience becomes elevated when the designers utilized this visual to create a virtual reality; this offers so many inspiration to artists working towards a digital field of vision and audio in their future. The colors and the design were exquisitely drawn and I will absolutely have this piece in mind as I think of digital and computational works.

I admire the integration of interaction and aesthetics and both projects really displayed both ideas seamlessly.

Claire Lee – Project 05 – Wallpaper

project05

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

function draw() {
    background(140, 180, 155, 200);

    for (x = 0; x < 10; x ++) {
        stroke(30, 70, 45, 200);
        strokeWeight(2);
        line((x*60) + 30, 0, (x*60) + 30, height);
        //stem  
    }

    for (x = 0; x < 15; x ++) {
        for (y = 0; y < 62; y += 3) {
            noStroke();
            fill(30, 70, 45, 200); 
            quad((x*60) + 30, y*10 - 5, (x*60) + 40, y*10 - 5, (x*60) + 50, y*10 - 15, (x*60) + 40, y*10 - 15);
            quad((x*60) + 30, y*10 - 5, (x*60) + 20, y*10 - 5, (x*60) + 10, y*10 - 15, (x*60) + 20, y*10 - 15);
            //leaves
        }
    }

    for (x = 0; x < 10; x ++){
        for (y = 0; y < 30; y += 3) {
            noStroke();
            fill(255, 250, 220);
            ellipse((x*120) + 40, y*40 + 4.5, 5, 5);
            ellipse((x*120) + 37, y*40 + 10, 5, 5);
            ellipse((x*120) + 43, y*40 + 10, 5, 5);
            //flowers (odd)
            ellipse((x*120) + 20, (y*40 + 60) + 4.5, 5, 5);
            ellipse((x*120) + 23, (y*40 + 60) + 10, 5, 5);
            ellipse((x*120) + 17, (y*40 + 60) + 10, 5, 5);
            //flowers (even)

        }
    }
    noLoop();

}

This project was a great way to keep playing around with for() loops. I wanted to go for something simple and plant-inspired, so this is what I came up with. I think if I were to make this a little more complex, I’d try using bezier curves instead of straight lines, and implement a little more randomness. However, since it was supposed to be a “wallpaper” type project, I decided to keep it basic.

The planning process

Nawon Choi— Looking Outward 05

Cover of “Time Out London”, weekly magazine
“Time Out” by Design Lad https://www.designlad.co.uk/time-out

I really like the way computer graphics were used here in this magazine. The vibrant and playful colors are not just limited to the image, but also extend beyond to the area where text is placed. This enhances the “3-dimensional” concept by the way the graphic elements are placed beyond the edge of the main image.

The artist probably used 3D graphics software to create the models of the image before adding the details and vibrant colors. Typically, there is also a rendering algorithm that makes the image look 3-dimensional.

The artist(s) have a unique style throughout their work, which is also reflected in this work. Their style is playful, colorful, and bold with a consistent smooth 3d texture throughout the images.

SooA Kim: Looking Outwards-05

The computer-generated Gollum (above, seen in 2012’s The Hobbit: An Unexpected Journey)
CG Gollum is based on performances by actor Andy Serkis (below). Image: NEW LINE PRODUCTIONS

I chose Joe Letteri who is the senior visual effects supervisor at Weta Digital in New Zealand and the Oscar-winning co-creator of Gollum on screen The Hobbit. I admire films where actors interact with CG characters because the process incorporates using motion capture on the actor, that will be playing the computer generated character, and uses VFX techniques to bring the character into life. Since the Lord of the Rings trilogy in 2002, the CG looks of Gollum’s character has been constantly analyzed and applied with more technical progression on CG tools, as in the Hobbit, 2012, Gollum looks more realistic in terms of his skin texture and muscle movement. To achieve more realistic CG character that is no different to a real actor, Joe Letteri and Weta Digital focused in depth on how muscles and skeleton joints work in an actual human body. One of the techniques that they developed was a tissue simulation and subsurface-scattering technique to render Gollum’s skin texture to give more translucency.

Hyejo Seo – Project 05 – Wallpaper

sketch

/*
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project 5 - Wallpaper
*/
function setup() {
    createCanvas(600,600);
    background(255, 203, 215);
    var w = 150;
    var h = 120;
    var oy = 60;
    var ox = 75;
// background orange lines
    noFill();
    stroke(255, 178, 15);
    strokeWeight(2);
    for (var l = 0; l <= width; l+=5){
      line(l, 0, l, height);      
  }
//smiley FACES
    fill(255, 255, 27);
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx, yy, 80, 80);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx, yy, 80, 80);

        }
      }
    }   
// eyes
    fill(0);
    noStroke();
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          ellipse(xx - 13, yy - 10, 10, 20);
          ellipse(xx + 13, yy - 10, 10, 20);
          
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        ellipse(xx - 13, yy - 10, 10, 20);
        ellipse(xx + 13, yy - 10, 10, 20);
        }
      }
    }    
//mouth
    noFill();
    stroke(0);
    strokeWeight(5);
    for (var y = 0; y < 7; y++) {
      for (var x = 0; x < 5; x++) {
        if(y % 2 == 0 & x % 2 == 0){
          var yy = oy + y * h;
          var xx = ox + x * w;
          arc(xx, yy + 8, 50, 35, 0, PI);
        } 
      }      
    }
    for (var y = 0; y < 7; y++){
      for(var x = 0; x < 5; x++) {
        if(y % 2 == 1 & x % 2 == 1){
        var yy = oy + y * h;
        var xx = ox + x * w;
        arc(xx, yy + 8, 50, 35, 0, PI);      
        }
      }
    }  
//diamonds
    fill(0);
    noStroke(0); 
    for (var x = 225; x < width; x += 300) {
      for(var y = 30; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    for (var x = 75; x < width; x += 300) {
      for(var y = 155; y < height; y += 240){
        quad(x, y, x + 15, y + 25, x, y + 50, x - 15, y +25);        
      }
    } 
    noLoop();
}
function draw() {    
}

Initially, I was inspired by the Golf Wang Smiley Face Sweater. I added more elements such as the orange lines and diamonds to make it more interesting as a wallpaper. I have always wanted to create something with smiley faces even for my previous projects, and, this time, I was able to do it. I had fun creating this wallpaper. 

Smiley face sweater by a brand called “Golf Wang”

Sewon Park – PO – 05

sketch

function setup() {
    createCanvas(600, 400);
    background(255,250,205);
}

function draw() {

    for (var x=10; x<600; x=x+20) {
        for(var y=10; y<400; y= y+20) {
        stroke(135,206,235);
        fill(135,206,235);
        rect(x,y,1,10); //rain on background
        
        } 
    }
    //small white rectangles 
      
    for (var a=30; a<600; a=a+80) {
        for(var b=30; b<400; b=b+160) {
        stroke(0,0,0);
        
        fill(255,255,255);
        triangle(a-10,b-5,a-10,b-20,a,b-10); //Totoro's left ear
        triangle(a,b-10,a+10,b-20,a+10,b-5); //Totoro's right ear
        
       
        ellipse(a,b,20,30); //Totoro's body
        
        fill(0,0,0);
        ellipse(a-4,b-4,3,4); //Totoro's left eye
        ellipse(a+4,b-4,3,4); //Totoro's right eye
    	}
    }

    for (var c=70; c<600; c=c+80) {
    	for(var d=110; d<400; d=d+160) {

    	fill(0,0,0);
        arc(c,d,30,30,PI,0);
        rect(c-1.5,d,3,20);
        
        } //Umbrella
    }

    
    }

For this project, I used the classic toddler wallpaper color of baby yellow and added rain as a special touch. I used the baby white Totoro and umbrellas (a recurring symbol of Totoro) as the recurring pattern of the wallpaper.

Charmaine Qiu – Looking Outwards – 05


ModelingCafe is a CG company in Tokyo that focuses on 3d modeling and character concept design. They aim to break the current constraints of modeling, and does work in a huge variety of representation methods or genres. The company recently introduced the world’s first computer generated fashion model “Imma” (means “now” in Japanese) who took over magazine covers in Japan.

From a live body and background, Imma’s head are being transposed onto the body, and that is how her images are created. As a hot topic in current Japan, she also has a instagram and Twitter account, where she posts photos and stories almost mimicking a real life human. Though 3d generated fashion models can bring perfection towards the human body, the gap between what is presented in the media and the everyday world would become further apart. This could also damage the modeling industry for real life models. As a designer, I think it is important for the current world to realize the possibility of designs that could people to comply to the innovative world.

Paul Greenway – Project 05 – Wallpaper

pgreenwa_wallpaper

/*Paul Greenway
Section 1A
pgreenwa@andrew.cmu.edu
Project-05-Wallpaper
*/


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

//background
function draw() {
   background('white');
   
      
          
  //small background circles
  strokeWeight(1);
  for (var x = 0; x < 70; x++) {
    for (var y = 0; y < 70; y++) {
      fill('white');
      ellipse(10*x, 10*y, 10, 10);
      
    }
  }
  //black lines + circles
  strokeWeight(1);
  for (var x = 0; x < 11; x++) {
    for (var y = 0; y < 20; y++) {
      fill('black');   
      ellipse(50*x+40, 50*y + 40, 10, 10);
      rect(1*x, 50*y+14, 1000,2);
      rect(1*x, 50*y+39, 1000,2);
    }
  }
  //red outer rings
  strokeWeight(1);
  for (var y = 0; y < 10; y++) {
      for (var x = 0; x < 11; x++) {

        if (y % 2 !=0) {
          fill('red');
          ellipse(50*x+40, 50*y+40, 50, 50);
        }
      }
  }
    //inner gradient circles
    for (var y = 0; y < 10; y++) {
      for (var x = 0; x < 11; x++) {

        if (y % 2 !=0) {
          fill('white');
          ellipse(50*x+40, 50*y+40, 40, 40);
          fill(200,20*x,20*y);
          ellipse(50*x+40, 50*y+40, 25, 25);
        
          
        }
      }
  }
      strokeWeight(0);
      for (var y = 0; y < 11; y++) {
      for (var x = 0; x < 10; x++) {

        if (y % 2 ===0) {
          fill(30);
          ellipse(50*x+65, 50*y+40, 20, 25);
          
        }
      }
  }
}

For this project I wanted to created a symmetrical pattern that would have gradient colored circles based on their position within the grid. To segment these colored circles I added black lines with smaller white circles in the background to add more visual interest.

Zee Salman- Project 04 String Art

Click on the art to take away night mode.

sketch

//Zee Salman
//SECTION E


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

    
	
}

function draw(){

    
    
    if (mouseIsPressed) {
    	background('pink')
	    for (i = 0; i <= 2000; i+=30){
	    //blue horizantal lines
	    stroke(0,0,255);
	    line(i,mouseY, i/2 ,height);
	}
	    for (i = width/2; i <= 2000; i +=20){
	    stroke(177,89,139);
	    // bottom right 
	    line(mouseX, 500 - i, i / 2, height/ 2);
	    // bottom left 
	    line(5 - i, i * .2, 1000-i, mouseY);
	    

	}

		for (i = 0; i <= 60; i++){
    	//red vertical lines
    	stroke(255,0,0);
	    line(mouseX, i * mouseY,width / 2 ,height/2);
	    }
    }

    //night mode
  	else {
  		background('black')
  		for (i = 0; i <= 2000; i+=30){
	    //white horizantal lines
	    stroke('white');
	    line(i,mouseY, i/2 ,height);
	}
	    for (i = width/2; i < 2000; i +=20){
	    stroke(177,189,100);
	    // bottom right 
	    line(mouseX, 500 - i, i / 2, height/ 2);
	    strokeWeight(0.75);
	    // bottom left 
	    line(5 - i, i * .2, 1000-i, mouseY);
	    

	}

		for (i = 0; i <= 60; i++){
    	//green vertical lines
    	stroke(55,187,10);
	    line(mouseX, i * mouseY,width / 2 ,height/2);
	    }
    	
  }
	
    

}

*Grace Day*

While doing this project, I definitely went for random and exploratory lines, it was really fun also I wanted to experiment with movement in many ways so when you hold the mouse it changes color as well as movement from the drag of the mouse.

Looking Outwards – 04

A rather unconventional way of generating sound digitally I have seen many times throughout the past through years is actually the composition of music through the use of a level creation engine in the game Super Mario Maker released in 2015. After many programmers discovered how certain objects functioned, they learned to manipulate them to create music. A specific item that can be placed in a level called a note block makes a different sound when each different object type in the game makes contact with it, and as the screen follows the main character, the blocks are generated, making music. Based on where vertically the block is placed, the pitch will change, and the tone is based on what is placed above it. This has been used to create compositions up to a minute long.

https://www.youtube.com/watch?v=j20wi8-Wlq4