Tag Archives: black & white exercise #4

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 #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 #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 #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 & 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 #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 #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 #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.  

Black & White Exercise #4: Blip

screen5 Blip is the particle game that I’ve been working on. It features a  cloud of generated circles that change color based on mouseX and mouseY positions and slowly move towards the cursor’s direction while the mouse is pressed. screen 3   A stream of particles immediately latches onto the mouse’s position as the cloud drags itself along the screen. When the mouse is let go, the particles from the cloud to the mouse fall off of the screen due to gravity, and the cloud remains at a stable x/y position. screen2 I enjoyed coding blip because it taught me about particle generation and gave me new ideas for visual effects for my games. It seems daunting to keep track of everything in an array, but if I can do that, then I can make full use of each particle, in terms of collision checking.

Black & White Exercise #3: Pendulum Ride

This is a fairly simple demonstration of translation and rotation. I simply used those techniques to create a very simple representation of the theme-park “pendulum” style rides. The square, line, and circle all rotate in unison, while the two ‘legs’ remain stable. In the ride this is representing, the passengers would be seated in the black portion of the circle.Screen Shot 2014-11-04 at 7.49.27 AM Pendulum in the bottom most position. Screen Shot 2014-11-04 at 7.49.52 AM Pendulum in the top most position. I also tried to add some audio, so that you could hear the ‘passengers’ screaming with delight as they spun around…but that feature is not quite up and running yet.