Adam He – Looking Outward – 01

I first encountered Pixar when I just got into elementary school. I had watched a lot of two dimensional cartoons. Animations were not really a special thing. But when I saw a Pixar movie, I was astonished. How can people make an animation in such realistic forms and movements. It seemed to be a magic to me that designers and computer scientists could generate such realistic and stylistic animation on computers.

Pixar began in 1979 under a group of talented people. Edwin Catmull and Steve Jobs, two of the most important figures, changed the whole animation industry as well as the film industry. The GCI animations were just as realistic and complex as real man actings. With its unique concepts and messages hidden in each film, Pixar’s animations immediately became well-known starting from the masterpiece Toy Story (1995).

I am currently learning a lot about three dimensional modeling and renderings, and I started to formerly understand the complexity and difficulties behind just creating one three dimensional rendering. Pixar invented its own rendering software, Renderman, and contributed greatly to the virtual computer graphics in the recent decades. Pixar appeared to be a magic when I was little, but now, I am starting to grasp the tricks behind those magics.

Toy Story (1995) The quality of the computer graphics animation created by Pixar changed the whole perceptions toward film making at the time

Rebecca Kim-Looking Outwards-01

Individuals behind the control hold Owen’s fate in their hands.

Titled “Owen” after the main character and his experiences, this Virtual Reality video game juxtaposes two unlikely fields: technological advances and mental health. Pitched and developed by my friend, Pauline Yang, along with her team at the Stanford Clinical Neuroscience Immersion Experience, Owen aims to humanize those with mental illness through real-life scenarios and a pick-your-fate style inspired largely by TellTale Games. It initially began with a concentration in schizophrenia, but due to its complexity, it was changed to depression (which nonetheless demands attention and awareness). The idea proved a finalist at Stanford Brainstorm Lab, and since them, her team has been working to bring Owen to life and mental health to light; however, they have not yet working with software and programming.

“Owen” inspires me because, coming from San Francisco, near the Silicon Valley, it’s easy to associate technology with privilege. However, using (or planning to use) programming skills to promote mental health awareness makes me feel hopeful for the generations who will be met with an abundance of resources in years.

Assignment 01

Self Portrait

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Assignment-01*/



function setup() {
    createCanvas(800, 600);
    background(220, 255, 254);


    /*hair shadow*/
    fill(81, 54, 54);
    noStroke();
    ellipse(380, 260, 190, 200);
    fill(81, 54, 54);
    noStroke();
    ellipse(366, 244, 190, 200);
    fill(81, 54, 54);
    noStroke();
    ellipse(398, 370, 190, 400);

    /*chest*/
    fill(245, 184, 161);
    noStroke();
    beginShape();
    vertex(200, 400);
    vertex(540, 400);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);

    fill(245, 184, 161);
    noStroke();
    beginShape();
    vertex(345, 300);
    vertex(408, 300);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);
    /*right shirt*/
    fill(220, 0, 0);
    noStroke();
    beginShape();
    vertex(420, 360);
    vertex(540, 400);
    vertex(430, 600);
    vertex(300, 600);
    endShape(CLOSE);
    /*left shirt*/
    fill(250, 0, 0);
    noStroke();
    beginShape();
    vertex(330, 360);
    vertex(200, 400);
    vertex(280, 600);
    vertex(400, 600);
    endShape(CLOSE);


    /*chin shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(370, 300, 100, 160);

    /*head shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(366, 260, 180, 200);

    /*head*/
    fill(247, 194, 171);
    noStroke();
    ellipse(366, 260, 160, 200);

    /*hair*/
    fill(81, 54, 54);
    noStroke();
    arc(366, 200, 160, 80, PI, PI + PI, OPEN);
    arc(386, 200, 140, 230, 0, QUARTER_PI);


    /*lips*/
    fill(234, 163, 169);
    ellipse(364, 330, 10, 10);
    ellipse(370, 330, 10, 10);
    /*right hand top*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(450, 244);
    vertex(460, 240);
    vertex(480, 280);
    vertex(460, 280);
    endShape(CLOSE);
    /*left hand top*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(280, 244);
    vertex(270, 240);
    vertex(250, 280);
    vertex(270, 280);
    endShape(CLOSE);
    /*right hand bottom*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(430, 344);
    vertex(466, 380);
    vertex(480, 280);
    vertex(460, 280);
    endShape(CLOSE);
    /*left hand bottom*/
    fill(247, 194, 171);
    noStroke();
    beginShape();
    vertex(316, 350);
    vertex(270, 350);
    vertex(250, 280);
    vertex(270, 280);
    endShape(CLOSE);


    /*right arm*/
    fill(250, 0, 0);
    noStroke();
    beginShape();
    vertex(430, 356);
    vertex(480, 340);
    vertex(540, 580);
    vertex(460, 580);
    endShape(CLOSE);
    /*left arm*/
    fill(220, 0, 0);
    noStroke();
    beginShape();
    vertex(320, 350);
    vertex(260, 340);
    vertex(220, 580);
    vertex(300, 580);
    endShape(CLOSE);

    /*right sunglasses*/
    fill(210, 252, 255);
    noStroke();
    beginShape();
    vertex(384, 290);
    vertex(380, 260);
    vertex(450, 250);
    vertex(440, 286);
    endShape(CLOSE);
    /* left sunglasses*/
    colorMode(RGB, 210, 252, 255, 4);
    noStroke();
    beginShape();
    vertex(354, 290);
    vertex(356, 260);
    vertex(280, 250);
    vertex(292, 286);
    endShape(CLOSE);
    /*glasses bridge*/
    fill(210, 252, 255);
    noStroke(0);
    rect(344, 266, 50, 2);



}

