Tag Archives: particle systems

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!

Post-Mortem: Particle Synth

Unfortunately I have been unable to get my project to work outside of Java; however, I did manage to create a synthesizer that I am actually happy with and think could be used to improvise or compose some electronic music. In addition to tweaking the audio and game feel, one feature I implemented was color-changing particles. The particles change color depending on what note they are playing with the synthesizer. In addition to looking way better, it offers the user some visual feedback to the individual notes present in the sound they are generating. sketch   I would like to implement some sort of fx engine that could take this game to the next level. I would love to be able to trigger delays by shaking the tablet, and watch them be visualized as duplicates of the particles scatter off into the distance. Alternatively, I could see a reverb working well here, with rings that spread out from the particles. sketch   All in all, the project has inspired me to work more with code in my own artmaking. I am really interested in the ramifications of musical tools that double as visualizers. In the modern world, visuals are a big part of musical performance, and I wonder if it would be possible for artists of the future to work with realtime art and music in some sort of hybrid way. The experience would be uniquely different than the status quo. Perhaps we would lose something from pure music and something from pure art, but the hybrid could generate new visual and sonic combinations that are intimately intertwined and interesting to experience. I am bummed out that I can’t get it working on android yet. On the bright side, the project has gotten me interested in learning more powerful languages and developing this concept out further. So that is what I will be looking towards next.  

Conference Project Post #2: Particle Synth

I decided to look into Beads for audio generation within Processing. From the early stages of prototyping my seeking particle system (shown below), I found that I craved some sort of sound-representation of the particle motion onscreen; rather than designing sound first and then adding visuals, I decided I would generate audio based on visuals.  I had the initial idea that I could use Beads to generate individual sine waves (and a series of harmonics) for each particle onscreen, and map the frequency of the sine wave to be based on the position of the particle from left to right. sketch   This ended up being less musical than I was hoping. Lots of different frequencies generated together sounds like wind or surf (and synthesizers use noise generators to accomplish the synthesis of these sounds). I was hoping for something a bit more musical, and I was hoping to be able to distinguish pure notes.  I brainstormed a bit and then realized if I divided the screen up into sections, I could form a musical keyboard over the screen, and if I tweaked the harmonic relationships of the sections, I would be able to generate harmonies between the particles, even if they were far apart. 20141208_191610   This ended up working better than I expected! I began at this point to tweak what I had in order to obtain a game feel I was happier with. I was also playtesting from the perspective of wanting it to be a viable instrument… An instrument you could play with and get lost in, or that someone might want to sample from.

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

Conference Project Post #1: Particle Synth

1 This is the initial sketch I drew after we experimented with hider/seekers using vectors. I wanted to experiment with lots of particles seeking around a central point. I began trying to implement seeking into a particle system, and this was the first program that came of that: sketch2 Around the same time I was thinking about various ways to visualize sound and sound processors in a visual environment: 2 I decided to look into audio generation in processing because I figured that there would be some way to generate audio in real time. I was chasing after the idea that I could either affect the audio with the visuals, or the visuals with the audio.

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

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.