Author: Isabel Xu

Final Project – Responsive Wearables

In 2020, one of the biggest treasure is to experience the time in outdoor. In the time when we need to carefully think about distancing to other people and gearing up ourselves with masks, gloves and sanitizer, I design this interactive game to explore with the idea of using garments as an responsive exterior shell to protect ourselves and create personal boundaries.


By moving the mouse, the character is able to wondering in this projected scenery with colorful reference object. For the design of the character, there are two mode in response to two situations. The character begins with wearing a normal scale clothes. When the player pressed the mouse, the character switch to the inflatables garment set with an “alert” sign.


One of the biggest challenge I encountered with when programming this game is making paneling affect on the canvas. The canvas visually works as a camera frame that shifting with the location of the mouse. If I further develop this program, I hope to have the alert character setting on when the character intersect with every bubble in the arrays.

sketchDownload
//Isabel Xu
//Section A
//Final Project

var cX = 0;
var cY = 0;
var cdx = 0;
var cdy = 0;
var start_locationX = 300;
var start_locationY = 200;
var cir_X = [];
var cir_Y = [];
var cir_c = [];
var animGreen = [];


function preload(){
    //green character image arrays
    let green1 = loadImage("https://i.imgur.com/OXFFPY7.png");
    let green2 = loadImage("https://i.imgur.com/gIvd44d.png");
    let green3 = loadImage("https://i.imgur.com/p7dyFj3.png");
    animGreen = [green1, green2, green3];

    //red character image
    redAlert = loadImage("https://i.imgur.com/BhCQ0FG.png");

}

function setup() {
    createCanvas(600,400);
    frameRate(20);

    //create level of randomness to the bubble
    for (var i = 0; i < 7000; i++) {
        cir_X[i] = random(-5000, width+5000);
        cir_Y[i] = random(-4000, height+4000);
        cir_c[i] = color(235, random(255), random(255));
    }
    imageMode(CENTER);
}

function draw() {
    background(235, 218, 199);
    //movement of the bubble inversely to the character
    let cir_dx = ((mouseX)-300)/20*-1;
    let cir_dy = ((mouseY)-200)/20*-1;
    //create colorful bubble background for visual reference
    for (var i = 0; i < 7000; i++) {
        noStroke();
        drawShape(cir_X[i], cir_Y[i], cir_c[i]);
    
        cir_X[i] += cir_dx;
        cir_Y[i] += cir_dy;

    }

    drawFigure(cir_X[i], cir_Y[i]);
    
}

function drawShape(cir_X, cir_Y, cir_c) {
    fill(cir_c);
    ellipse(cir_X, cir_Y, 30, 15);
}

function drawFigure(){
    if (mouseIsPressed) {
        drawRedCharacter();
    }else{
        drawGreenCharacter();
    }
}
function drawGreenCharacter(){
    //limit the character movement 
    cX = constrain(mouseX,250,350);
    cY = constrain(mouseY,175,225);
    
    //shadow
    fill(110);
    ellipse(start_locationX+5,start_locationY+80,130,40)

    //draw green character
    //create animation effect with multiple image 
    let randomGreen = random(animGreen);
    image(randomGreen,start_locationX,start_locationY,150,180);

    //speed is inversely proportional to the mouse distance
    cdx = (cX - start_locationX)/20;
    cdy = (cY - start_locationY)/20;

    start_locationX += cdx;
    start_locationY += cdy;

}
function drawRedCharacter (){
    cX = constrain(mouseX,250,350);
    cY = constrain(mouseY,175,225);
    
    fill(255,0,0);
    image(redAlert,start_locationX,start_locationY,200,250);
    cdx = (cX - start_locationX)/20;
    cdy = (cY - start_locationY)/20;

    start_locationX += cdx;
    start_locationY += cdy;

}

LookingOutwards-11

Amber Vittoria’s illustration for Gucci Knitwear

use of soft and blurred colors, rounded body features

Amber Vittoria is a New York based artist and illustrator who is skillfully good at combing the analog and the digital in illustration. I came across an illustration project from her that is a commission for Gucci’s DIY knitwear collection. Exclusively working with female form and body parts in his drawing, she visualizes all kinds of stylized bodies into fashion campaign. The beginning of this practice is because of she recognizes that most of women cannot relate to the unrealistic image of women being used in fashion content and she hope to create these unique characters in a storytelling way. The soft and blurred colors portraits non-traditional, or non-idealised, representations of the female form with rounded body features and colorful flowers. Besides the visuals, I also admire how she take advantage of her creative experience to discuss these topics with the public.

Artist Website: https://www.ambervittoria.com/

LookingOutwards-10

LINES is an interactive musical instrument which is one of the most inviting and famous piece in the Tate Modern Museum. No musical experiences are required to perform this sound art which makes it constantly surrounded by kids to play with it. The five lines painted in different color on the wall are connected with different harmonies. By placing hands on different lines, the audience can enjoy this free, casual and playful music made by their own. The exhibition is created by the Swedish composer Anders Lind who has created a series of interactive sound art with simplicity. The combination of programming sensors and colors allow the audience to experience the fine line between “sound” and “music” freely and subtly.