function draw() {

}

I had alot of fun with this assignment and enjoyed how satisfying it was to see each shape come together. I ended up using alot of quadrilaterals to make certain shapes and found it rather challenging to orient myself. Addditionally, I tried to add a css animation in the background for no reason other than me thinking it would look cool; However, after a significant amount of troubleshooting I had to relent. I couldn’t quite get the css to move behind the javascript so I’m excited to revisit this problem in the future.

LookingOutward-01

Japan holds technological fascinations that are perhaps years ahead of US day-to-day technology. That’s why it’s no wonder why the world’s first digital art museum (by digital art collective teamLab and Mori Building) opened in Tokyo, opening up a world that projects fantasy onto an immersive setting. The environment reflects child-like imagination and wonders, and although this does attract many children, it also engorges adults with elicited feelings of nostalgia.

The exhibits also elicit feelings of awe and innocence due to the sheer beauty of the many colors that are on display. I thought that this is truly the most immersive work of art that I could ever encounter and that because the works requires and reacts to human interaction, that the art is truly an experience more than a medium. Perhaps it was the artists’ intentions to throw the audience’s visuals and to promote “thinking out of the box”.

Original Source: https://www.tokyoweekender.com/2018/06/a-world-first-mori-building-digital-art-museum-team-lab-borderless-opens-in-tokyo/

Project 01- Jasper Rogal

Jasper Face

function setup() {
  createCanvas(300, 200);
}

