순수한 젠투펭귄님의 이글루입니다

HannahYUUN.egloos.com


포토로그


interactive video week 16



DOWNLOAD MY CODE HERE :


A Perfect Circle is an interactive story telling. 
To proceed to the next stage, players need to make a perfect circle in a certain way and leave only one circle.
For example, in the intro, the circle must be drawn by moving mouse, and in another stage, players need to destroy other circles.

The basic story line of A Perfect Circle is about my concept about relationship.
As I wrote in the story line, we are living between loads of different relationships and the relationships come together to form the universe.
We always struggle to establish relationships properly and as we always say 'the outcome depends on the cost'. However, things never goes as we intended. the result can be changed by unexpected factors. That's why I thought there should be something to twist in this story telling.
So I make the result can be changed by something which is invisible and impossible to feel. In this case, it is sound, players make during this storytelling.

interactive video week 14

I added sound code and results that changes texts based on the sound code
Till next week, I'm going to add last details like moving and text align

CODE:

1.

int stage=1;
void setup()
{
  fullScreen();
  sound();
  if(stage == 4)
    ss4();
}

void draw()
{
  background(0);
  soundraw();
  if (stage == 1)
    ds1();
  else if (stage == 2)
    ds2();
  else if (stage == 3)
    ds3();
  else if (stage == 4)
    ds4();
  else if (stage == 5)
    ds5();
  else if (stage == 6)
    dr();
}

void mousePressed()
{
  if (stage == 1)
    ms1();
  else if (stage == 2)
    ms2();
  else if (stage == 3)
    ms3();
  else if (stage == 4)
    ms4();
  else if (stage == 5)
    ms5();
  else if (stage == 6)
    ds();
}
  


2.

void dr()
{
  if(amp.analyze()<0.01)
    text ("Quiet", width/2, height/2);
  if(amp.analyze()<0.5)
    text ("Simple", width/2, height/2);
  if(amp.analyze()<0.8)
    text ("Loud", width/2, height/2);
  if(amp.analyze()<1.0)
    text ("Too Loude", width/2, height/2);
}

void ds()
{
  
}

3.

import processing.sound.*;
Amplitude amp;
AudioIn in;
float maxSound = 0;

void sound()
{
  amp = new Amplitude(this);
  in = new AudioIn(this, 0);
  in.start();
  amp.input(in);
}

void soundraw()
{
  if (maxSound < amp.analyze())
  {
    maxSound = amp.analyze();
  }
  println(amp.analyze());
}

4.

int i=0;
void ds1()
{
  textSize (50);
    text ("A Perfect Circle", width/2-100, height/2+10);
    pushMatrix();
    translate(width/2, height/2);

    stroke(255);
    noFill();
    beginShape();
    float angle = mouseX/4;
    for (i=0; i< angle; i+= 1) 
    {
      vertex(cos(radians(i))*400, sin(radians(i))*400);
    }
    endShape();

    ellipse(cos(radians(angle))*400, sin(radians(angle))*400, 10, 10);
    popMatrix();
}

void ms1()
{
  if (i > 360 && mouseButton == LEFT)
    stage = 2;
}

5.

int c=0;
void ds2()
{
  circle (170, 140, 450);
  circle (100, 400, 350);
  circle (240, 550, 130);
  circle (100, 680, 40);
  circle (300, 310, 170);
  circle (390, 440, 20);
  circle (490, 20, 300);
  circle (510, 230, 50);
  circle (530, 250, 20);
  circle (570, 330, 15);
  circle (700, 80, 10);
  
  circle (150, height, 400);
  circle (400, height, 450);
  circle (450, height-200, 150);
  circle (400, height-100, 50);
  circle (450, height-300, 15);
  
  circle (width/2+300, height-200, 280);
  circle (width/2+430, height-260, 100);
  circle (width/2+550, height-220, 30);
  circle (width, height-260, 200);
  circle (width-200, height+200, 600);
  circle (width-100, height-100, 100);
  
  circle (width/2+350, 100 , 200);
  circle (width-200, 0, 300);
  circle (width-170, 150, 150);
  circle (width, 0, 150);

  textSize (60);
   switch (c)
    {
    case 1:
      text ("Hi! Thanks to come to this world!", 10, height/2);
      break;

    case 2:
      text ("I've waited for you", 10, height/2);
      break;

    case 3:
      text ("You need to make a perfect circle", 10, height/2);
      break;

    case 4:
      text ("not only for us, but for you too.", 10, height/2);
      break;

    case 5:
      text ("because you are living in the circle as well.", 10, height/2);
      break;

    case 6:
      text ("Let's start.", 10, height/2);
      break;
    }
    println(c);
}

