SectionE – Page 34 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Charmaine Qiu – Looking Outwards – 01

During the summer, I visited an interactive exhibition in Shanghai called “teamLab: Universe of Water Particles in the Tank”. The exhibition showcased a section of Japan’s “teamLab Borderless” in Mori Museum. From the exhibition, I remembered being immersed in a space surrounded by digitally animated waterfalls and flowers, yet when the viewers physically make contact with the space, flowers would boom from the surface.

The concept of “teamLab Borderless” was to display artworks that exist without boundaries, and that viewers are invited to interact and become part of the work. This could be inspired by interactive art installations like the rain room.

This is an interactive installation created by teamLab named “Transcending Boundaries”

TeamLab is a collaborative group that consists of artists, programmers, engineers, CG animators, mathematicians and architects; together, they create artworks that connects humans with nature by embracing digital technology.

More information can be found through this link:

https://borderless.teamlab.art/

Angela Lee – Looking Outwards – 01

A video detailing the installation of “Floating in the Falling Universe of Flowers” by teamLab.

Digital installation “Floating in the Falling Universe of Flowers” by teamLab.

This summer, I visited teamLab’s Planets exhibition of digital art in Tokyo, Japan. I was especially inspired by the art piece, “Floating in the Falling Universe of Flowers.” The project, a video showing flowers falling towards the ground, was projected across a dark dome ceiling, and viewers could watch lying down, sitting, or standing. According to the creators, the video is rendered in real time by a computer, and the viewer’s interactions with the installation affect what is rendered. teamLab, a collaborative creative arts group, worked with Hideaki Takashi, who created the soundtrack. The work felt similar to another installation from the exhibit (“Drawing on the Water Surface Created by the Dance of Koi and People – Infinity”) since both works explored the beauty of temporariness. As someone who tends to enjoy routine, this installation inspired me to be more open-minded towards change. While the imagery of the flowers falling and wilting was sad, I was also struck by the beauty of its aging process. This piece of art was thought-provoking because it lead me to realize that an exact moment in time can never happen again—everything is temporary, and maybe that elicits beauty. I think the creators created a impactful, immersive space by engaging the senses through sound, smell, and sight.

Caroline Song Looking Outward – 01

An interactive piece of design that has recently been an inspiration of mine is a website called Work Responsibly by Ales Nesetril. It has a very simplistic approach, as well as a calming color scheme (light grays and greens). Because the website is dedicated to helping young adults find a responsible and balanced lifestyle/mindset regarding their job, the peaceful sensation the site seems to give off makes sense.

A sample page from Work Responsibly. Here, you see the subtle color scheme of the website that I had mentioned above, as well as the minimalist approach I had also previously described. Link: https://www.workresponsibly.org/

Regarding Work Responsibly itself, this website is a compilation of mental resources, organized by what each person is specifically struggling in, in order to live the most productive and healthy work/life-style.

A collection of resources for sleep deprivation. The placing of the articles in an unconventional grid format is intriguing and allows the eye to be drawn to other resources more than others, which seems purposeful. Link: https://www.workresponsibly.org/sleep

One of my favorite parts of this website are the sliding effects that take place as I navigate the website. This is such a smooth transition that nothing takes me aback as new information glides across the screen in a manner that allows me not to feel stressed at all, even as a great deal of material is being presented to me.

As I mentioned before, this website was created by one person in the start of 2019 (however, Nesetril did mention his willingness to expand in collaboration with other designers). Therefore, this piece of interactive design is very new, which the author acknowledges by saying that this is currently a design that is in process and is always growing.

Using WebFlow to create this website (commercial software), Nesetril’s website design has potential to grow into a reliable mental health resource for those in the workforce. Especially since mental health is a prominent issue today, this website seems to have been created at the right time for it to increase in noticeability.

Mihika Bansal – Looking Outwards – 01

The particular piece of digital art that I recently became interested in is from the Whitney Museum and it’s called Programmed: Rules, Codes, and Choreographies in Art, 1965–2018. This piece specifically works to connect different forms of digital art that have been produced over the past 50 or so years. All the pieces that are included in this piece focus on code as their set of instructions, that they use to create a driving force of the art itself. The project also uses code to manipulate the actual output that the user sees.