function draw() {
    background(76, 45, 143);
    //neck
    fill(253, 228, 200);
    rect(140, 140, 20, 70);
    //face
    ellipse(150, 150, 55, 65);
    //eye
    fill('white');
    ellipse(140, 140, 12, 10);
    ellipse(160, 140, 12, 10);
    //iris
    fill('brown');
    ellipse(140, 140, 6, 6);
    ellipse(160, 140, 6, 6);
    //pupil
    fill('black');
    ellipse(140, 140, 2, 2);
    ellipse(160, 140, 2, 2);
    //nose
    fill(253, 228, 200);
    triangle(150, 150, 148, 160, 153, 160);
    //mouth
    arc(150, 166, 10, 10, 0, PI, OPEN);
    //eylashes left side
    line(140, 134, 140, 131);
    line(136, 135, 136, 131);
    line(138, 134, 138, 131);
    line(134, 135, 134, 131);
    line(142, 134, 142, 131);
    line(144, 135, 144, 131);
    //eyelashes right side
    line(160, 134, 160, 131);
    line(162, 134, 162, 131);
    line(164, 136, 164, 131);
    line(166, 136, 166, 131);
    line(160, 134, 160, 131);
    line(158, 134, 158, 131);
    line(156, 135, 156, 131);
    //hair
    stroke('brown');
    line(mouseX, 105, 150, 116);
    line(mouseX+5, 105, 155, 118);
    line(mouseX+10, 105, 160, 120);
    line(mouseX+15, 105, 165, 122);
    line(mouseX-5, 105, 145, 118);
    line(mouseX-10, 105, 140, 120);
    line(mouseX-15, 105, 135, 122);
}

This is my first time coding. Also my hair is animated.

Yiran Xuan-Project 01-Face

This self portrait was first designed on graph paper, on a 10×10 grid. This allowed me to easily map the shapes onto the 600 x 600 canvas and determine the coordinates for the various shapes.

yiranxuanface

function setup() {
    createCanvas(200, 20);
    background(220);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
  createCanvas(600, 600);
  background(200);
  noStroke();

  fill('black');
  arc(210, 210, 65, 65, 0, PI, CHORD);

  fill('rgb(100%,0%,10%)');
  arc(210, 210, 50, 50, 0, PI, CHORD);

  fill('#222222');
  quad(60, 240, 180, 480, 300, 540, 150, 480);

  //fill('black');
  triangle(150, 145, 270, 180, 120, 180);
  triangle(450, 145, 330, 180, 480, 180);

  triangle(320, 210, 360, 320, 320, 340)

  quad(320, 210, 480, 210, 420, 260, 320, 240);

  quad(540, 300, 450, 480, 330, 540, 450, 360);

  triangle(320, 480, 345, 480, 320, 520);

  stroke(0);
  strokeWeight(5);
  line(240, 450, 360, 450);
  line(60, 330, 90, 330);

  triangle(45, 240, 75, 330, 60, 330);
  triangle(285, 300, 280, 345, 255, 355);

  //line(300, 0, 300, 600);
  
  arc(280, 380, 30, 30, PI + QUARTER_PI, 0, CHORD);
  arc(340, 380, 30, 30, PI, PI + HALF_PI + QUARTER_PI, CHORD);

  strokeWeight(10)
  line(60, 210, 480, 210);

  noFill();
  quad(115, 210, 120, 290, 270, 290, 290, 210);
}

Sophie Chen-Project 01-Face

sophiec-sketch

function setup() {
    createCanvas(600, 600);
    background(243, 166, 138);
}

function draw() {
	//body
	noStroke();
	fill(77, 78, 73);
	arc(300, 630, 350, 350, PI, TWO_PI);

	// hair
	noStroke();
	fill(36, 38, 33);
	quad(100, 100, 160, 100, 210, 550, 70, 450);
	quad(360, 100, 460, 100, 520, 450, 390, 550)

	// head
	noStroke();
	fill(255, 224, 182);
	ellipse(300, 250, 300, 350);

	//neck
	rect(275, 400, 50, 80);
	ellipse(300, 477, 50, 50);

	//ears
	noStroke();
	fill(255, 224, 182);
	ellipse(150, 250, 50, 50);
	ellipse(450, 250, 50, 50);
	

	// face
	// mouth
	fill(255, 100, 80);
	arc(300, 300, 70, 80, TWO_PI, PI);
	//nose
	fill(243, 175, 132);
	ellipse(300, 250, 30, 30);
	stroke(243, 175, 132);
	strokeWeight(15);
	line(292, 210, 292, 253);
	//right eye
	fill(0)
	stroke(255, 255, 255);
	strokeWeight(5);
	ellipse(355, 200, 45, 45);
	//left eye
	fill(0)
	stroke(255, 255, 255);
	strokeWeight(5);
	ellipse(240, 200, 45, 45);
	//right eyebrow
	noStroke();
	fill(36, 38, 33);
	quad(330, 170, 330, 160, 375, 160, 396, 170);
	//details
	ellipse(385, 225, 5, 5);
	fill(248, 187, 182, 70);
	ellipse(390, 270, 90, 80);
	ellipse(200, 270, 90, 80);

	//hat
	fill(245, 245, 245);
	arc(300, 160, 350, 350, PI, TWO_PI);
	stroke(245, 245, 245);
	strokeWeight(100);
	line(50, 150, 400, 95);
	noStroke();
	fill(245, 100, 100);
	rect(300, 50, 25, 25);
	fill(255, 255, 255);
	rect(275, 50, 25, 25);
	fill(30, 90, 200);
	rect(275, 40, 50, 10);
	rect(275, 70, 50, 10);
	
}

