With my proposed collaborator, Rachel Lee from Section E, we decided to create an interactive game. There will be a spaceship trying to collect cheerios to go an adventure in the cereal world. The objective of the game is to collect the cereal floating around outer space to fuel the spaceship; the more cereals one collects, more points the person gets. In the beginning of the game, there will be a start button and an instruction explaining the point of the game (“Go save the cereal world by collecting the cereal rocks! Press ‘start’ to start the game”). Possibly, there will be “dangerous” cereals that float around, and if the spaceship touches them, it may cause the game to be over. There will be a one minute timer on the upper right corner of the page to time the game. In the background, there will be cereal boxes to show that the spaceship is in a cereal world setting.

For our project (collaborating with my partner), we are planning to make an interactive digital story for young children.Therefore, I looked into educational related digital projects. One project that I looked over is “Puppet Parade, made by design I/O. It is an interactive installation allowing children to use their body to move large puppets that are projected on the wall. Another project is “The Uber Game- Financial Times”, which is an online game made by the Financial Times. It is a form of journal that is also a game built from interviews. I admired “Puppet Parade” because i love the idea of children’s’ telling their own story depending on what kind of movement they do. “The Uber Game- Financial Times” is also admirable because it was made in a fun way to tell a story (interviews/ journal) through interaction game. They are created in two different ways, but they are very similar because they only tell a “story” through interaction; they’re not just in a form of writing or reading. I would love to do a project similar to these to make reading or delivering a message in more communicative way.

URLs:
https://superduperstudio.co/wassiliscope/

christopher yamane turns light into sound with wassiliscope

jeeyoonk-11

var turtle
var a = 5;

function setup(){
    createCanvas(400,400);
    background(94,69,255);
    frameRate(10);
    turtle = makeTurtle(random(0,width), random(0,height));
    //create geometric shape
}

function draw(){
    //circular geometric shape 
    for (var i = 0; i < 50; i++){
        turtle.setColor(color(243, 231, 177));
        turtle.penDown();
        turtle.setWeight(.2);
        turtle.right(20); //turns 100 degrees every times it loops
        turtle.forward(a);

}
    turtle.left(20);
    a += 0.1; //the length increases
    turtle.penUp();

    if (mouseIsPressed){ //BIRD creating a NEST
    fill(240, 77, 37) //BODY
    ellipse(mouseX + 30, mouseY + 10, 50, 30);
    fill(254, 225, 115); //beak
    triangle(mouseX, mouseY, mouseX-5, mouseY-5, mouseX-20, mouseY+20);
    fill(240, 77, 37) //HEAD
    ellipse(mouseX, mouseY, 20, 20);
    fill(146, 211, 203) //eye
    ellipse(mouseX - 1, mouseY, 5, 5);
    }

}


function mousePressed(){
    turtle = makeTurtle(mouseX, mouseY);
}


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 used turtle to create a nest for each bird. Every time you click on the screen, a nest and a bird will appear. The nest’s size will eventually keep increasing to create a chaos. It was really enjoyable to experimenting with different angles and sizes.

Below are the screenshots of the results:

Of all the innovative women producing interesting works in the field of computational design and new media arts, Tina Frank’s works interested me the most. She is a graphic designer and a media artist who does most of the projects based on web design, cover design, music visualizations, and many more. Tria, and her background is in web design and cover design for electronic music in the 1990s. She is also a founder and a creative director for design office, and she is a heavily influential being because she creates amazing works to visualize music through using generative tools. She is currently a professor for graphic designer in AusOne of the most interesting project she did in the past is called the “A/V performance COH & Frank”. It is a musical performance by two designers who would program to create music and images live. The images were produced during the performance by utilizing the audio frequencies of the music and these went through Synchronator. After it has been put into Synchronator, it tells the computer to play a digital video that can be projected on to the wall. I admire this project because unlike any other musical performances which involve voice or instruments, this project is a performance by designers’ manipulation of the programs, music, and images.

jeeyoonk10

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 10
*/

var hillSpeed = 0.00055;
var hillDetail = 0.0055;
var yN = 50;
var trees = [];

var x = [];
var y = [];

function setup() {
   createCanvas(500, 400);

    for (i = 0; i < 100; i++){ //setting for stars placement
        x[i] = random(50, width);
        y[i] = random(50, width / 2);
    }
    //trees
    for (var j = 0; j < 15; j++){
        var rx = random(width);
        trees[j] = makeTree(rx);
    }
    frameRate(10);
}


function draw(){
    background(24, 44, 63);
    var S = second();
     for(i = 0; i < S; i++){ //tiny firefly appears every "SEC"
        fill(255);
        noStroke();
        ellipse(x[i], y[i], 3, 3);
    }
    hill();
    wave();
    updateAndDisplayTrees();
    noStroke();
    ellipse(width-55, 40, 45, 45); //pink moon
}

function star() {
    for(i = 0; i < S; i++){ //star appears every "SEC"
        fill(247, 246, 146);
        noStroke();
        ellipse(x[i], y[i], 4, 4);
    }
}
//drawing hill
function hill() {
    stroke(49, 110, 167);
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * hillDetail) + (millis() * hillSpeed);
        var y = map(noise(t), 0,1, 30, height-35);
        //vertex(x, y); 
        line(x, y, x, height);
    }
    noStroke(); //ground
    fill(136, 143, 208);
    rect(0, 380, width, 20)
    endShape();
} 

