#db3.0

[If you prefer to view this design brief on a separate HTML page… click here!]

3.1

Water Type by Mr.doob is a chrome experiment that uses html5 canvas to reproduce the behavior of water. Clicking with the mouse allow you to disrupt the water, as if you were throwing a rock on its surface. You can create ripples in the water when you hit enter after having typed text. However, it could look better aesthetically in order to get away from the pixel materiality. I appreciated the animation on words as they enter into the water because it is creating believable waves. It is worth trying to fill the screen with any of the following: ( ) o c v w @.

Story Problem by Erik Loyer is an instrument that allow user to perform a poem. The narration is a strong element of this piece, and the user doesn’t have a lot of freedom when it comes to performing this poem. Time becomes a key input here, and the mouse is used to unfold words and images.The strongest element of this piece is related to its choreography, since the mouse position has an effect on melody, rhythm, volume, size, motion and color. However, it could be a lot more fun if the exact movement of the mouse could shape the words differently.

In both case, I would have loved to be able to interact more with the pieces. While the first example is lacking of interesting mouse input, the second one is critically lacking of keyboard input. The strength of Story Problem is to create a pace and atmosphere around text, while the strength of Water Type is to swallow up characters in a motion that reminds me of what you can observe when you throw a rock in a lake. Since Water Type is largely based on user-inputed text, it’s hard to decipher a true semantic embedded in its design.

3.2

View 3.2 in action

I designed a behavior for text that can break it into hundreds of particles. A user can interact with that system by using their mouse to send away particles and their keyboard to bring them back towards the center of the stage where they form the text again. This program plays on the notion of deformation that happens through the explosion of a word cast on the screen.

Launch DB 2

This interactive behavior for text has the ability to break the link between molecules that form text. It can deconstruct speech into tiny elements that are flying out and are becoming hard to catch. It is a visual representation of fragility, but it also expresses that notion of change that can modify a given situation and prevent it from going back to its starting state.

Particles are useful to represent natural phenomenons. By using particles to draw text, a visual representation of human speech, it reminds us that we are subjected to things that are greater than us.

Example of it being used in a meaningful way:

I can envision this kind of behavior being used as sub-text to critique some aspect of the society. For instance, it could be used to express disagreement with some policies of the government or to show that something, in appearances solid, is full of flaws.

How it works?

This piece was entirely designed with Processing. It uses Andale Mono in 80pt.White text is being drawn to a buffer screen. 
Then particles are being drawn on-top of that text, based on the brightness of the buffered image.

The particle class has the following properties: origin, location, size, color and velocity. It has methods to display a particle, to make it move and to reverse its direction. These different properties allowed me to attribute a different identity to each particles (mostly, a different velocity, that prevented the text to move in a block.)

3.3

View 3.3 in action

About the choreography:



The user arrives to a screen of moving particles. They bounces back when they touch the edges of the screen. The user can disrupt that movement with the mouse. The position of the mouse is used as a target for the particles. Upon click, particles go back to the center of the stage and form a word. Particles can be freed from the word they are forming by mousing over them. At any time, the user has the possibility to free the particles or to constrain them again to their original position within a word. It’s also possible for the user to erase the word on the screen and to replace it with the text of their choice.

Launch DB 3

The idea of progression was very important to me throughout the development of this piece. At first, a given user is passively contemplating the particles moving. Then, that user can disrupt the system and operate changes to make it comply to their own desire, wether it is to free all the particles from their anchor to the text, or to replace the given text with their own word(s).

Development logs (from oldest to newest):

When I started extending my work done for 3.2, I already had solved how to save text into a buffer screen and how to use it to draw a particle system on top of it. The development of 3.3. was influenced by the pre-critic we did in class last week. I tried to address all the issues that were mentioned to me, and to make it fun for the user at the same time. For more details about the code behind this applet, refer to the comments that accompany it.

Added a behavior that sets the moving mouse as target and attracts the particles close to it. This was a major development phase and it gave me interesting results. (See images below)

Added the possibility to type your own text to the screen, which kills the current particles system and replace it with a new one.

At this point, I decided to hold a quick beta-test with some friends and to ask them to provide feedback for me. They pointed a few issues to me that I addressed as following:

Added event listener for backspace, that allows user to erase text on the stage.

Fixed bug a with the top boundary of the canvas.

Enlarged the canvas.

Added color.

Changed the text displayed on screen for Apodyopsis, which means the act of mentally undressing someone.

Inspiration and References: