Tag Archives: adjective

Adjective – Dusty – Final

A dusty surface. The user must feel it not only from its visual aspect, but also from the interaction. Dragging the fingers over it should clear the surface, just like real-life dust.
Since it’s a concrete adjective, i.e., based on a physical simulation, I think that two main aspects of the project must work in order to get the desired effect.

1. Visual
It’s hard to display dust. In most occasions, the color it seems to have actually depends on the background color. I tested some different combinations for background and foreground:

Screen Shot 2013-10-01 at 12.04.06 PM Screen Shot 2013-10-01 at 12.03.02 PM Screen Shot 2013-10-01 at 12.01.08 PM Screen Shot 2013-10-01 at 12.36.47 PM

In the end, the white background with light-brown particles worked best.
In addiction, I changed the particles distribution to make it feel more natural. The dust density increases from the boundaries to the center:

Screen Shot 2013-10-01 at 1.18.47 PM

2. Interaction
In relation to the first prototype, I added the multitouch add-on. I did it because I had the impression that the interaction didn’t “feel” like dust without it.

I didn’t like the result, though, and didn’t keep it.
Nevertheless, there was a positive side: I found out  that I could get the touch size, instead of having a fixed mouse radius:

That feature took the app closer to an analog experience. It made it seem more like a finger drawing movement than a digital mouse-mouve interaction.

Source code here.

Original post: http://codeforart.cc/project-descriptions/dusty-final/


Adjective – Dusty – Prototypes

Make an array of particles, dust-looking.
Mouse move wipes them, like when you try to clean a very dusty surface.

First prototype
Creating the 2D-array (x and y coordinates) and detecting mouse collision.

Second prototype
Repelling the particles. I’ve never done a script like this before, but it worked out well! I only needed to figure out the sin/cos/atan2 thing all over again:


Third prototype
I added more particles and a third position to the array, to store a random opacity.
Turns out this app makes a really cool effect to draw. I haven’t think of that when I first had this idea. Typographic experiments:

Technical details: I had problems trying to hide the cursor. Looks like “ofHideCursor()” doesn’t work on Mac OSX. I found this code and it worked perfectly: http://forum.openframeworks.cc/index.php?topic=336.0

I like the repelling effect, but I am not sure if it makes it feel like dust. Also, I could not add the Multitouch feature, I still have no idea of how to do it.

Original post

Adjective – Dusty

According to dictionary.com:
Dust-y [duhs-tee]
adjective, dust·i·er, dust·i·est.
1. filled, covered, or clouded with or as with dust.
2. of the nature of dust; powdery.
3. of the color of dust; having a grayish cast.

I want to make a simulation of a surface being covered with dust. As time goes by, the screen will be filled with little particles:

projectProposal_adjective_dusty_01 projectProposal_adjective_dusty_02 projectProposal_adjective_dusty_03 projectProposal_adjective_dusty_04

The mouse interaction “clears” an area, though the particles keep present in its boundaries. Once the mouse is released, the area starts to be covered with dust again. It also allows for multitouch interaction.

Technical hurdles
The main interaction seems simple. The only problem may be the multitouch feature. Also, I would like to get the touch area, not a single mouseX and mouseY coordinate. I know a Processing library that do that, but I have no idea of how to make it using openFrameworks.

Original post