Category: Section A

monicah1-project-12-SectionA

 

 

I am interested in allowing people to question the reality.  What make one thinks the object is real or not. There are many existing things in our daily spaces that are invisible to our five senses: sight, hearing, touch, smell, taste. Sometimes one can so blinded by one’s thoughts and the reality that the society create. How can one be encouraged to see beyond the curated reality, focusing on seeing and feeling the true forms.

I am interested in creating a mix of 2D and 3D animation with particles and elements in space. Elements may be: strings, lines, dots, cubes, cylinders and such. Then, using these elements to create motions like: distortion, explosion, tension, and more. I want to connects the motions and flow of each scenes. Considering the sense of visual complexity can be delicate and intricate, how do I make complex elements in motion visually pleasing and soothing. Adding on the visual animation, I would want to add on sound affects.

monicah1-lookingoutward-12-SectionA

o.T., Astana Contemporary Art Center, Artists & Robots, 2017

 

 

Galerie Mitterrand, Paris, 2017

 

http://www.kogler.net/kunsthaus-bregenz-2000-projektion#

Peter Kogler, an Austrian artist, works on floors walls and ceilings with ling designs illusion for 30 years, bending spaces in unnatural ways. He manipulated box-shaped space to virtual maze of time and space. He creates undefined movement and sense of insecurity in spaces for people to experience in. He sees computer for artists as “liberated from many physical limitations of all former media”. He explores the new dimension in architecture.

I am interested in the idea of allowing people to question what is real and what is not. what is important and what is not. What values do we hold on. Human can be manipulated with visual easily, we only think what the normal spaces are like based on what we are used to. If we exposed to more of what diverse perspective spaces, will we be comfortable in those spaces one day?

‘Oscillate’ – Thesis Animation of Sine Waves by Daniel Sierra 2015

Sierra is a digital artists, designer, and creative coder who specializes in audio visualization, animation, and mixed reality experiences. In Oscillate, he was interested in the emergence of complexity in sound from fundamental sine and cosine waves, using tools like Houdini, Reason, Nuke, After Effects, and Processing.

In Oscillate, I am intrigued by how he presented the elements in we encounter daily to this delicate form. Moreover, he added on his own audio sound design to the original visualized sound elements. The splashes, strings, and lines create a great tension in between.

I liked how Peter Kogler and Daniel Sierra play with 2D and 3D with natural elements in space, giving the sense of mysteriousness and delicacy.

mmiller5-Project-12

For my Final Project, I’d like to create a multiplayer asymmetric cooperation visual novel-ish game.  Breaking that down, I want to make a 2-player game (where each player uses a different computer) that gives each player a different experience and requires them to work together to advance, presented mainly via text with some possible image interaction.

Requirements: 1- 2 player functionality;2- Different events for each player;3-  Text presentation;4- Player inputs

To accomplish the 2 player functionality, since I won’t be able to create some type of pipeline that actually allows each players’ game to interact with one another, the game will, at the start, ask the player to be either Player 1 or Player 2, with different events being displayed throughout the game depending on which player they chose.  The events of each player will then work as a sort of manual for solving the puzzles/tasks of the other player’s events, and vice versa.  To make sure each player is paced at about the same speed through the game, I could implement text that auto continues to compensate for different reading speeds, or I could implement “stop” screens that tell players to not continue until both players are ready.

For the text presentation, minimally, I could just have the text appear on screen and then change either after the player clicks or after a set amount of time.  What I would prefer to do, however, is have the text “write itself out” one letter at a time and accompany that with a little writing sound effect, but I don’t know how difficult that would be to implement.

For player inputs, I’m currently thinking of dialogue options, where multiple choices would be presented on screen and the player would need to choose the correct one or incur a penalty.  I’m thinking of also accompanying this with a visible timer-bar that shortens as time passes, giving the player limited time to communicate with their partner to find the right answer.  Depending on how this goes, I might implement more ways to interact with the system.


Example of what it might kinda look like

I know this might sound like a lot, and maybe it is, but I’m pretty confident that I can do this, or at least a proof-of-concept that’s a few minutes. (also sorry that this is more than 200 words; I’m also using this just to get my ideas written down)

mmiller5-Looking Outwards-12

This week, I’ll be looking at two games that focus on multiplayer asymmetric cooperation: We Were Here — released by Total Mayhem Games in 2017–, and Keep Talking and Nobody Explodes — released by Steel Crate Games in 2015.  The reason as to why I’m looking at these projects is because I want to make a multiplayer asymmetric cooperation game for my final project.  What these games have in common is that there are essentially two roles that different players take on before the game starts, and the role of one player is to help the other player complete tasks by providing them with information.

In We Were Here, each player is a character in different sections of an arctic castle, and one player travels from room to room encountering new puzzles that they need the help of the other player, who travels from room to room looking for clues, to solve.

Example of a clue one player needs to relay to the other

In Keep Talking and Nobody Explodes, one player is tasked with disarming a bomb while the other player is given a bomb-defusal manual that has the information needed to disarm it.

Example of a bomb with different modules that must be defused

In both projects, one player is generally in danger while the other gives information to save that player; however, I think there may be a missed opportunity where both players simultaneously fulfill both roles, one where they must solve tasks as well as one where they must provide info to their partner.