Overall I really enjoyed creating this self-portrait. I learned that keeping the code clean and organized is super important and allowed me to have a better grasp of what I’m doing and code more effectively. I also found that rather than trying to make every feature look exactly like mine, incorporating one or two specific details made a huge difference.

Alessandra Fleck – Looking Outwards – 01

One project that I think communicates effective interaction between the user and program, while still maintaining a prominent message, is the “Funky Forest” installation in the Singapore Art Museum. Funky Forest is an interactive ecosystem that grows and moves to the motions of those who visit and interact with it. It is part of a series of interactive play spaces that has been developed over the course of a couple of years. The installation utilizes projections and animations, then takes it to the next step by allowing the visitor have a kinetic impact on the projections movement. Those who interact with the installation have the chance to impact the forest by planting seeds, and direct water with some of the tangible items on set such as pillow logs.

The interactive projection begins to insert itself onto the floor, as children play with the flow of the water coming off the waterfall.

Created by Design/IO, Funky Forest utilizes a stereoscopic camera/ kinect to detect the movements of those visiting the installation and send the information to a software program the firm developed that translates the action of the visitor to the motion of the animation.

In the image above, children play with the projection on the wall. As they wave their arms, trees begin to grow.

Beyond just being an installation that is whimsical and intriguing for those who visit it, the design and bright animations seek to bring to light the idea of environmental conservation and growth. I think that this project hold much potential in transforming the concept of the modern day classroom, into a 360 degree interactive space, where the interactivity and responsiveness of the program influence/teach the student.

Find out more about the project at the link below:

http://design-io.com/projects/FunkyForestSAM/

https://www.commarts.com/features/design-i-o

Sharon Yang Project 01 Self-Portrait

sharon-project01

/*Sharon Yang
Section C
junginny
Project-01-Face
*/

