Author: Mimi

Mimi Jiao – Looking Outwards 2 – Section E

Still Life (RGB-AV A) from Casey REAS on Vimeo.

Casey Reas is an artist who observes art through a technological and contemporary lense through coding, software, installations, and prints. As one of the creators of Processing, Reas has expressed interest in software and programming for artistic application starting from his undergraduate days. All of his works illustrate his interest in the intersection between technology and art, and his Still Life (RBG-AV A) and Still Life (HSB A)/Still Life (HSB B), created with custom written software, have caught my attention in particular. I am intrigued by the way technology is implemented to portray something that seems so primitive. The visuals of the pieces convey an aesthetic resembling to that of computers made in the early 2000’s or even before, with pixelated and “glitchy” visuals. Reas has taken visuals that occur as a result of technological imperfection and appropriated that into generative artwork and makes viewers begin to appreciate the beauty of the digital realm. His use of colors also further strengthen the sense of primitive technology, and he portrays a realistic rendering of such aesthetic. One thing that I thought he could’ve developed further upon was bringing technology into the experience of his video pieces such as his Still Life (RBG-AV A). As the sensory experiences also contribute to the presentation of his artwork, it would be interesting to see him play around with the technology of generative audio in tandem with his generated visuals. This type of work is something that I am really interested in creating, and I would love to learn more about his process behind it.

Mimi Jiao _ Face Variable Project – Section E

I wanted to play around with very primitive shapes and unrealistic colors to create a robot-like face celebrating its birthday.
sketch

/* 
Mimi Jiao
Section E
wjiao@andrew.cmu.edu
Project-02
Variable Face
*/

//background color
var BGcolor = 200;
var faceWidth = 100;
var faceHeight = 150;
//x-coordinate position of face
var faceX = 100;
//y-coordinate position of face
var faceY = 100;
var faceColor = 200;
//corner roundness for face
var faceTopLeftCorner = 15;
var faceTopRightCorner = 10;
var faceBottomRightCorner = 14;
var faceBottomLeftCorner = 25;
var eyeColor = 140;
var leftEyeLocationX = .20;
var leftEyeLocationY = .3;
var rightEyeLocationX = .61;
var rightEyeLocationY = .50;
var noseColor = 21;
var nosePosition = 20;
var noseHeight = 15;
var noseWidth = 8;
var hatColor = 200;
var hatHeight = 80;
var hatTip = 20;
var mouthColor = 23;
var mouthShape = 15;
var mouthX = 4;
var mouthY = 1.35;
var mouthHeight = 10;
var mouthWidth = 20;
var faceLength = 70;


function setup() {
    createCanvas(480, 640);
    background(255,255,0);
}
 
function draw() {
    background(255,150,BGcolor);

    //face 
    fill(faceColor,180,255);
    noStroke();
    rect(faceX, faceY, faceWidth, faceHeight,
        faceTopLeftCorner,faceTopRightCorner,
        faceBottomRightCorner,faceBottomLeftCorner);

    //eyes
    fill(eyeColor,255,eyeColor);
    ellipse(faceX + faceWidth*leftEyeLocationX, 
        faceY + faceHeight*leftEyeLocationY,
        20, 20);
    ellipse(faceX + faceWidth*rightEyeLocationX,
        faceY + faceWidth*rightEyeLocationY,
        20,20);

    //nose
    fill(255,noseColor,0);
    rect(faceX + faceWidth*leftEyeLocationX + 5,
        faceY + faceHeight*leftEyeLocationY + nosePosition,
        noseWidth,noseHeight, 5, 5, 5, 5);

    //hat
    fill(hatColor,230,hatColor);
    triangle(faceX+faceWidth/2,faceY,faceX+faceWidth,
        faceY+faceHeight/4,
        faceX+ faceWidth, faceY - hatHeight);
    ellipse(faceX + faceWidth, faceY - hatHeight, hatTip,hatTip);

    //mouth
    fill(255,mouthColor,mouthColor);
    rect(faceX + faceWidth/mouthX,
        faceY + faceHeight/mouthY, mouthWidth, mouthHeight,
        mouthShape,mouthShape,mouthShape,mouthShape);

    //body
    fill(hatColor,230,hatColor);
    rect(faceX + faceWidth/2, faceY + faceHeight, 
        faceWidth*1.5,faceHeight*1.75, 20, 20, 20, 20);

    //arms
    fill(hatColor,230,hatColor);
    rect(faceX - faceWidth/3, 
        faceY + faceHeight/.8, 
        faceLength, 30,10,10,10,10);
    rect(faceX + faceWidth/.75, faceY/.8,
     30, faceLength,10,10,10,10);

    //legs
    fill(hatColor,230,hatColor);
    rect(faceX + faceWidth/1.5, 1.7*(faceY + faceHeight),
        30, faceLength*1.3, 10,10,10,10);
    rect(faceX + faceWidth/.8, 1.7*(faceY + faceHeight),
        30, faceLength*1.3, 10,10,10,10);

}
 