void ms2()
{
  c++;
  
  if (c == 8)
  stage=3;
}

6.

int x=100;
int y=100;
int x2=800;
int y2=1000;
int sz=300;
void ds3()
{
  circle (x, y, sz);
  circle (x2, y2, sz);
  if (dist(x, y, mouseX, mouseY)<sz/2)
    if (mousePressed)
    {
      x=mouseX;
      y=mouseY;
    }
  if(dist(x2, y2, mouseX, mouseY)<sz/2)
    if(mousePressed)
    {
      x2=mouseX;
      y2=mouseY;
    }
  if(dist(x, y, x2, y2)<100)
  {
    sz=500;
    circle (x, y, sz);
    circle (x2, y2, sz);
    text("CLEAR", width/2-100, height/2+10);
  }
  if (sz==500 && mousePressed)
  for (int i=0; i < width; i++)
    {
      float r = random(0, 255);
      stroke(r);
      line(i, 0, i, height);
      text ("You are now in the circle", width/2, height/2+10);
    }
    
}

void ms3()
{
  if (sz==500 && mouseX>847 && mouseX<941 && mouseY>499 && mouseY<555 && mousePressed)
  stage=4;
}

7.

float stx = 1500;
float sty = 800;
float stx2 = 960;
float sty2 = 800;
float stx3 = 960;
float sty3 = 660;
float i1;
float i2;
float i3;

void ss4()
{
  i = 0;
  i2= 0;
  i3= 0;
  frameRate(50);
}

void ds4()
{
  stroke (205, 102, 0);
  beginShape();
  vertex(stx, sty);
  bezierVertex(1110, 622.5, 1043, 690, stx2, sty2);
  bezierVertex(877, 690, 810, 622.5, stx3, sty3);
  bezierVertex(810, 457, 877, 390, 960, 390);
  bezierVertex(1043, 390, 1110, 457, 1110, 540);
  endShape();
  
  if (dist(stx, sty, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx=mouseX;
      sty=mouseY;
      if(dist(1110, 540, mouseX, mouseY)<10)
      {
        stx=1110;
        sty=540;
      }
    } 
  }
  if (dist(stx2, sty2, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx2=mouseX;
      sty2=mouseY;
      if(dist(960, 690, mouseX, mouseY)<10)
      {
        stx2=960;
        sty2=690;
      }
    }
  }
  if (dist(stx3, sty3, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx3=mouseX;
      sty3=mouseY;
      if(dist(810, 540, mouseX, mouseY)<10)
      {
        stx3=810;
        sty3=540;
      }
    }
  }

  if(stx==1110 && sty==540 && stx2==960 && sty2==690 && stx3==810 && sty3==540)
  {   
    i1=i1+1;
    i2=i2+0.5;
    i3=i3+2;
    circle (width/2, height/2, i1);
    circle (width/2, height/2, i2);
    circle (width/2, height/2, i3);
    if(i1==300)
      i1=0;
    if(i2==300)
      i2=0;
    if(i3==300)
      i3=0;
   text("CLEAR", width/2-90, height/2+20);
  }
}

void ms4()
{
  if (stx==1110 && sty==540 && stx2==960 && sty2==690 && stx3==810 && sty3==540 && mouseX>866 && mouseX<1057 && mouseY>513 && mouseY<562 && mousePressed)
  stage=5;
}

8.

void ds5()
{
  stroke(205, 102, 0);
  line(0, height/2, width, height/2);
  noStroke();
  fill(255, 204);
  int d = mouseY/2+0;
  ellipse(mouseX, height/2, d, d);
  fill(255, 204);
  int iX= width-mouseX;
  int iY= height-mouseY;
  int iD=(iY/2)+10;
  ellipse(iX, height/2, iD, iD);
  
  println(mouseX);
  println(mouseY);
  
  if (mouseX>958 && mouseX<962 && mouseY>548 && mouseY<552)
  {
    fill(255);
    textSize(60);
    text("CLEAR", width/2-90, height/2+20);   
  }
}

void ms5()
{
  if (mouseX>958 && mouseX<962 && mouseY>548 && mouseY<552 && mousePressed)
  stage=6;
}




interactive video week13

I re-ordered my code and added 2 stages. I'm going to add about 2 more stages and sound code. and If I have more time, I'm going to make circles move!

CODE :

(First Sheet)

int stage=1;
void setup()
{
  fullScreen();
  if(stage == 4)
    ss4();
}

