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.

LookingOutwards-12

For my project, I want to integrate music or beat making into it. I have several apps for beat and music making that I really like. As precedents for my final project, I did research for two of them.
The first one is Incredibox  . It is a music app and website that the player can create different songs or beats by adding or removing people from a band. Each person represents an instrument or sound effect, including percussion, voices, guitar, piano, etc. By managing this band the player can create very cool mixtures. It really attracts me because it allows the players to create an A cappella from instruments and sound effects, creating amazing and unexpected mixture of layers of sounds.

 

The other precedent I really like is a beat making app called iMASCHINE 2. It is  a hardware/software digital audio workstation developed by Native Instruments. Users assign drum kits, instruments and sounds from the included library, to each of the controller’s 16 pads, and can manipulate sounds further by applying effects and plugins. The software also includes tools to capture and manipulate audio samples in real time.

https://www.native-instruments.com/en/products/maschine/maschine-for-ios/imaschine-2/

 

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.

Yiran Xuan – Looking Outwards – 11

I am a fan of a wide variety of music, including American folk music and Chinese folk music. In the middle of switching between Sanxian (Chinese traditional 3-string banjo) playlists to bluegrass playlists, I suddenly noticed that there was a great many similarities between the two genres. Both featured fast, colorful strings that operated in the major scales, often pentatonic scales, giving them energetic but grounded feelings. The topic of the songs are also similar, describing longings of home, the beauty of rural environments, and amusing interpersonal relationships. What this meant to me was despite the genres being folk, there was room for new growth and cross-cultural synthesis, and that the two cultures I have grown up were strangely bridged.

I searched for any realized union of the two genres, and I was happily surprised to find Redgrass:
The Chinese musical group featured frequently experiments with combining traditional Chinese instrumentation with the music from other cultures, including American jazz, Malaysian percussion, and experimental electronic music.

Website

(Completed with 2-day extension)

Yiran Xuan – Project 11 – Composition

This sketch is based off of my favorite drawing tool in FireAlpaca, the Mirror Brush. It initializes two different turtles that move to the mouse’s position when the mouse is clicked. Buttons on the keyboard can affect the pen’s path; pressing ‘p’ will toggle the penUp and penDown, ‘w’ and ‘t’ will widen and thin the pen tracks respectively, while ‘r’, ‘b’, ‘g’, ‘l’ change the color of the tracks.

(Completed with 2-day extension)

sketch

/*
Yiran Xuan
Section A
yxuan@andrew.cmu.edu
Project 11
*/

//Goal: Create mirroring paint tool that uses the turtle graphics

var brushturtle; //turtle that corresponds to mouse movements
var mirrorturtle; //turtle that mirrors brushturtle

var targetx = 0; //x coord of where brush turtle should go
var targety = 0; //y coord of both turtles
var mirrorx = -targetx; 

var brushweight = 5;

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

    translate(240, 0);

    brushturtle = makeTurtle(0, 0); //initialize turtles
    mirrorturtle = makeTurtle(0,0);

    brushturtle.setColor('black');
    
    mirrorturtle.setColor('black');
    mirrorturtle.setWeight(brushweight);

}

function draw(){
	translate(240, 0); //needs to be constantly retranslated so that 0 line is down the middle of canvas

	brushturtle.setWeight(brushweight);
	mirrorturtle.setWeight(brushweight);

	brushturtle.goto(targetx, targety); //transport brush
	mirrorturtle.goto(mirrorx, targety); //transport mirror
}

function mouseClicked() {
	targetx = mouseX - 240; //mouse coords ignores translate, so needs compensation
	targety = mouseY;
	mirrorx = -targetx;
}



function keyPressed(){
	if(key == 'p'){ //pressing 'p' switches between pen position 
		penUporDown();
	}

	if(key == 'w'){
		penWider();
	}

	if(key == 't'){
		penThinner();
	}

	if(key == 'r'){ //changing pen colors
		brushturtle.setColor('red');
		mirrorturtle.setColor('red');
	}

	if(key == 'g'){
		brushturtle.setColor('green');
		mirrorturtle.setColor('green');
	}

	if(key == 'b'){
		brushturtle.setColor('blue');
		mirrorturtle.setColor('blue');
	}

	if(key == 'l'){
		brushturtle.setColor('black');
		mirrorturtle.setColor('black');
	}

}

function penUporDown(){ //lifts or puts down pen
	if(brushturtle.penIsDown){
			brushturtle.penUp();
			mirrorturtle.penUp();
		}
	else if(brushturtle.penIsDown == false){
		brushturtle.penDown();
		mirrorturtle.penDown();
		}
}

function penWider(){ //widens penstroke
	brushweight+= 0.5;
}

function penThinner(){ //thins penstroke
	if(brushweight > 1){
		brushweight -= 0.5;
	}
}

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;
}

 

Robert Oh- Project 11- Composition

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-11-Composition

var turtle;
var fx = 240;
var fy = 240;
var diffX = 100;
var diffY = 100;

function setup() {
    createCanvas(480, 480);
    frameRate(30);
    noStroke();
}
 