mjeong1-Project-11-Section A

sketch

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

var positionx = [];
var positiony = [];
function setup() {
  createCanvas(480,480);
  background(255,0,0,100);

}
function draw() {
  for (var x=0; x<positionx
  .length; x++){
    var turtle = makeTurtle(positionx[x], positiony[x]);
  turtle.setColor(random(100));
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.forward(random(60),100);
        turtle.right(141.5);
        turtle.forward(random(60));
      
      turtle.penUp();
      turtle.x = positionx[x];
      turtle.y = positiony[x];
    }
  }
}

function mousePressed(){ 
  positionx.push(mouseX);
  positiony.push(mouseY);
}

For this assignment I wanted to create interactive art work using turtle graphics. For each mouse click, new geometry will appear with glittery effect created by random command.

mjeong1-Looking Outwards-11-Section A

“Bicycle for Two” by Max Mathews(1962)

Max Mathew is one of the early pioneers of Computer Music. He studied electrical engineering at California Institute of Technology and MIT. He developed Graphic 1, an interactive graphic sound system on which one could draw figure with light pen which can be converted into sound. This simplified the process of composing computer generated music. He also developed GROOVE, a first fully developed music synthesis system for interactive composition and realtime performance using 3C/Honeywell minicomputers. Through his inventions, he showed his admiration to live performance and his interest in what a computer can do to aid a performer. He made a controller, the Radio-Baton, to provide new ways for interpreting and performing traditional scores.

“Daisy Bell” is the most famous music composed by Mathews. In 1961,  He arranged accompaniment of the song by computer synthesized human voice through technology developed by John Kelly. My favorite music composed by Max is “Bicycle for two” because it has simple melody and rhythm that I enjoyed and I admire how Max use computer software to generate music based on compositional algorithm.

 

link to max mathews

 

HaeWanPark-LookingOutwards-11

Iamus by Iamus

Iamus is a computer in the University of Málaga that composes contemporary classical music without any human help. Its first studio album ‘Iamus’ was released in 2012. This album was composed by only a computer and recorded and played by London Symphony Orchestra. This album is composed utilizing ‘melodics’ which is a computational system based on bioinspired algorithm generating musical composition without human input. Also, Iamus evolves composition in itself.

I was surprised that this computer composes full pieces of complex classical music not just a piece of some melodies. Because it is so good at composing music without human input, people can easily think that computer would replace human musicians in the future. But, it also might be a really nice tool for human musicians to develop a new musical invention.


Iamus

haewanp – Project 11 – Playing with your Turtle

Merry Christmas

var myTurtle;
var num;
var length = 20;

function setup() {
    createCanvas(480, 480);
    background(5, 60, 50);
    myTurtle = makeTurtle(width/2, height/2);
    flower(40);
}

function flower(angle) { //draw red flower
    for (j = 0; j <= 360/angle; j++) {
        myTurtle.penDown();
        myTurtle.x = width/2;
        myTurtle.y = height/2 - 20;
        myTurtle.setColor((color(255, 0, 0)));
        myTurtle.setWeight(6);
        drawhex(85);
        myTurtle.back(30);
        myTurtle.right(angle);
        myTurtle.penUp();
    }
}

function drawhex(length) { //draw hexagon which is a part of flower
    for (i = 0; i < 6; i++) {
        myTurtle.forward(length);
        myTurtle.right(60);
    }
}

function draw() {
    //snow flakes
    myTurtle.penDown();
    myTurtle.setWeight(1);
    myTurtle.setColor(color(255));
    drawhex(mouseX/70);
    myTurtle.x = random(0, width);
    myTurtle.y = random(0, height);
    myTurtle.penUp();
    
}

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: 45, 
                  penIsDown: true,
                  color: color(255, 0, 0),
                  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;
}

function mousePressed() {
    //it stops snowflakes
    noLoop();
    //draw ellipse
    fill(255);
    stroke(255);
    ellipse(width/2, height/2 - 20, 110, 110);
    //redraw red flower
    myTurtle.x = width/2;
    myTurtle.y = height/2;
    flower(40);
    stroke(5, 60, 50);
    //text
    textAlign(CENTER);
    textSize(28);
    strokeWeight(5);
    textFont('Trebuchet MS');
    text('M E R R Y  C H R I S T M A S', width/2, height - 40);
    
}

I made it because Christmas is coming! I created snowflakes and Christmas flower with multiple hexagons.

monicah1-lookingoutward-11-SectionA

While Sleeping by Ikue Mori 2013

Ikue Morie is a japanese artiest who moved from Tokyo to New York in 1977.  She started playing with drum, then formed a band creating radical rhythms and dissonant sounds. Then she started to used drum machine to improvise music.

I was intrigued by her perceive in music. This piece, While Sleeping, made me thought about what do I hear when I’m asleep or when I’m peace and calm states. How does she relate sounds while sleeping to the sounds she created. It is interesting that she used many mediums, some natural and some made up to create the subtle  music in While Sleeping .

monicah1-project-11-SectionA

sketch

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

This piece I was playing with the tension of pattern and the randomness when interfere with the continuous flow of pattern.

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

 

SaveSave