void draw()
{
  background(0);
  if (stage == 1)
    ds1();
  else if (stage == 2)
    ds2();
  else if (stage == 3)
    ds3();
  else if (stage == 4)
    ds4();
  else if (stage == 5)
    ds5();
}

void mousePressed()
{
  if (stage == 1)
    ms1();
  else if (stage == 2)
    ms2();
  else if (stage == 3)
    ms3();
  else if (stage == 4)
    ms4();
  else if (stage == 5)
    ms5();
}
  

(Second Sheet)
int i=0;
void ds1()
{
  textSize (50);
    text ("A Perfect Circle", width/2-100, height/2+10);
    pushMatrix();
    translate(width/2, height/2);

    stroke(255);
    noFill();
    beginShape();
    float angle = mouseX/4;
    for (i=0; i< angle; i+= 1) 
    {
      vertex(cos(radians(i))*400, sin(radians(i))*400);
    }
    endShape();

    ellipse(cos(radians(angle))*400, sin(radians(angle))*400, 10, 10);
    popMatrix();
}

void ms1()
{
  if (i > 360 && mouseButton == LEFT)
    stage = 2;
}

(Third Sheet)
int c=0;
void ds2()
{
  circle (170, 140, 450);
  circle (100, 400, 350);
  circle (240, 550, 130);
  circle (100, 680, 40);
  circle (300, 310, 170);
  circle (390, 440, 20);
  circle (490, 20, 300);
  circle (510, 230, 50);
  circle (530, 250, 20);
  circle (570, 330, 15);
  circle (700, 80, 10);
  
  circle (150, height, 400);
  circle (400, height, 450);
  circle (450, height-200, 150);
  circle (400, height-100, 50);
  circle (450, height-300, 15);
  
  circle (width/2+300, height-200, 280);
  circle (width/2+430, height-260, 100);
  circle (width/2+550, height-220, 30);
  circle (width, height-260, 200);
  circle (width-200, height+200, 600);
  circle (width-100, height-100, 100);
  
  circle (width/2+350, 100 , 200);
  circle (width-200, 0, 300);
  circle (width-170, 150, 150);
  circle (width, 0, 150);

  textSize (60);
   switch (c)
    {
    case 1:
      text ("Hi! Thanks to come to this world!", 10, height/2);
      break;

    case 2:
      text ("I've waited for you", 10, height/2);
      break;

    case 3:
      text ("You need to make a perfect circle", 10, height/2);
      break;

    case 4:
      text ("not only for us, but for you too.", 10, height/2);
      break;

    case 5:
      text ("because you are living in the circle as well.", 10, height/2);
      break;

    case 6:
      text ("Let's start.", 10, height/2);
      break;
    }
    println(c);
}

void ms2()
{
  c++;
  
  if (c == 8)
  stage=3;
}

(Forth Sheet)
int x=100;
int y=100;
int x2=800;
int y2=1000;
int sz=300;
void ds3()
{
  circle (x, y, sz);
  circle (x2, y2, sz);
  if (dist(x, y, mouseX, mouseY)<sz/2)
    if (mousePressed)
    {
      x=mouseX;
      y=mouseY;
    }
  if(dist(x2, y2, mouseX, mouseY)<sz/2)
    if(mousePressed)
    {
      x2=mouseX;
      y2=mouseY;
    }
  if(dist(x, y, x2, y2)<100)
  {
    sz=500;
    circle (x, y, sz);
    circle (x2, y2, sz);
    text("CLEAR", width/2-100, height/2+10);
  }
  if (sz==500 && mousePressed)
  for (int i=0; i < width; i++)
    {
      float r = random(0, 255);
      stroke(r);
      line(i, 0, i, height);
      text ("You are now in the circle", width/2, height/2+10);
    }
    
}

void ms3()
{
  if (sz==500 && mouseX>847 && mouseX<941 && mouseY>499 && mouseY<555 && mousePressed)
  stage=4;
}

(Fifth sheet)
float stx = 1500;
float sty = 800;
float stx2 = 960;
float sty2 = 800;
float stx3 = 960;
float sty3 = 660;
float i1;
float i2;
float i3;

void ss4()
{
  i = 0;
  i2= 0;
  i3= 0;
  frameRate(50);
}

