Tag Archives: black & white exercises

Black & White Exercise #4: Weak Forces


My particle system started as a simple shower of colorful circles. After that was done, I tried to get the circles to react to the cursor/mouse position.  I basically wanted a gravity well to be located where the mouse was, but I had a hard time figuring out just how to code that.  After some fiddling with it, though, I did manage to get a satisfactory reaction from the circles.


The forces are fairly weak, and therefore hard to present through static images, but notice the tendency toward the large white circle (the indicator for the cursor).

If you hold the mouse button down/hold your finger to the tablet, the colors, become slightly brighter, and the force applied to each circle is doubled.

stronger_1 stronger_2

Overall an interesting little intro into the world of particle systems.  I still am quite interested in learning how to properly code a gravity well.

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 #4: Jewels

When I started this exercise, I wanted to create an array of slowly rotating rectangles that appeared wherever the player tapped on screen, basically like in this sketch: jewelsrotation I had programmed the rectangles to have a completely random color, and a random size within a small range. I also changed to rectMode(CENTER) so that they appeared evenly around wherever the user tapped the screen. I was still having problems with the rotation, though. I couldn’t quite figure out how to get each rectangle to rotate around its center. However, I somehow stumbled across a solution that turned out to be much more aesthetically pleasing, and satisfying to manipulate, than what I had set out to do: Screen shot 2014-12-09 at 1.07.06 PM I know it doesn’t look like much, but at every point where there’s a rectangle on screen, the program is rendering a new one every frame with a random color and size. So really, each rectangle actually looks something like this sketch to the naked eye: photo (4) I know it’s hard to tell from the sketch, but the resulting effect onscreen is not unlike a crystal or jewel twinkling in front of a light source. I’ve limited the array to a maximum of 50 different jewels on screen, and each one has a timer that gradually dims it within one to five seconds (a random setting for each jewel). I was very pleased with the results, and found it very enjoyable to tap all over the screen and look at the pretty twinkling lights that ensue!

Black & White Exercise #4: Particles

I think I had the most fun playing around with particle systems. I spent a lot of my time just going into the base particle codes and just messing around with them seeing what I could make with them. At some point I had gotten the particles to be white and fly to the edges of the screen. I looked at this and thought of one thing and one thing only. In star wars when any ship goes to hyper speed you see the stars start to stretch and the ship speeds up. This was my inspiration to make a space themed game. The premise of this game was to destroy the enemy ships attacking your ship. The most successful way for me to make this was to make the game first person. I played around with adding text as well as sound. During the game the text goes up on the screen and then 4 enemy red square appear on the screen and in order to kill them you have to hit them with your mouse. With each mouse touch I added a second particle system to act as an explosion. Basically when you touch the screen the a splash of blue circles appears to signify you shot your weapon. I never made an end to the game so once all the squares are removed they come back and you can continue forever killing the enemies. The four screenshots show each phase of the game: The very beginning space screen, the text instructions, the enemies appearing, and the particle explosion. This will be my open studio game. k l m n

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 #2: Monster in the Village

For the next lab I wanted my race to the end monster lab to be a simple game where you avoid objects moving up and down the screen to reach a safe zone. Basically it is the idea of the world’s hardest game. (if you don’t know what that it, google it and you’ll get the idea).  So for my game I had 4 elements. I had the player, a circular dragon (at the top of the screen), a town(bottom left of the screen), and a number of squares that would be bouncing from the dragon to the bottom of the screen. The goal is to get your player across the fire and into the town without being killed and then eaten by the dragon. And so after getting the interface down, the next part was motion. Getting the squares to move and bounce was simple and so it was time to get to collision. This is where I had the most trouble and still have trouble today. When I write the collision code in and I declare all of its necessities. The game just ends up lagging/going slower and the collision is still non existent. I am not sure what exactly I am doing wrong, but one thing is for sure and that is that there is no working collision in this game :/. c d

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 #4: Magic Wand

For the fourth exercise, I decided to code a particle system that would look lie sparks coming out of a wand. To represent a wand, I used a long brown rectangle, and to represent the sparks, I used an array of transparent colorful circles that quickly shrink away after they appear. The start screen looks like this: Screen Shot 2014-12-08 at 7.36.32 AM And once a player touches and drags the wand, magical sparks begin to fly! Screen Shot 2014-12-08 at 7.36.13 AM I also decided to loop in a little magical sound to set the feel for the game.

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 & White Exercise #4: Particles

ring For our introduction to particle systems, I modified existing code of both the rings and particles. In my first attempt with the rings I altered the time taken for the rings to ‘expire’ or disappear from the screen. Then changed the color variables and set them to randomly increment and then put the final value modulo 255 to get a variable in range.  The rings are initialized whenever they a point is pressed on the screen. From there the rings spread out  and the colors pulse with each set of rings taking a different color. ring1 The third picture shows the modifications I made to the particle system. Again I randomized the colors but also inverted gravity to create an upward stream. In addition, instead of a single stream, I added two more points the particles could come from on either side of the initial stream. This simple alteration along with movement creates a feeling of greater volume akin to a smoke effect from a fire. Particle

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 #4: Particles