A video screen capture of the video display in the exhibit
https://gagosian.com/media/images/gallery/news/2018/vZhaKQ9pK2zT_570x570.jpg

This exhibit is particularly interesting because it gives us an opportunity to look at how things have grown and changed in the digital art scene over the past 50 years. It also is a way to look at the artifacts that have been left behind in the digital space, something that we didn’t have to consider before. The exhibit touches upon the drastic change in the manner that information is now disseminated to mass amounts of people in addition to the way technology has changed the spaces that we live in, with many of our spaces now centered around an integral piece of technology in our room, like couches in a living room around a TV screen.

The full exhibit space
https://thomafoundation.org/wp-content/uploads/2018/11/Photo-Oct-10-9-33-58-AM-1140×855.jpg

The actual exhibit has work of many artists and has 4 total curators of this work. All these artists worked to create custom code, that worked to display what was needed in that instant for that viewer of the project.

Link: https://whitney.org/exhibitions/programmed

Ilona Altman – Project- 01

sketch



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

function draw() {
    rect (10,10,40,40);
    }

Margot Gersing – Project – 01

This project was a really good way for me to get more comfortable in p5js. I enjoyed the challenge of creating a simple face made from a limited selection of graphic elements. I also enjoyed using playful colors. Lastly, I decided to include a simple mouse interaction that we learned in class on Friday to add another level of interest and introduce more colors.

margot-project01



function setup() {
    createCanvas(700,700);
    // background(255,200,0);
}

function draw() {

	// background
	noStroke();
	fill('#f4cf92');
    if(mouseIsPressed){
    	fill('#6f968e');
    }else {
    	fill('#f4cf92');
    }
	rect(0,0,700,700);

	// face
	noStroke();
	fill('#d5541a');
	if(mouseIsPressed){
    	fill('#e2babf');
    }else {
    	fill('#d5541a');
    }
    ellipse(350,350,650,650);

    // left eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(200, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(200,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(150,260,135,270);
    line(160,270,150,280);
    line(170,275,165,285);

    // right eye
    noFill();
	stroke('#e2babf');
	if(mouseIsPressed){
    	stroke('#d5541a');
    }else {
    	stroke('#e2babf');
    }
	strokeWeight(6);
    arc(500, 250, 110, 70, PI, TWO_PI);
    fill('#e2babf');
    if(mouseIsPressed){
    	fill('#d5541a');
    }else {
    	fill('#e2babf');
    }
    ellipse(500,240,50,50);

    // left eyelashes
    strokeWeight(4);
    line(550,260,565,270);
    line(540,270,550,280);
    line(530,275,535,285);

    // eyebrows
    strokeWeight(8);
    line(130,150,300,150);
    line(400,150,570,150);

    // nose
    line(300,150,300,400);
    noFill();
    arc(350,400, 100, 100, QUARTER_PI, PI);

    // mouth
    strokeWeight(10);
    line(270,560,370,560);
    arc(345,560,150,70,PI,TWO_PI);    
}

Yoshi Torralva – Project – 01

sketch

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

function draw() {
    rect(width/2, height/2, 50, 50);
    fill("red")
}

Zee Salman – Project – 01

sketch

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

function draw(){
	rect(10,10,40,40);
    fill('pink')
}

Joseph Zhang – Project – 01

Project 01 – Self Portrait

//https://p5js.org/reference/

