Rachel Lee Looking Outwards 12 Section E

Living Library by Design I/O (2016).

 by Béatrice Lartigue (2009).

For my final project, I am interested in the idea of telling a story. As such, I selected two projects that are described as educational projects, used to facilitate teaching or stories amongst children. The two projects I have chosen are Mü by Béatrice Lartigue (educational installation) and Living Library by Design IO (interactive projected encyclopaedia).

I really admired how both projects were able to harness technology to create a story/ experience that went beyond the screen. For example, in Mü, interaction and creativity is encouraged through the educational application, but are used to guide class activities and discussions in the real world. Similarly, Living Library is housed in a museum, supplementing interaction with the surrounding Connected World exhibit, as well as interaction with others due to the interactive and dynamic nature of the project. Most importantly, both projects are able to delight and appeal to our senses regardless of age, which I hope to evoke in those who view my project. Something that was not considered in the two projects that I might try to address in my storyline for my final deliverable is how specific interactions might trigger divergent storyline paths for the viewer, or be a catalyst for the next section of the story, rather than having the interactions contained within one section of the narrative. This might help keep viewers more engaged, and feel a deeper connection with the piece.

Carley Johnson Looking Outward 12

Currently, the idea for my project is a platform-based game. To create a comparison, it would be something like the IOS game Doodle Jump. There are things this game MUST have and things that, if time permits me, I’d LIKE it to have. For me the game must have randomly generating platforms, a vertically scrolling screen, keypad controls for an icon, good bounce physics for the icon, and the ability to detect when the player falls off the screen to restart the game. What I might like to add to the game eventually is some sort of extra obstacle- an enemy to avoid that flies in the air, or an object that can be collected. I might I also like to add a “you lose” type screen that displays the number of platforms jumped on, and the ability to start a new game when the keyboard is pressed. The second drawing (the “or”) is the possibility, if I find this too difficult, to instead do a vertical scrolling game wherein you must roll an icon down the screen and avoid being squished. A goal of mine for this project is also for the game to just be aesthetically pleasing. I’m not a designer, but I want this game to LOOK very sweet because I think design is really important when it comes to art, or specifically interactive art. Obviously, a prior project to look at is the original game Doodle Jump, as well as many, many knock off games (fast follows). There is another indie point-and-click story based game, however, whose aesthetic is more that of the game I want to create. Night in the Woods is quirky and beautiful, with great, great color palettes, and also very nice physics when it comes to characters running and jumping. This is the look I’m going for.

Emily Zhou – Looking Outwards – 12

Two projects that I find interesting and are coincidentally somewhat related in subject matter are Step Up To It by Red Paper Heart and Cotton Candy Theremin by StewardessLollipop.

Step Up To it is an installation piece made of sugar cubes. Hundreds of sugar cubes were glued to spell the words “STEP UP TO IT”. When the viewer smiles, a projection causes the sugar cubes to light up in bright colours.


Step Up To It video explanation.

Cotton Candy Theremin is a cotton candy spinning performance. It uses the process of making cotton candy as an interface of sight, sound, smell, touch and taste. The audience can trigger sounds and visuals by spinning a cotton candy cone over wisps of candy floss.


Cotton Candy Theremin documentation and interviews.

Both projects use physical materials (both sweets) combined with technology and computing to create an interactive and immersive experience. I admire the fact that both projects require viewer/audience efforts to come to life. I want to incorporate a similar level of fun and engagement in my final project.

Yingying Yan – Project 11 Composition

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-11
*/
//make an array so i can draw more than one flower
var ttl = [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2];

function setup() {
    createCanvas(480, 240);
    background(0);
    frameRate(10);
    //set up the make turtle 
    for(var i = 0; i < ttl.length; i++) {
    	ttl[i] = makeTurtle(random(width), random(height));
    }
}

function draw() {
	for(var i = 0; i < ttl.length; i++) {
		ttl[i].setWeight = (random(0.1,5));
    	ttl[i].setColor = (random(150), random(200), random(255));
    	//start drawing the flowers
		ttl[i].penDown();
		var dd = 4
		ttl[i].forward (dd);
		ttl[i].right(dd);
		ttl[i].right(dd);
		ttl[i].forward(dd);
		ttl[i].left(dd)
		ttl[i].forward(dd * i);
		ttl[i].left(150);
	}


}
//restart the drawing
function mousePressed(){
	background(0)
}

//////////////////////////////////////////////////////////////
function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

JasonZhu_Project-11-Composition

sketch

/* Jason Zhu
Section E
jlzhu@andrew.cmu.edu
Project 11
*/

var bigturtle;

function setup() {
    createCanvas(450, 450);
    // set color variables for background
    var cx = constrain(mouseX, 0, 480);
	var cy = constrain(mouseY, 0, 480);
	var red = cx * .3
	var green = cy * .3
	var blue = 100
    background(red * .3 - 15, green * .3 - 15, blue * .3 - 15);
    // set stroke settings
    strokeJoin(MITER);
    strokeCap(PROJECT);
    // create turtle and adjust settings
    bigturtle = makeTurtle(width / 2, height / 2);
    bigturtle.setColor(255);
    bigturtle.setWeight(2);
    bigturtle.penDown();
    frameRate(999);
}

