Tag Archives: Black & White Exercise #3

Black & White Exercise #3: Scrambler

Overall a fairly simple exercise.  Using this as practice with matrices, rotations, and translations, I challenged myself to get multiple rotating things to revolve around other rotating things.  As the first few parts came together I was reminded of a scrambler: scrambler And once I took 2 of those things and split them I was reminded of the DC Shoe Co logo: dc-logo I threw those things together (with a touch of blue) and came to something sort of interesting: 3 4 Axing the background and adding just a little extra complexity yielded my Scrambler: 1 2

Black & White Exercise #3: Transforms

Transforms were some of the most confusing things to get working for me. For this assignment, using the transforms, we were supposed to make a program that was like an amusement park in some sort of way. I wanted to capture the essence of amusement parks in my game/exercise so I asked myself, “what do most things do at amusement parks?” And I came to the conclusion that most things there move quickly changing speed and trajectory. One of the first things people ever go on at these parks are either the Tea Cups or the Scrambler. Both utilize that key component of rapid movement. I also wanted the colors to change rapidly because amusement parks also have lots of flashing lights. So  I started by making several circles, giving them each a case. Each circle had a heavy stroke with a small orb in the middle that, because of a random color generator, would flash different colors. Each circle starts in the same location as the other, but they all have different speeds and spin around until they all meet again at the starting point. Image one is just after the program starts while image two is the first phase of case planes moving. Image three is the case planes changing speeds so that they create a cool design. j i h The most confusing part of this was to get each circle to spin at different speeds. I wasn’t making them a class, mainly because I wasn’t sure how to, so I decided to put each circle on its own case. Each case spun at a different speed which created the effect that the circles were speeding up and slowing down as the program ran. For a name, I decided to call it Records as the circles looked like vinyl records.

Black & White Exercise #3: Atoms

When I started making this game, I decided to start by coding three circles which each had three circles rotating around them (using translations). I wanted the movement and position of the circles to remind the player of the “Twist” rides you find at carnivals and amusement parks. When I coded those circles, I realized that they kind of resembled atoms – the three center circles were nuclei, and the rotating circles were atoms. I decided to abandon my former idea in favor of creating a basic animated atom. This was the result: Screen Shot 2014-12-08 at 7.25.10 AM The “electrons” circle their nuclei using a circular motion code. To make it appear as though the atoms are whirring slightly, the nuclei slowly move around the screen using a random motion code. I decided to make the objects more obviously reference atoms by adding slightly transparent strokes around the center, which makes the electrons’ paths easier to follow. I think that I’m satisfied with the assignment because I accomplished what I set out to do, but I keep getting the nagging feeling that it’s missing something…

Black and White Exercise #3: Transforms

sketch For my third Black and White game I opted to create a Ferris wheel type structure. As we had just learned transforms I simply modified the existing code to arrange the box like structures in a radial pattern around a central focal point. The Ferris wheel then appeared to rotate around a centered axis, its motion, clockwise or counter-clockwise was dictated by the x position of the mouse. If it was to the right of the screen then it would turn in a clockwise fashion, the left would result in a counter-clockwise movement.  it is a very simple implementation in black and white of transforms for an amusement park type ride.

Black & White Exercise #3: Card Coaster

Screenshot (1)   The original idea behind the cart coaster was to have four blocks moving after each other on a set track. and then on a click they would make a loop. however I ran into a few problems. I could get the loop to run but then they wouldn’t continue on their track. Or they would stay on their track and not loop. I ended up toying with the idea of the loop being constant while having the carts always rotate. This took away from the interactivity but made the experience more visually pleasing.

Black & White Exercise #3: Clock

ex4.1 For this lab assignment I used the transforms lab and made some adjustments in order to make it a fun ride. There is one draggable object and the other four squares are turning respect to each other clockwise. The goal is to drag the draggable without touching the movable hands (just like a watch). Once you start dragging the object all of the shapes become black and that represents that the draggable is available to move it around.   ex4.2 This was one of the exercises that I struggled with because It was first time for me using the matrix in Processing. Even though it was a bit challenging I think as a whole I learnt how to set up a basic matrix and use translate in order to complete the lab assignment. I wanted to use repetition and patterning in different ways as it explains in Chip Kidd A Kid’s Guide to Graphic Design. Ege Ozcan

Black & White Exercise #3: Amusement Park

sketch1   For this exercise I chose to make a rotation-based ‘ride’ that spins, but also modulates the shape of the ride itself. I envisioned something that started with one shape and morphed to another shape while spinning. I wanted to create diversity of movement, and I also wanted to play with forced-perspective.  The code is very simple float angle = 0.0; float radius = 0.0; float change = 1; void setup() { // orientation(LANDSCAPE); size(1024,768); } void draw() { //I decided to make two different ‘centers’ with two different rotating systems translate(mouseX+300, mouseY); rotate(angle); rect(0, 0, radius, radius, radius); angle += 0.1; if(radius>150) change *= -1; if(radius<-150) change *= -1; radius += change; //here is the second ‘system’ translate(mouseX-300, mouseY); rotate(angle); rect(0, 0, radius, radius, radius); angle += 0.1; if(radius>150) change *= -1; if(radius<-150) change *= -1; radius += change; } sketch2   As the ‘radius’ float changes between 150 and -150, the shape changes wildly since it is also changing the radius of the corners of the rectangle. Once the radius becomes negative, the corners invert and it looks like this ^^^. I might not want to ride this ride, because you would clearly get transported to another dimension, BUT if there’s Pizza and Beer on the other side it could be worth it.

Black & White Exercise #3: Orbitshift

k4 For this assignment (Amusement toy), I modified the solar system code to make it more fun to play with. The player controls the light blue circle, and based on their positioning, the center white circle increases or decreases its radius, and the orbit patterns and speed of the blue square and it’s circle vary. k6 I coded in a change that moved the red circle from right to left based on the player’s mouse position but got rid of it after a while. I liked the idea, but I wanted to focus on the movement of the center white circle, and think of it either as an obstacle or goal, some sort of boundary. k5 I added in a score counter that increased over time as long as the player didn’t collide with any objects, but I didn’t see much of a purpose in it, and the game was too abstract to score at such an early stage.

Black & White Exercise #3: Spinner

For my amusement park ride I thought that the best thing to do with matrices was spinning. The push and pop matrix format worked really well for rotations, so I came up with this. Amusement Park The black squares on the outside is the metal casing and the red circles on the inside are individual seats that also spin independently. Whats cool about that is depending on the speed and direction your chair is spinning the outside will appear to change speed and direction of its spin as well further disorienting the rider and giving him/ her more of that dizzying nausea they seek on these rides.