function wave(){ //drawing waves
    beginShape();
    fill(221, 153, 205);
    var xN = yN;
    for (var x = 0; x <= width; x += 10){
        var y = map(noise(xN, yN), 0, 1, 200, 400);
        //setting the vertex
        vertex(x, y - 0.005); //x dimension
        xN += 0.05;
    }
    yN += 0.055; //y dimension
    vertex(width, height - 20);
    vertex(0, height - 20);
    endShape();

}

// DISPLAYING TREES
function updateAndDisplayTrees(){
    for (var j = 0; j < trees.length; j++){
        trees[j].move();
        trees[j].display();
    }
}

// Trees are removed when hitting the edge
function RTrees(){
    var TreesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            keepTrees.push(trees[i]);
        }
    }
    trees = TreesToKeep;
}

// adding tree to the end
function addrandomTreeswithProbability() {
    var newTreesLikelihood = 0.05;
    if (random(0,4) < newTreesLikelihood) {
        trees.push(makeTree(width));
    }
}

// update position of tree every frame
function treeMove() {
    this.x += this.speed;
}

// drawing the trees
function treeDisplay() {
    var floorHeight = 5;
    var bHeight = this.nFloors * floorHeight * 2;
    noStroke();
    //drawing tree trunks
    push();
    translate(this.x, height - 20);
    fill(24, 44, 63);
    rect(3, -bHeight, this.breadth, bHeight);
    // drawing top part of the tree
    fill(105, 247, 193);
    ellipse(3, -bHeight, bHeight / 2, bHeight / 2);
    pop();
}


function makeTree(birthLocationX) {
    var TRR = {x: birthLocationX,
             breadth: 1,
             speed: -0.5,
             nFloors: round(random(2,4)),
             move: treeMove,
             display: treeDisplay}
    return TRR;
}

For this project, I had fun making this animation, but at the same time, it was very difficult to figure out how to place the trees and try different variations for the mountains. I tried to make this very aesthetic and attractive by thinking a lot about good color combination. I added stars so that they appear every second. The final result is close to what I wanted, and I want to develop it further in the future.

jeeyoonk09

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 9: Portrait
*/

//GLOBAL variable for the IMAGE
var jen;

// preloading image ON THE CANVAS
function preload() {
    jen = loadImage("https://i.imgur.com/gvGuJiN.jpg?1"); 
}

function setup(){
	//canvas setting
	createCanvas(600, 400);
	background(255);
	jen.loadPixels(); //draw image
	noStroke();
	imageMode(CENTER);
	frameRate(150);
} 
function draw(){
	// starting from the first half of the page and then the left
	var jx = random(width);
	var jy = random(height);
	//constraining to canvas
	var jjx = constrain(floor(jx), 0, width - 15);
	var jjy = constrain(floor(jy), 0, height - 15);
	//picking color from the image
	var C = jen.get(jjx, jjy);

	//drawing rectangular pixels
	noStroke();
	fill(C);
	rectMode(CENTER);
	rect(jx, jy, random(5, 10), random(5, 10));

	//when mouse is pressed, pink circles are created
	if (mouseIsPressed){
		noStroke();
		fill("pink");
		ellipse(jx, jy, 5, 5);

	}
}

For this project, I used a portrait of my friend Jenny. I randomized simple rectangular forms to complete Jenny’s portrait. Looking at others’ portraits and trying different codes for my project, I was amazed by how many variations you can use to create a
pixelated portrait. When you click on the screen, pink circles come up because I personally like the pink sky in the back and I wanted the pink color to show up on other parts of the portrait too. It’s fun to look at the pink circles disappear as more rectangular shapes show up.

Peer Review Here!

This week’s Looking Outwards post is a review of Howard’s Looking Outwards post from Week 3. I came across this Looking Outwards because I was so familiar with the architectural installation picture; I have seen it in real life. EPIPTHYTE lab, created by Cupkova and Craig, is an installation piece rests in Senyai restaurant. The cited project amazes me because although it looks like a simple, patterned installation, there is so much meaning and thought into it. The project is combined of 275 different slats pieced together perfectly to control the lighting and the acoustic levels of the restaurant as a whole. The software created the form of each piece and it was finally produced with laser cutter. I agree with the part about vault rising and falling perfectly to demonstrate the sensitivity of the wave like form. As a design student who had visited Senyai before, I want to add that this installation brings the audience a whole new experience; the installation immerses the audience into the space because of its meticulous form and pure white color.

Link to Original Work

Alexander Chen is a creative director at Google Creative Lab. He did various works including MTA.ME, which altered the NYC subway map to a string instrument, and invented “Les Paul Doodle” with his Google Team. He worked with different companies such as The Barbarian Group, Modernista, and Google, where he currently works in. As a both musician and a creative interaction designer, he does body of work that combine both music and coding. He says that seeing his children discover different instruments and playing around with melody inspires him to create coding that lets him see music in inspiring, new ways. One of his project called the “Pianophase” is a visualization that demonstrates Steve Reich’s 1967 piece Piano Phase into lines with different colors and patterns. He made two pianists repeat the the same note in different speed; one musical pattern draws faster than the other one. I really admire his work because as of lover of both coding and music, he figured out a way to make a harmony between the two. Also, the way he tries to show invisible thing, music, into a visual form is a very fresh idea. He presented most of his work and their descriptions in his main portfolio website. His website is generally very easy to interact because of the simplicity and the visuals that are easily accessible. I learned that simplicity in presenting works can help the audience understand the projects much better.

Link to his website: http://chenalexander.com/