function draw() {
    background(130, 255, 246);
    fishDisplay(fx, fy);

    diffX = mouseX - fx;
    diffY = mouseY - fy;

    if (diffX > 1 || diffX < -1){
        fx = fx + (diffX)/30;
    }
    
    if (diffY > 1 || diffY < -1){
        fy = fy + (diffY)/30
    }
}

// drawing each fish
function fishDisplay(x, y) {
    turtle = makeTurtle(x, y);
    turtle.penDown();
    turtle.face(270);
    turtle.setColor(100);
    turtle.setWeight(3);

    //body
    for (var i = 0; i < 360; i ++){
    turtle.forward(.7);
    turtle.right(1);
    }

    turtle.face(0);
    turtle.penUp();
    turtle.forward(80);

    //tail
    turtle.penDown();
    turtle.face(30);
    turtle.forward(40);
    turtle.face(270);
    turtle.forward(40);
    turtle.face(150);
    turtle.forward(40);

    turtle.penUp()
    turtle.face(180);
    turtle.forward(60);
    turtle.face(270);
    turtle.forward(25);

    //eye
    turtle.penDown();
    turtle.face(0);
    for (var i = 0; i < 180; i ++){
        turtle.forward(.2);
        turtle.right(2);
    }
}

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 went back to data exam 1 once again and borrowed the fish design we had drawn. I wanted to revisit the data exam and had the fish follow the mouse cursor. Overall, I had a lot of fun recreating the fish (but with turtle-style drawing).

 

Yingyang Zhou-LookingOutwards-11

For week 4 looking outwards, I wrote about Ryoji Ikeda, I really appreciate his work with full of beauty of math. His work is more “sound art” than music, becuase there are a lot of visual element invovled and it needs you to “interpretate” it instead of only “listen” to it. I want to talk about another piece of his work I really like, “datamatics [prototype-ver.2.0]”.

Using pure data as a source for sound and visuals, datamatics combines abstract and mimetic presentations of matter, time and space. datamatics is the second audiovisual concert in the datamatics series. Projecting dynamic computer-generated imagery in pared down black and white with striking colour accents, the intense yet minimal graphic renderings of data progress through multiple dimensions. From 2D sequences of patterns derived from hard drive errors and studies of software code, the imagery transforms into dramatic rotating views of the universe in 3D, whilst in the final scenes four-dimensional mathematical processing opens up spectacular and seemingly infinite vistas. A powerful and hypnotic soundtrack reflects the imagery through a meticulous layering of sonic components to produce immense and apparently boundless acoustic spaces.

datamatics [ver 2.0] is the full–length version of this audiovisual concert. With a commissioned second part added, datamatics [ver.2.0] is significantly developed from the earlier version of this piece which premiered in March 2006. Driven by the primary principles of datamatics, but objectively deconstructing its original elements – sound, visuals and even source codes – this work creates a kind of meta–datamatics. Real–time program computations and data scanning are employed to create an extended new sequence that is a further abstraction of the original work. The technical dynamics of the piece, such as its extremely fast frame rates and variable bit depths, continue to challenge and explore the thresholds of our perceptions.

Victoria Reiter – Project 11 – Composition

sketch

/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Assignment-10-b
*/

// makes turtle
var turtle;
// angle for the pretty plant design thing!
var chooseAngle = 200;

//makes plus shape
function plus() {
        turtle.penDown();
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
        turtle.left(90);
        turtle.forward(5);
        turtle.right(90);
        turtle.forward(5);
}

function setup() {
    createCanvas(600, 400);
    background(80, 0, 255);
    // makes turtle at center of canvas
    turtle = makeTurtle(width / 2, height / 2);
    turtle.setColor(color(202, 255, 112, 80));
    turtle.setWeight(.25);
    turtle.penUp();    
}

function draw() {
    plus(20, 30);
    for (var i = 0; i < 100; i++) {
        var distt = mouseX / 7;
        turtle.penUp();
        turtle.forward(distt);
        plus();
        turtle.penUp();
        // returns turtle to center so it progressively moves greater distances
        turtle.back(distt);
        // rotates by golden angle
        turtle.left(chooseAngle);
    }

}


// --------------------------------
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;}

///GRACE DAY TAKEN///

For this week’s project I took inspiration from the “golden angle” and natural angles of plants and things in nature from last week. I wanted to know what it would be like if I manipulated it to work through an angle of my choosing, and other aspects of my choosing, such as a plus shape instead of hexagons. I made the stroke weight very fine and the opacity more sheer to add added effects. I also introduced animation by incorporating variation with mouseX.

I think this design is interesting because as you move the mouse, it looks as though there is a flower itself in the middle rotating around and around, but really it’s just the shapes building on themselves. How interesting!

((This is unrelated but I went to the Children’s Museum today and saw the Letter Rain mentioned in the Deliverables for the week and that wE. cOdED. so I thought that was cool! Here’s a quick picture just for fun hehehe))

Me at the Children’s Museum with the raining text about bodies!