// setup() runs once
// every program should have program setup
function setup(){
	createCanvas(600,600);
	background('#D1C3BA');
	noStroke();

	//black hair
	fill('#191919');
		ellipse(300,274,218.6,288);
		translate(291.6,161.5);
		rotate(-6.1);
		ellipse(0,0,138.9,74.1);
		rotate(6.1);
		translate(-291.6,-161.5);

	//ears + neck
	fill('#C69B7B');
		ellipse(195,312,34,58);
		ellipse(404,312,34,58);
		rect(243,397,114,142);

	//face + facial features
	fill('#E0BA99');
		ellipse(300,307,208,274);
		rect(196,312,208,91);
		triangle(196, 404, 300, 467, 404, 404);
		rect(300,371.5,80,27);
	
	//nose + mouth
	fill('#C69B7B');
		triangle(284, 350, 300, 322.6, 316, 350);
		rect(284,344,32,12);
		ellipse(300,385,80,46);

	//upper mouth
	fill('#E0BA99');
		rect(260,358,80,27);

	//eyes and body
	fill('#191919');
		ellipse(247,299,22,22);
		ellipse(353,299,22,22);
		ellipse(300,644,360,274);

	// ears
	fill('#DDDDDD');
	ellipse(186,332,8,8);
	ellipse(414,332,8,8);
}

Besides understanding the functions available with using p5.js, one of the biggest takeaways I received was understanding the importance of sequencing code properly. Certain lines of code would mess the entire visual composition of the portrait if not put in the right place. I realized that much of the learning process came from working, crashing, revising, and rebuilding.

Jina Lee – Project – 01

Before starting this code, I made an Adobe Illustrator file. The reference made it easier for me to understand where the coordinates were. When I first started, I couldn’t mentally imagine the where the shapes were on the canvas, but as I added more elements it got easier.

This was the reference that I used when making the base of my self-portrait.

sketch

function setup() {
    //Jina Lee
    //Section E
    //jinal2@andrew.cmu.edu
    //Project-01(Self-Portrait)

    createCanvas(400, 400);
    background('rgb(46, 175, 74)');
    
    //hair
    noStroke();
    fill('rgb(61, 52, 35)');
    rect(50, 160, 80, 150);
    
    noStroke();
    fill('rgb(61, 52, 35)');
    rect(270, 160, 80, 150);
    
    noStroke();
    fill('rgb(61, 52, 35)');
    ellipse(200, 160, 300, 210);
    
    //face
    noStroke();
    fill('rgb(201, 171, 112)');
    rect(163.5, 270, 71.2, 40);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(200, 180, 250, 210);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(70, 180, 30, 40);
    
    noStroke();
    fill('rgb(221, 188, 115)');
    ellipse(330, 180, 30, 40);

    //shirt
    noStroke();
    fill('rgb(118, 185, 219)');
    arc(200, 401, 250, 200, PI, 0, CHORD);

    noStroke();
    fill('rgb(201, 171, 112)');
    arc(199, 301, 71, 65, 0, PI, OPEN);
    
    //eyes
    noStroke();
    fill('white');
    ellipse(130, 160, 60, 60);
    
    noStroke();
    fill('white');
    ellipse(275, 160, 60, 60);
    
    noStroke();
    fill('black');
    ellipse(275, 160, 30, 30);
    
    noStroke();
    fill('black');
    ellipse(130, 160, 30, 30);

    //earrings
    noStroke();
    fill('rgb(183, 183, 183)');
    arc(340, 170, 10, 10, 0, PI + QUARTER_PI, PIE);

    noStroke();
    fill('white');
    ellipse(335, 190, 5, 5);

    noFill();
    stroke('rgb(183, 183, 183)');
    strokeWeight(2);
    arc(330, 199, 10, 10, 0, PI);

    noFill();
    stroke('rgb(183, 183, 183)');
    strokeWeight(2);
    arc(70, 199, 10, 10, 0, PI);
    
    //mouth
    noStroke();
    fill('white');
    ellipse(200, 230, 50, 50);

    noStroke();
    fill('black');
    arc(200, 230, 50, 50, 0, PI, PIE);
    
    stroke('black');
    strokeWeight(4);
    line(200, 250, 200, 206.5);

    //baby hairs
    noFill();
    stroke('rgb(61, 52, 35)');
    strokeWeight(10);
    line(110, 60, 130, 80);

    noFill();
    stroke('rgb(61, 52, 35)');
    strokeWeight(10);
    line(130, 60, 130, 80);
}

function draw() {          
}