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.
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:
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:
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/
Make an array of particles, dust-looking.
Mouse move wipes them, like when you try to clean a very dusty surface.
Creating the 2D-array (x and y coordinates) and detecting mouse collision.
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:
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.
According to dictionary.com:
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:
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.
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.