Midterm – Meera. – Introduction to Interactive Media

When coming up with an idea for this game, I wanted to make a game that tends to the compulsiveness of having things be in order. I started out with just one white box in the center of my screen. I wanted the box to be spinning around itself, once I did that I added two more boxes the same size as the one in the middle. These boxes spun in different orders around themselves and the objective was to strategically make them stop , on command, at a moment they were all aligned. The game was set up with no way of winning, so a different approach was given. The next approach was to have the boxes orbit as though they were in a solar system. Now that the approach was changed the objective was altered too, the objective became that all the boxes must align around a straight horizontal line that went across the middle of the game window. After setting that up, a system of knowing that the boxes were aligned had to be made, and adding a start menu.

Now I had to clean up the idea, I needed a theme and sound and text and better orbiting for my boxes. I started with my theme, I took inspiration from the movement of the boxes and decided on making the theme a solar theme. I put a yellow sun in the middle of my screen and made the boxes into orbiting spheres that circle around the sun. I added an image for my background but it glitched the orbiting spheres, my issue was that I was uploading the image as a pixel rather than just as an image.

the was how it looked before I fixed it.

Once that was done, I working on the orbiting of my spheres. The problem was that only two spheres aligned at a time, it was mostly the outer sphere which was “ ellipse #3” that never aligned well. I messed around with three of the main components of the orbiting: the radian, the speed, and the radius (ring radius, or how far from the center each orbit ellipse is ). When I altered #3’s speed it made a difference but it still didn’t align them enough. I attempted a little with the radius but that did nothing to my alignment, so I ventured off to my final experiment which was the radian. I decreased the number of the radian in #3 and it got very close to the alignment, so I decided to increase the range of acceptance of a coded alignment. Once I did that, the player could finally win. I added text to help the player see that which sphere is aligned once paused.

Orbit fix

post space aligment clean up

Finally, I imported a sound file to the game. At first, I had the sound play when key was pressed, but since I started out with the code “ song.play();” it got chaotic every time the player paused for alignment. Thus, I had the “ song.play();” moved up to the void setup, but now the sound ended even though the player is still playing. Therefore, I changed it to “ song.loop();” and it finally worked.

Finally, here’s the end result:

boolean paused = false;
float r;
float t;
float q;
float rX, rY;
float tX, tY;
float qX, qY;
float rSpeed, tSpeed, qSpeed;
int mode = 0;
PImage img;

//sound stuff
import processing.sound.*;
SoundFile song;

void setup() {
  size (800, 800);
  img = loadImage ("Space copy.jpg");
  rectMode(CENTER);
  r=radians(30);
  t=radians(40);
  q=radians(100);
  rSpeed = radians(1);
  tSpeed = radians(1.5);
  qSpeed = radians(.9);
  song = new SoundFile( this, "UpBeet copy.wav");
song.loop();
song.amp(.05);
}

void draw() {
  image(img, 0, 0);
  // if statment that take us to the start menu
  if (mode==0) {
    background(0, 0, 0);
    textAlign(CENTER);
    textSize(20);
    fill(40, 85, 56);
    text( " Press Space to Play  :)", width/2, height/2);
    textSize(16);
    fill(50, 100, 89);
    text (" align the grey circles as horizontally as possible, press 'p' on your keyboard to align.", width/2, height/2+30);
    drawStartScreen();
  }

  // if statment that take us from the start menu to the game 
  if (mode == 1) {

    // line in the center 
    line(0, height/2, width, height/2);

    //  center ellipse- ellipse#1
    //rotate(r);
    fill(255, 255, 0);

    ellipse(width/2, height/2, 60, 60);

    fill(55, 64, 80);
    float radius = 100;
    rX = cos(r) * radius + width/2;
    rY = sin(r) * radius + height/2;
    ellipse(rX, rY, 30, 30); // x,y,w,h


    //middle ellipse- ellipse#2

    tX = cos(t) * radius*2 + width/2;
    tY = sin(t) * radius*2 + height/2;

    ellipse(tX, tY, 30, 30); // x,y,w,h


    ////outer ellipse- ellipse#3
    qX = cos(q) * radius*3 + width/2;
    qY = sin(q) * radius*3 + height/2;
    ellipse(qX, qY, 30, 30); // x,y,w,h

    if (!paused) {
      r+= rSpeed;
      t+= tSpeed;
      q+= qSpeed;
    }

    // IF STATMENTS TO LET THE PLAYER KNOW HOW THEY'RE DOING : 
    //println(abs(rY-height/2));
    if (paused) {
      if (abs(rY-height/2)<40 ) {
        textSize(30);
        fill(0, 255, 0);
        text("sphere1: good job!", width/2, height/2+50);
      } else {
        textSize(30);
        fill(255, 0, 0);
        text("sphere1: try again..", width/2, height/2+50);
      }
    }
    if (paused) {
      if (abs(tY-height/2)<40) {
        textSize(30);
        fill(0, 255, 0);
        text("sphere2: good job!", width/2, height/2 +80);
      } else {
        textSize(30);
        fill(255, 0, 0);
        text("sphere2: try again..", width/2, height/2+80);
      }
    }

    if (paused) {     
      if (abs(qY-height/2)<40) {
        textSize(30);
        fill(0, 255, 0);
        text("sphere3: good job!", width/2, height/2 +120);
      } else {
        textSize(30);
        fill(255, 0, 0);
        text("sphere3: try again..", width/2, height/2+120);
      }
    }
  }
}

// the drawing for the start menu 
void drawStartScreen() {
}

// the function that created the Start menu
void keyPressed() {
  if (key==' ') {
    if (mode==0) {
      mode=1;
    } else if (mode==1) {
      mode=0;
    }
  }

}

// the function that pauses the game
void keyReleased() {

  if ( key == 'p' ) {

    paused = !paused;
  }
  //img.updatePixels();
  image(img, 0, 20);
}