Midterm – Meera.

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.

desgin notes 1

rotaysqay recoding

solar rotate align recording

boxes start menu and alignment text




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");
  rSpeed = radians(1);
  tSpeed = radians(1.5);
  qSpeed = radians(.9);
  song = new SoundFile( this, "UpBeet copy.wav");

void draw() {
  image(img, 0, 0);
  // if statment that take us to the start menu
  if (mode==0) {
    background(0, 0, 0);
    fill(40, 85, 56);
    text( " Press Space to Play  :)", width/2, height/2);
    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);

  // 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
    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 (paused) {
      if (abs(rY-height/2)<40 ) {
        fill(0, 255, 0);
        text("sphere1: good job!", width/2, height/2+50);
      } else {
        fill(255, 0, 0);
        text("sphere1: try again..", width/2, height/2+50);
    if (paused) {
      if (abs(tY-height/2)<40) {
        fill(0, 255, 0);
        text("sphere2: good job!", width/2, height/2 +80);
      } else {
        fill(255, 0, 0);
        text("sphere2: try again..", width/2, height/2+80);

    if (paused) {     
      if (abs(qY-height/2)<40) {
        fill(0, 255, 0);
        text("sphere3: good job!", width/2, height/2 +120);
      } else {
        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) {
    } else if (mode==1) {


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

  if ( key == 'p' ) {

    paused = !paused;
  image(img, 0, 20);




(let me know if it’s still not working) :), updated nov 2


Image used for the background :

Leave a Reply