void ds4()
{
  stroke (205, 102, 0);
  beginShape();
  vertex(stx, sty);
  bezierVertex(1110, 622.5, 1043, 690, stx2, sty2);
  bezierVertex(877, 690, 810, 622.5, stx3, sty3);
  bezierVertex(810, 457, 877, 390, 960, 390);
  bezierVertex(1043, 390, 1110, 457, 1110, 540);
  endShape();
  
  if (dist(stx, sty, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx=mouseX;
      sty=mouseY;
      if(dist(1110, 540, mouseX, mouseY)<10)
      {
        stx=1110;
        sty=540;
      }
    } 
  }
  if (dist(stx2, sty2, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx2=mouseX;
      sty2=mouseY;
      if(dist(960, 690, mouseX, mouseY)<10)
      {
        stx2=960;
        sty2=690;
      }
    }
  }
  if (dist(stx3, sty3, mouseX, mouseY)<50)
  {
    if(mousePressed)
    {
      stx3=mouseX;
      sty3=mouseY;
      if(dist(810, 540, mouseX, mouseY)<10)
      {
        stx3=810;
        sty3=540;
      }
    }
  }

  if(stx==1110 && sty==540 && stx2==960 && sty2==690 && stx3==810 && sty3==540)
  {   
    i1=i1+1;
    i2=i2+0.5;
    i3=i3+2;
    circle (width/2, height/2, i1);
    circle (width/2, height/2, i2);
    circle (width/2, height/2, i3);
    if(i1==300)
      i1=0;
    if(i2==300)
      i2=0;
    if(i3==300)
      i3=0;
   text("CLEAR", width/2-90, height/2+20);
  }
}

void ms4()
{
  if (stx==1110 && sty==540 && stx2==960 && sty2==690 && stx3==810 && sty3==540 && mouseX>866 && mouseX<1057 && mouseY>513 && mouseY<562 && mousePressed)
  stage=5;
}

(Sixth sheet)
void ds5()
{
  stroke(205, 102, 0);
  line(0, height/2, width, height/2);
  noStroke();
  fill(255, 204);
  int d = mouseY/2+0;
  ellipse(mouseX, height/2, d, d);
  fill(255, 204);
  int iX= width-mouseX;
  int iY= height-mouseY;
  int iD=(iY/2)+10;
  ellipse(iX, height/2, iD, iD);
  
  println(mouseX);
  println(mouseY);
  
  if (mouseX>958 && mouseX<962 && mouseY>548 && mouseY<552)
  {
    fill(255);
    textSize(60);
    text("CLEAR", width/2-90, height/2+20);   
  }
}

void ms5()
{
  if (mouseX>958 && mouseX<962 && mouseY>548 && mouseY<552 && mousePressed)
  stage=6;
}




interactive video week 12

CODE :

int mode = 1;
int text = 1;
int i = 0;
int c = 0;
int x= 100;
int y= 100;
int x2= 800;
int y2= 1000;
int sz = 300;
void setup()
{
  fullScreen();
  colorMode (HSB);
}

void draw()
{
 background(0);
  
  if (mode == 1)
  {
    textSize (30);
    text ("A Perfect Circle", width/2-50, height/2+8);
    pushMatrix();
    translate(250, 250);
  
    stroke(255);
    noFill();
    beginShape();
    float angle = mouseX;
    for(i=0; i< angle; i+= 1) 
    {
    vertex(cos(radians(i))*150, sin(radians(i))*150);
    }
    endShape();
  
    ellipse(cos(radians(angle))*150, sin(radians(angle))*150, 10, 10);
      popMatrix();  
  }
  if (i > 360 && mouseButton == LEFT)
  {
    mode = 2;
  }
  
  if (mode==2)
  {
    //Left upper side
    circle (50, 30, 200);
    circle (30, 100,100);
    circle (50, 170, 20);
    circle (170, 80, 40);
    circle (170, 10, 60);
    circle (200, 15, 30);
    circle (200, 40, 20);
    circle (240, 20, 10);
    circle (80, 200, 10);
    circle (150, 120, 10);
    circle (100, 130, 5);
    
    //Right uppper side
    circle (500, -30, 160);
    circle (420, -40, 100);
    circle (370, -10, 90);
    circle (400, 27, 40);
    circle (300, 40, 70);
    circle (480, 80, 10);
    circle (370, 50, 10);
    
    //Right under side
    circle (510, 360, 100);
    circle (410, 390, 15);
    circle (300, 400, 130);
    circle (350, 360, 50);
    
    //Left upper side
    circle (30, 510, 200);
    circle (75, 420, 60);
    circle (120, 400, 10);
    circle (120, 370, 5);
    
    textSize (30);
    
    switch (c)
    {
      case 1:
      text ("Hi! Thanks to come to this world!", 10, height/2);
      break;
    
      case 2:
      text ("I've waited for you", 10, height/2);
      break;
      
      case 3:
      text ("You need to make a perfect circle", 10, height/2);
      break;
      
      case 4:
      text ("not only for us, but for you too.", 10, height/2);
      break;
      
      case 5:
      text ("because you are living in the circle as well.", 10, height/2);
      break;
      
      case 6:
      text ("Let's start.", 10, height/2);
      break;
    }
    
    if (c > 8)
    {
      background (0);    
      circle (x, y, sz);
      circle (x2, y2, sz);      
      if (dist(x, y, mouseX, mouseY) <sz /2)
      {
        if (mousePressed)
        {
          x = mouseX;
          y = mouseY;
        }     
      }
      if (dist(x2, y2, mouseX, mouseY) < sz/2)
      {
        if (mousePressed)
        {
          x2 = mouseX;
          y2 = mouseY;
        }
      }
    }
    if (dist(x, y, x2, y2) < 10)
    {
      noFill();
      for(; sz < 1000; sz += 5)
      {
      circle (x, y, sz);
      circle (x2, y2, sz);
      }
      textSize (50);
      text ("clear", height/2, width/2);
      
      //???Why it dooesn't show every circle from sz (300) to sz (1000)??
    }
  }

}


