Tag Archives: Black & White Exercise #1

Black & White Exercise #1: Circular Motion

For the first lab I wanted to keep things simple using the circular motion code. My idea for my game was to have a bunch of rotating circles across the middle of the screen constantly rotating. Then by pressing on the screen you would change the color of the background from black to white. It took me a while to get this part down and at this point it isn’t really a game, but just sort of an interactive graphic. If I were to go back to it I would probably add a third element of the circles changing color and depending on the color, you would have to change the background to that color. I could see this working really well with more colors although thinking about it, the circular motion part of the game is really not necessary at all and purely just an aesthetic thing rather than a functionality thing. The first Image is the base of the program where the circles move in the middle of the screen and the second image is when you press the screen and the background turns white while the circles stay moving. ab The next step for this exercise if I wanted to keep moving forward would be to make a Simon Says Game out of this. Where the circles change colors and around the border of the screen there would be different colored shapes you would have to match up with the moving circles  

Black & White Exercise #1: Pentagon

I had trouble deciding what I wanted to create after being given this prompt, because there were so many options. I decided to create “Pentagon,” a game in which a player used objects to move other objects. Screen Shot 2014-11-03 at 8.35.55 AM My game starts with five circles (in my class, I named them Ron, Hermione, Hagrid, Sirius, and Lupin) stacked on top of one another. If the player touches any of the circles, the screen pulses black and white. Touching Ron causes Hermione to move, while touching Hermione causes Hagrid to move, while touching Hagrid causes Sirius to move, and so on. The goal of Pentagon is to create the titular shape by touching circles until they line up to form the point of a pentagon, like so: Screen Shot 2014-11-03 at 8.45.06 AM This goal is simple, so I decided to make the screen pulse black and white when any circle is being touched to make the pentagon harder to form (and hence why the pentagon in the picture isn’t perfect.) Pentagon isn’t finished yet; I still want to add a win state. Right now, I’m trying to figure out how to trigger a win state when the circles line up with specific pentagonal points on the screen, but I’m having trouble making the tablet differentiate between a circle passing a point briefly (which shouldn’t trigger the win state) and a circle actually being stopped on a point. -Annie

Black & White Exercise #1: Symmetry

  sketch1 Symmetry is a grayscale game that incorporates four circles. Using sinusoidal movement they gradually move up and down the screen. As they move, the circles strobe, increasing and decreasing their radius. The goal is to tap the screen when the circles are aligned. If the player is quick and accurate then the colors invert. It is a very simple game but does include some elements of skill while providing an interesting visual effect.

Inverted colors following winstate.


Almost symmetrical

Design elements; When designing the game I looked at playing with inversion and then with this idea in mind added a game to that singular mechanic. The strobe effect is not solely for visual effect. It obfuscates the actual position of the circles and creates greater difficulty for the player. Initially the strobe effect was too fast and I was forced to decrease the framerate to only 30 fps. In future the game could include diagonal alignment so as to increase player choice.

Black & White Exercise #1: Up to the Circles

Screen Capture #013 The game is called UP TO THE CIRCLES and the goal is to bring the square between those two circles which are doing a circular motion. On the bottom left player is able to see its score and to goal is to get as close as to 100, so 99 would be the highest score you can get but once you get to 100 that means you exceeded the limit which ends the game. It was my first time using circular motion and if else statement so I decided to be as simple as possible. In order to move the square I used mouseY to move it vertically so square is just able to move on the Y direction. Every time Y is in the circle’s range the score increases pretty fast. In order to get 99 you have to be really careful. Screen Capture #014 Once you get 100, the text that says GAME OVER  pops up on the screen to let you know that you lost the game and  if you get 99 game pops a screen that says HIGH SCORE CONGRATS!!! As a first game I felt pretty confident using the code and understand stuff, but I hope to come up with new stuff in the future. Enjoy playing UP TO THE CIRCLES!!!

Black & White Exercise #1: Fusion Reaction

Fusion Reaction is a very simple black and white game, which only uses three components. The user starts off with this screen: Screen Shot 2014-10-27 at 10.46.51 PM   The user must figure out what to do to cause the titular “reaction.” Screen Shot 2014-10-27 at 10.47.23 PM Both of the squares are draggable, but only the one in the upper right hand corner causes the “reaction.” The user knows they have won when both squares disappear, and the large circle moves into the center of the screen and begins spinning, as is shown here: Screen Shot 2014-10-27 at 10.47.42 PM I chose to make the two draggables squares, as that reminded me a bit of a building block, and the user is attempting to “build” a reaction. The circle reminded me of a pot or cauldron, and it is bigger than the two blocks in order to indicate that the blocks must be placed inside of it. I chose to put the larger circle at the bottom and the two smaller squares in the upper corners in order to lend a balanced feeling to the game, by placing the “heavier” object on the “ground,” and the “lighter” objects in the “air.” The vertical symmetry in this design is pleasing to the eye, and the fact that the circle is approximately the same size as both squares means that the screen is visually balanced along the horizontal axis too.  

Black & White Exercise #1: The Mystery of Frogboy

The Mystery of Frogboy is a basic bastardization of Frogger, minus a few elements. The user is a circle mapped to mouseX and mouseY, and initially begins at the bottom of the screen in landscape mode. Seven squares bounce back and forth along the x axis, set in y position each above one another. The green square represents a lily pad that the frog is trying to get to, and each of the other squares is an obstacle that has a speed between 5 and 31. The objective of the game is to get to the green square without colliding with anything else, and to do it in the quickest time possible. I didn’t manage to code any collision in this game, so no rewards or punishments are established, and the gameplay is goofy because of that, but this game was important in helping me establish sets of functions for individual objects, and I had fun positioning and setting the variables of the obstacles.

Black & White Exercise #1: Chasing 88/Reverse

Screenshot_2014-10-26-17-55-01 Chasing88 (or Reverse) is a black and white game based on the idea of clockwise/counterclockwise motion. The interface is consists of four moving circles. All of them are doing clockwise circular motion at different speeds; therefore if left alone, they would eventually run into each other, which will cause a reset of the game. In order to reach the goal (draw an “88” on the screen), the player can tap the circle to change the moving direction to counterclockwise. While the moving direction changes, the speed of the circle will also change, so the right timing is the key of successful game play.  

game begins as:


Completing the track


“88” is created:

      Screenshot_2014-10-26-17-55-56     When the track is completed, the circles will not stop moving, so the goal become to maintain the “88” for as long as possible. In term of design, the background command is placed in the “setup” function instead of the “draw” function, so circles are drawn on top of each other, and thus forming the grey tracks that look three dimensional.  Because of the same reason, these tracks also have different shades when the moving direction changes. A list of things to be added:
  • A timer on screen to count how long a player can maintain the goal
  • New levels adding difficulty(for example, instead of forming the whole track, set some area as forbidden zone, if a circle moves in, the game would reset )
  • title page/sound/ other shapes