function draw() {
		for (var i=0;i<1;i++){
    	turtle = makeTurtle(-25,-25)
    	turtle.penDown
    }
        // set color variables for turtle
        var cx = constrain(mouseX, 0, 450);
		var cy = constrain(mouseY, 0, 450);
    	var red = cx * .58
		var green = cy * .58
		var blue = 108
		turtle.setColor(color(red,green,blue))
		turtle.setWeight(mouseY/20)
		turtle.penDown()
		turtle.forward(mouseY)// move depending on the y position of the mouse.
		turtle.right(90) // turn turtle right.
		turtle.forward(mouseX) // move again depending ont he xposition of the mouse.
		turtle.left(90) // turn turtle left.
		turtle.back(mouseX) // move again depending ont he xposition of the mouse.
		turtle.right(90) // turn turtle right.
		turtle.back(mouseX) // move again depending ont he xposition of the mouse.
		turtle.left(90) // turn turtle left.
		turtle.back(mouseX) // move again depending ont he xposition of the mouse.
	}

// Turtle Code
function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For this project I wanted to try to create hallway compositions with p5.js. I devised the following system in order to replicate hallways under a compliment color scheme when a user draws a line diagonally. Overall, I found the project stimulating and particularly informative in the inner workings of how the turtle function runs.

Example of a hallway being rendered with the code (1) when a line is drawing primarily diagonally towards the left.
Example of a hallway being rendered with the code (1) when a line is drawing primarily diagonally towards the right.
Free from random drawing.

JasonZhu_LookingOutwards11

This week, I chose to write about Ryoji Ikeda, a Japanese computational musician whose work uses computers in order to create music that can convey emotion differently and convey more complex concepts. In particular, I want to talk about one of his projects, Superposition, which is a collaborative work by Ryoji Ikeda with Stephane Garin, Amélie Grould in 2012.

Superposition is a project that aims to help people understand nature on an atomic scale. It was inspired by the mathematics that go into quantum mechanics. The project makes use of quantum information. While bits are typically displayed in binary (0 or 1), quantum information is QUBIT (quantum binary digits) where 0 and 1 superposed at the same time. This is incredibly concept conceptually, but is much more replicative of nature. Using sound as at the medium and quantum information is the inspiration, Ikeda takes significantly from computation in developing the work as well. It is nearly entirely data and algorithmic driven and makes a powerful commentary on the nature of computationally inspired and created music. This is perhaps what I most admire about the piece and the composer.

http://www.ryojiikeda.com/project/superposition/

An photo of the piece being performed.

Nina Yoo – Project 11 – Composition

sketch

/* Nina Lee Yoo
Section E
nyoo@andrew.cmu.edu
Project-11:A Composition*/

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


    }


function draw() {

	for (var t=0;t<10;t++){
    	turtle = makeTurtle(0,0)
    	turtle.penDown
    }
	
		var r = (random(0,200));
		var g = (random(50,100));
		var b = (random(100,150));
		
	
	


		turtle.setColor(color(r,g,b))
		turtle.setWeight(1)
		turtle.penDown()
		turtle.forward(mouseX)// moving the initial fowards with them mouseX
		turtle.right(50)
		turtle.forward(mouseY) //movingthesecondfoward(creating longer lengthfor th first line)
		turtle.right(50)
		turtle.forward(100)
		turtle.right(mouseX)//(manipulating the end of the string)
		turtle.forward(100)
		turtle.right(20)
		turtle.forward(100)

		

}







function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}


It was cool seeing how if you changed the points on the turtle with mouseX or mouseY how it affected the whole drawing. It was difficult to grasp the concept at first due to my idea of turtles being static, but when doing the project it has helped me understand the underlying idea of turtle.

Nina Yoo- Looking-Outwards-11

Of Nature and Things -Fedde Ten Berge-December 7 , 2017

This project uses the objects forms to create sounds. It was interesting to see the creator  Fedde use many organic objects and man made objects to create these sounds. I was inspired  by his capability of understanding an object through sound, because it is almost creating a new way to interpret objects. It kind of reminds me of an instrument, but it is creating every object as an instrument.  The algorithms that would go into this would probably have a prerequisite standard for curves and edges and how they would sound and depending on how extreme or normal those aspects are, the different the sound comes out. Along with this would come the range of pitch and volume. The artist’s creativeness came out through the interpretation of how the sound should be depending on the object and the different objects he decides to use or create for usage.

 

Of Nature and Things – The Shroom

 

 

Eunice Choe – Project-11 – Composition

sketch

/* Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-11*/


var r;
var g;
var b;
var turtle =[];

function setup() {
    createCanvas(400, 400);
    background(255, 206, 198);
    for (var t = 0; t < 5; t ++) {
        turtle[t] = makeTurtle(width / 2, height / 2); // sets initial position
        turtle[t].penDown;
    }
}

function draw() {
    for (var t = 0; t < turtle.length; t ++) {
        r = random(100, 255);
        g = random(10, 255);
        b = random(50, 255);
        turtle[t].setColor(color(r, g, b)); // random turtle colors
        turtle[t].setWeight(random(-0.5, 5)); // random weights
        turtle[t].penDown();
        turtle[t].forward(random(10, 70)); // random lengths
        turtle[t].right(-100, 50); // random directions
        turtle[t].penUp();
  }
  frameRate(5);
}

function mousePressed()  {
    var turtle = makeTurtle(mouseX, mouseY);
    turtle.penDown();
    turtle.setColor(255);
    for (var i = 0; i < 20; i++) { // makes random white stroke shapes
        turtle.forward(random(10, 20));
        turtle.right(200);
        turtle.forward(random(10, 20));
    }
    turtlePenUp();
}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

For my project, I wanted to create an abstract composition that shows a sense of randomness. I incorporated the randomness through randomized colors, strokes, and turtle directions. Someone interacting with this composition can also click the mouse and randomized white strokes will appear. Overall, I think the randomness makes the composition interesting.

The beginning of the composition.

The composition after some time passes and the added white strokes.