function setup() {
    createCanvas(600,800);
    background(254,230,240);

}
function draw() {
    //hair behind the face
    fill(50,41,46);
    rect(100,535,402,370);
    rect();

    //face
    fill(253,227,204);
    noStroke();
    ellipse(290,400,450,400);

    //bangs
    fill(50,41,46);
    noStroke();
    arc(290,320,430,280,PI,PI+PI,OPEN);
    arc(101,308,190,200,0,QUARTER_PI);
    arc(150,308,190,200,0,QUARTER_PI);
    arc(74,308,190,200,0,QUARTER_PI);
    arc(190,308,190,200,0,QUARTER_PI);
    arc(230,308,190,200,0,QUARTER_PI);
    arc(280,308,190,200,0,QUARTER_PI);
    arc(340,308,190,200,0,QUARTER_PI);
    arc(400,308,190,200,0,QUARTER_PI);
    //hair
    noStroke();
    arc(119,390,140,200,HALF_PI,PI+HALF_PI);
    arc(68,560,140,200,PI+HALF_PI,HALF_PI);
    arc(110,670,140,200,HALF_PI,PI+HALF_PI);
    arc(470,390,140,200,PI+HALF_PI,HALF_PI);
    arc(521,560,140,200,HALF_PI,PI+HALF_PI);
    arc(490,670,140,200,PI+HALF_PI,HALF_PI);
    //eyebrows
    fill(0);
    arc(200,415,100,65,PI,TWO_PI);
    fill(253,227,204);
    arc(200,425,120,65,PI,TWO_PI);
    fill(0);
    arc(390,415,100,65,PI,TWO_PI);
    fill(253,227,204);
    arc(390,425,120,65,PI,TWO_PI);
    //eyes
    fill(0);
    ellipse(200,430,85,60);
    ellipse(390,430,85,60);
    fill(255);
    ellipse(225,440,15,15);
    ellipse(415,440,15,15);

    //nose
    stroke(223,197,168);
    strokeWeight(4);
    line(290,460,310,470);
    line(310,470,300,483);
    fill(223,197,168);    

    //mouth
    fill(254,126,130);
    noStroke();
    ellipse(300,520,185,44);
    fill(253,227,204);
    ellipse(300,514,170,38);

    //dimples
    stroke(223,197,168);
    strokeWeight(3);
    arc(194,520,15,15,HALF_PI,PI,OPEN);
    arc(400,520,15,15,TWO_PI,HALF_PI,OPEN);

    //neck
    noStroke();
    fill(253,227,204);
    rect(235,608,120,100);
    fill(253,227,204);
    ellipse(295,591,127,100);

    //shoulders
    fill(5,57,111);
    rect(100,660,400,200,80);

    //v-neck on the shirt
    fill(253,227,204);
    noStroke();
    triangle(230,660,295,770,360,660);
    stroke(255);
    strokeWeight(13);
    line(238,662,300,770);
    line(360,662,300,770);

    //ears
    fill(253,227,204);
    noStroke();
    arc(128,460,100,100,HALF_PI,PI+HALF_PI);
    arc(461,460,100,100,PI+HALF_PI,HALF_PI);

    //earrings
    fill(255);
    ellipse(123,495,14,14);
    ellipse(473,495,14,14);
}

I found the self-portrait project really fun but quite time consuming and tough as I was not yet familiar with the functions in javascript. In order to create shapes, curves and lines, I had to look up the functions that would result in creating the objects I wanted. When I could not figure out some of the advanced functions, it required creativity to create the objects using different shapes. As I could not quite figure out using the berzier function, I used arcs to make the curls on my hair. Finding the right coordinates was also quite tedious at first, but I got used to it and so it took less time perfecting them.

Sean McGadden Looking Outward – 01

Sean McGadden

Looking Outwards – 01

SpaceX – Making Life Multiplanetary

I have recently read up and seen on the news some of the amazing things that SpaceX is currently doing with privatized space launch. Although this topic is not completely related to the field of Computer Science, I think it is clear the applications and uses on a small scale at the very least. Launching a rocket in to space requires many hours of planning and coordination among a large team of engineers, programmers, designers, mathematicians and I’m sure there or more people involved than just these.

So far, SpaceX has launched 56 missions into space. Something very much unheard of from a private agency. Nearly all missions besides satellite launches have been from government agencies around the world. SpaceX is making strides in many ways to making space flight cheaper, more reliable and more frequent. Elon Musk, in his initial presentation explaining some of the work SpaceX had been involved in, showcased the success of previous flights. He also his exposed his intent on making one of the largest rockets ever made. It is called the BFR and will weigh over 1500 tons. He plans to launch this rocket capable of carrying over 1000 tons of supplies and being able to house over 100 passengers within the next few years. The reality of commercial space flight seems far closer than I might’ve ever imagined.

This topic is very inspirational to me because I’ve always looked at the stars with awe and even the ability to go to space excites me. I once even thought of being an astronaut. SpaceX was founded in 2009 and since then has implemented many new techniques for space flight. They have developed countless new computer programs to autonomously land and take off reusable fuselages. These programs are industry leading and innovative in terms of space flight. They are exciting and new discoveries for humanity and space travel.

Looking Outward – 01