function mousePressed() {
    BGcolor = random(0,90);
    faceWidth = random(73,109);
    faceHeight = random(90,132);
    faceX = random(70,150);
    faceY = random(160,200);
    faceColor = random(0,150);
    faceTopLeftCorner = random(5,25);
    faceTopRightCorner = random(10,40);
    faceBottomRightCorner = random(14,30);
    faceBottomLeftCorner = random(25,50);
    eyeColor = random(0,120);
    leftEyeLocationX = random(.22,.35);
    leftEyeLocationY = random(.29,.39);
    rightEyeLocationX = random(.61,.69);
    rightEyeLocationY = random(.40,.50);
    noseColor = random(21,201);
    nosePosition = random(10,30);
    noseHeight = random(5,10);
    noseWidth = random(4,14);
    hatColor = random(0,255);
    hatHeight = random(60,130);
    hatTip = random(10,50);
    mouthColor = random(0,255);
    mouthShape = random(0,15);
    mouthX = random(3.4,6);
    mouthY = random(1.2,1.4);
    mouthHeight = random(5,10);
    mouthWidth = random(5,20);
    faceLength = random(50,90);
}

Mimi Jiao Looking Outwards 1

Cooper Hewitt Smithsonian Design Museum’s Pen system was the first time I became actively aware of the design of the museum itself. By implementing its pen throughout the museum, it brings technology into a museum setting, and enriches and extends the overall experience.

The project was commissioned by Cooper Hewitt to implement visitor technology. Many teams, both domestic and international, including Local Projects and Sistelnetworks, were involved in the making of the pen. Designers as well as engineers, computer scientists, and manufacturers helped bring this to reality. To my knowledge, the technology used did not use much off-the-shelves software. The pen operates based on an embedded sensor that reads NFC tags throughout the museum. This technology is available the general public and is available on Android phones and many other products.

The Cooper Hewitt focuses on current and upcoming designed artifacts, with many exhibitions showcasing works that integrate technology and coding with the product/experience. By introducing this pen, that aspect of Cooper Hewitt’s identity is reinforced. In addition, it adds a playfulness to the experience, making it friendly for kids and adults alike. The part that impressed me the most about this design is that it brings power to the user and gives them the opportunity to revisit the museum remotely. Peripheral to the pen, interactive screens on tables were also implemented to push visitors to be become more hands on with design. These screens allowed people to design their own objects, giving them the freedom to manipulate form, material, context, and color. It has brought museum-going into the digital dimension, and has set a precedent for this type of experience.

For more information, visit Cooper Hewitt

Mimi Jiao Face Project

not sketch

function setup() {
    createCanvas(500, 650);
    background(255,225,0);
}

function draw() {
	/*noFill();
	stroke(0);
	curve(200,0,200,0,400,180,342,300);
	*/

	//hair
	fill(255,0,0);
	noStroke();
	rect(100,300,300,400);
	fill(255,0,0);
	rect(350,265,50,400);
	

	//neck
	noStroke();
	fill(255,78,78);
	rect(210,400,80,100);
	fill(0,0,255);
	ellipse(250,420,120,120);
	fill(255,0,0);
	rect(130,400,80,100);
	fill(255,0,0);
	rect(290,400,80,100);

	

	//face
	noStroke();
	//fill(255,0,0);
	fill(255,78,78);
	ellipse(250,300,300,300);


	//turtleneck
	fill(0,0,255);
	rect(200,490,100,30);
	fill(0,0,255);
	quad(200,520,300,520,450,620,50,620);
	fill(0,0,255);
	rect(50,620,400,100);


	//bangs
	fill(255,0,0);
	//curve(5, 26, 5, 26, 200, 240, 200, 240);
	
	arc(398, 180, 450, 190, HALF_PI, PI, CHORD);
	arc(250, 275, 300, 280,PI+QUARTER_PI,TWO_PI,CHORD);
	arc(250, 275, 300, 280,PI+QUARTER_PI,TWO_PI,CHORD);
	rect(350,265,50,280);
	arc(170, 300, 140, 280,PI,PI+HALF_PI,CHORD);
	//arc(140, 250, 40, 230,TWO_PI,TWO_PI+PI+HALF_PI,CHORD);
	rect(100,290,50,240);
	/*fill(0);
	stroke(20);
	point(180,200);
	point(150,290);
	point(100,290);
	point(155,170);
	*/
	quad(180,200,150,290,100,290,155,170);
	rect(155,179,25,25);

	//eyebrows
	fill(0);
	stroke(30);
	point(165,290);
	point(179,280);
	point(225,288);
	point(275,288);
	point(321,280);
	point(335,290);
	noFill();
	stroke(0,0,255);
	strokeJoin(ROUND);
	strokeWeight(10);
	beginShape();
	vertex(165, 290);
	vertex(179, 280);
	vertex(225,288);
	endShape();
	beginShape();
	vertex(275,288);
	vertex(321,280);
	vertex(335,290);
	endShape();

	//eyes
	point(184,310);
	fill(0,0,255);
	ellipse(195,315,45,20);
	noStroke();
	fill(255,255,0);
	ellipse(195,319,50,23);
	fill(0,0,255);
	ellipse(199,317,25,25);

	stroke(0,0,255);
	fill(0,0,255);
	ellipse(306,315,45,20);
	noStroke();
	fill(255,255,0);
	ellipse(306,319,50,23);
	fill(0,0,255);
	ellipse(310,317,25,25);

	//nose
	noStroke();
	fill(255,0,0);
	triangle(250,325,240,375,270,375);

	//mouth
	noFill();
	stroke(255,0,0);
	arc(255,395,70,10,0,PI,OPEN);

}

Lately neon and saturated bright colors have appealed to me a lot, so I used my current favorite colors to create a self portrait.