Screenshot (2) With the particle system the key part I wanted to make sure was there was that it was player controlled.  From there it was trying to figure out how to make that pleasing to look at. I was playing around with different ideas and I tried having the particles always tend toward the center of the screen and the effect it had made the piece feel a lot more alive than it previously had. Once the randomness of the particles was set so that they didn’t stream out in a line i added a few more variables like bubble size and color that changed based on where the cursor was.

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 #4: Particles

With Exercise 4, I found myself experiencing quite a bit of writer’s block — or designing/programming block, in this case. So I kept things really simple, and decided to see what happened if I smashed two of our labs together. This was the result: Screen Shot 2014-12-03 at 4.04.44 AM The ‘game’ opens with a shower of little circles, followed by a fountain of circles that follow your mouse around the screen. The larger ripples appear with each down-click. Simple, but certainly interesting to look at, especially once you get going and fill up the entire screen (and possibly crash your computer: this code gets quite laggy after a bit).

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 #4: Particles

ex3.1 For this lab I wanted to create a circular rotation based ride and during the ride the shapes that are moving around can change depending on location of the mouse if on a desktop or the location you drag if on a tablet. The goal was to create diversity of movement and at the mean time the random generator changes the color of the background simultaneously. I got this idea from the solar system example that we have seen it during our labs and I thought I could make something cool out of it by adding a little bit of creativity and using the design techniques I’ve seen from Chip Kidd.   ex3.2 The shapes can be anything such as a line or a circle. MouseX and mouseY decide how the particles are going to be shaped so all you have to do is move on the screen and enjoy the ride. I thought it was interesting using arrays and ı think it was a pretty useful lab and I am glad I have accomplished it. Ege Ozcan

Black & White Exercise #4: Epileptic Rectangles

  sketch-23sketch3 I created a simple array of 20 rectangles with random widths (heights start at 0.001). Each mouseclick creates a white rectangle at random coordinates, which then stretch vertically to the bottom of the screen (achieved by incrementing their height by 0.17 per frame). All the while, the background is flashing every which color and the white rectangles slowly drip to the bottom of the screen. The resulting images resemble some kind of negative-space cityscape, offering calm and shelter from the storm of epileptic colors. It looks cooler in stills than it does in motion.

Black & White Exercise #4: Particles

I worked on two different projects for this one. The first experimented with more forced perspective. The particle system of objects is being transform-rotated, but the scale of the objects is also being increased and decreased at the same time. The result is a particle system that appears to swell towards you. sketch2 Here is the system at a small ‘in the distance’ moment^^^ And up in your face: sketch I was surprised at how well it worked. When the scale increased, it also increased the stroke of the objects, which I found to be unexpectedly awesome. The colors are being randomly generated to be reddish and purple. I think I would improve on it by spending a bit more time tweaking the motion and perhaps changing the shape of the particles themselves. My other exercise was also a particle system. The particle system follows the mouse cursor, and generates blue ‘bubbles’ which float to either side of the screen. The blue’s are randomly generated to give the design a feeling of diversity, and as the alpha channel is decreased, the color values decrease, and seem to fade away into the distance. Here’s the program freshly launched: sketch2   And after some cursor movement:   sketch
If I were to go back and make improvements, I would probably spend time tweaking the gravity so that it disperses the bubbles in a more realistic way. I could also modify their scale to give the impression that they are floating not only to the side, but off into the distance.

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 #4: Fire Box

  Screenshot_2014-11-11-18-00-14 Fire Box is a game based on a simple particle system. The player is presented with a white box, and every tap will move the lid slightly to the right. The idea of having only one object on the screen is influenced by Krug’s “Don’t make me think.” While many other objects can fit into the screen to serve as decorations, they might also distract the player. The sliding effect is also based on the same principle. While no instruction is provided, it is important to give immediate feedback to lead the player. As Krug says”We don’t figure out how things work, we muddle through,” in this case the sliding of the lid should be especially visible for the first tap. However, because the player also need time to visually “catch up” with the action, it should take several taps before the firework starts; therefore the latter moves should be smaller. Screenshot_2014-11-11-18-00-20   When lid is open, a firework will burst out of the box, accompanied by a cracking sound. Screenshot_2014-11-11-18-00-24 When untapped, the firework is generated in light, tinge colors. When touched, it will change into more vibrant colors. Screenshot_2014-11-11-18-00-32 Screenshot_2014-11-11-18-00-38 The firework is created using a particle system that generates small circles that move away from their origin. While they are moving away, the alpha value decreases and thus makes the fading effect. In the coding process, the challenging step is not to make the firework, but actually to create the box.  Because I wanted to create a 3D feeling using two dimensional shapes, I began with three parallelograms of different shades. When the lid slides to the right, two inner sides of the box will be shown. I have tried several ways to represent those two sides, but eventually found that a short grey line worked better than others. For future improvement, I would like to find a way to close the box and stop the firework. As this program is written without a background function in draw, and the firework and the sliding effect all depends on no background, it becomes difficult to erase things already drawn on the screen. This, however, may require more advanced code.