void mousePressed()
{
  c++;
}

interactive video final subject - new

The Most Perfect Circle


 ‘The Most Perfect Circle’ is an arcade game app. The game player is required to make a ‘perfect circle’ for NPC. Only thing the player can see is the main story line, which is the process of making a perfect circle and some choices that the player will make. However, the usage of the circle that the player has made, and purpose of the circle are decided by sound which has come through the mic. In the middle of the game, there are some bifurcations.Whenever the player meets the points, player believes that choices I made will change the result, but these are just a process of constructing a ‘perfect circle’. Hence,it is possible that the result seems unreasonable to the player. Also, the player will never know what made the result came out till the game ended.


 while we live, we might attribute many of our results, successes and failures to our choices. Or, some of us who believe fatalism might think that the reason of something comes and goes is because it is supposed to do, as if god made us. In this game, I concentrate on the unseen factors, even though it is visible, seems not that much important. I’ve felt these small things which is almost impossible to notice are changing many parts of our life. I wanted to shoot a light on the phenomenon.


Thus, In this game, no matter what the player wanted to do, and how they played, the story line flows along the unseen, not important things. The ironic point is that who want to make a ‘perfect circle’ on purpose is the player, and the factor which make change the final purpose of the ‘perfect circle’ is player as well. 




story board : 


1. Main screen.

- move mouse and make a circle to start. (sample code is below the story board)


2. Texts

- Some text will be appeared and ask player to make circles.

- cilck to continue


3. Stage 1

- move two semicircles to the centre of the screen and make a circle.

- click and drag each semicircle


 


4. Stage 2
- click the bumped part of the circle till it becomes a circle
- click the bumped part

5. Stage 3
- move lines to make a circle 
- drag each line

6. Stage 4 
- absorb obstacles around the circle and make the black circle till the white circle is disappeared.
- move mouse and keep press mouse button


7. Texts
- After finishing 4th stage, the NPC will talk to you again.
- click

8. After finishing each stage, a time will show up to let you know how many times did you spend to clear each game. It is a kind of trap to make a player believe that the time might be matter.
- click


9+a. I'm expecting to make about 3 more stages if I have more time.

last scene : the ending scene will be differenciated by the loudness of sound.

Ending number 1 : Silent
- your circle became someone's eyes

Ending number 2 : White noise
- your circle became wave length of water

Ending number 3 : Cave
- your circle became a hole (entrance) of a cave

Ending number 4 : Border
- your circle became a border

Ending number 5 : conqueror
- your circle immure another circle

Ending number 6 : insect
- your circle became an insect and broke another circle


Example code of the main screen :

int mode = 1;
float i = 0;
void setup()
{
  size(500, 500);

}

void draw()
{
 background(0);
  
  if (mode == 1)
  {
    textSize (30);
    text ("A Perfect Circle", 100, height/2);
    pushMatrix();
    translate(250, 250);
  
    stroke(255);
    noFill();
    beginShape();
    float angle = mouseX;
    for(i=0; i< angle; i+= 1) 
    {
    vertex(cos(radians(i))*150, sin(radians(i))*150);
    }
    endShape();
  
    ellipse(cos(radians(angle))*150, sin(radians(angle))*150, 10, 10);
      popMatrix();  
      println (i);
  }
  if (i > 360 && mouseButton == LEFT)
  {
    mode = 2;
    textSize (30);
    text ("Hi! Thanks to come to this world!", 10, height/2);
  }
}



1 2 3