Video Link: https://www.youtube.com/watch?v=hP36xoPXDnM

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/

LookingOutwards-08

Anouk Wipprecht is a Dutch-based fashion tech designer who works in the emerging field of electronic wearable installation, a combination of visual designs and interactive technology. Her project “Spider” employs microcontroller such as sensors and moveable joints to make the garments move and breathe with the wearer’s actions. Wipprecht researches on how machine learning and biomimicry are able to manipulate the texture and the function of daily outfits. By partnering up with tech companies such as INTEL, Autodesk and Audi, she fuse futuristic concepts into high fashion and evoke the audience senses towards their surroundings. In the project, she extracts the parking sensors from Audi cars to put on the clothes with geometric design elements, putting more focus on shape, look and feel of things into mechanical object while empowering the wearer with its functionality.

Artist Website: http://www.anoukwipprecht.nl/about-me-shift#bio

LookingOutwards-07

Designed by Frederic Vavrille, Musicovery is an interactive music service program that personalize music recommendations to various types of listeners by algorithms.

Listeners can start by choosing a mood or a radio as the initial metrics. Then the sound navigate the listeners to navigate between different artists.

Many music service engines are only based on collaborative filtering and user’s context, facing problem such as creating clones of playlist with very few artists, repetitively shuffling highly popular songs and cold start issues. To allow listeners to wander strategically out of their song/artist preferences, Musicovery optimize the system with more customized metrics to measure diversity. By concentrating less on the tops of the playlist, increasing higher variety and disparity, the service provides not only users based playlist but also context based playlist with more different navigations on genre. It also measures metrics including skips to analyze listeners’ level of engagement to each music. This increase the accuracy of the listeners’ preferences significantly.

Project-07-Curves

The project is based on the idea of using movement to capture the growing motion of a natural organism such as a sea creature or a human body part. Each of the new shape are overlap over the previous shape which show a processional motif on the canvas. I also add noise value into the function to allow the curves to offset and performing in a flowing state. 

sketchDownload
//Isabel Xu
//yuexu@andrew.cmu.edu
//Section A
//Project-07
var yoff = 0;
var max_radius = 100;
var angle_incr = 0.1;
var max_noise = 100;

function setup() {
    createCanvas(480, 480);
    background(0);
    frameRate(20);

}

function draw() {
	let max_radius = dist(mouseX,mouseY,width/2,height/2);
	let max_noise = max_radius;

	noiseDetail(1, 0.8);
	fill(253,242,220);
	translate(width/2, height/2);

	for (let radius = 0; radius < max_radius; radius += 1){
		beginShape();
		stroke(244,109,41);
		for (let a = 0; a < TWO_PI; a += angle_incr){
			//Use mouseX and mouseY to define offset value
			let xoff = cos(a) + 1;
			let offset = map(noise(xoff, sin(a) + 1 + yoff), 0 , 1,-max_noise, max_noise);
		
		
			let r = radius + (offset * map(radius,0,max_radius, 0.1, 1));
			let x = r * cos(a);
			let y = r * sin(a);


			curveVertex(x,y);
	}


	}
	endShape(CLOSE);

	yoff += 0.06

}

LookingOutwards-06

As one of the most renowned abstract artist, Marcel Duchamp produced “two works of music and a conceptual piece—a note suggesting a musical happening” between 1912 – 1915. Similar to his other creative work, his compositions represent a radical departure from anything done up till his time.
In the process of the composing, Duchamp made three sets of 25 cards, one for each voice with a single note per card, where extensive passages of pitches and rhythms are fully specified, but the rhythmic coordination of parts within the ensemble is subject to an element of chance. It is considered as one of the earliest work that is mechanically driven and largely determined by random procedures.

Project-06-Abstract-Clock

sketchDownload
//Isabel Xu
//15-104 Section A
//Project 6
var circ_size;
var s;
var h;
var m;

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

  //choose HSB colorMode for further arguments on hue and saturation
  colorMode(HSB);
  frameRate(10);
} 

function draw() { 
  background(255);

  let h = hour();
  let s = second();
  //define the hue of the cicle with the current hour 
  //define the saturation of the circle with the current second
  fill(360-h*15,104-s*1.73,255);
  noStroke();
  
  //define the size of the cicle by the current second
  let circ_size = (second ())*8;
  //ellipseJitter effect
  ellipse(width/2+random(-3,3), width/2+random(-3,3), circ_size, circ_size);
  
	// When the circle gets bigger than the screen
	// Make it small again
 	if (circ_size > 480) {
   	 circ_size = 0;
  	}
  	let m = minute()
  	push();
    //let the following element to locate at the center
  	translate(width/2+random(-3,3),0);
    //fill the rect with color that subtracted from the color of the circle
  	fill(h*15,s*1.73,255);
  	//define the length of the rect with the current minute
  	rect(-10,0,10,(m*8));
  	pop();
}