How to create a painting brush?


I’m in the process of creating an app in which you take a song as an input, and in real-time the app will paint a painting using the song.

But I’m having a problem with getting a nice looking brush. I started out using just a circle, which had a velocity and moved over the canvas. As long as the velocity was slow, it looked ok. But as soon as the speed increases, you will see that it’s just circles making the trail of paint.

So instead, I made two circles, one in the previous point, and one in the current. Between the two, I made a rectangle. This worked out ok, but sometimes the rectangle wouldn’t be printed out right. And now I want to control the trail even more, and it’s beginning to get troublesome getting it all to work.

Does anyone have any suggestions on how one could do it? I would be easier just to draw lines between the points, but I can’t get the thickness to work as I want.


Yes, the problem is that the distance between the centres of the circles is greater than the combined radii of the circles. The addition of the rectangle will help, but still leave unrealistic looking straight lines along the “paint line”.

I’d recommend looking at these two projects, both of which have their respective source code available:

  1. Laser Tag by Graffiti Research Lab and Theo Watson



Laser tag will show you how to create paint-like lines, but you don’t have to make them as big as a skyscraper if you don’t want.

  1. Body Paint by MSAVisuals

which uses

To create it’s paint like effects. It’s not as directly line related as Laser Tag, but Memo said it was OK to tell you about it and I think it’s relevant.



Thank you, I will take a deeper look on it tonight =)

Thank you for sharing those link. I my self been wondering how to do this.

Ok, I looked into the code yesterday, but I can’t really say I completely understand it :stuck_out_tongue:

It seems that it is what I’m looking for though. But if I have two coordinates on the canvas I want to paint between, and know the size of the brush, how do I apply the paint? I guess I can try to get more into it, but a hint would be very appreciated =)

Hi kaparn,

Glad you found the links useful. Could you post the bit of code you are finding difficult to understand?

I recommend starting off analysing what happens in the Laser Tag testapp:setup, update and draw functions - this is where the “overview” of the main logic of the program will be revealed.

Another thing that I find useful is sketching a diagram of the objects and how they call each other.

Hope this helps.


Well, I have implemented it in my project, and I get visuals. Now I’m trying to get what I want :stuck_out_tongue:

As one can see in the picture, I get a very clean line with a big glow around it. I rather have a bigger line, and a very discrete glow.
I have experimented with

fluidSolver.setup(30, 30);
fluidCellsX = 40;
in ::setup(), and it seems that fluidCellsX in some way control the size of the glow?

So, my question is simply, how do I move from here to get a nice visual of something that resemble paint? =)

Hey kaparn,

Glad you are making progress. Unfortunately for us, there isn’t a “make paint” function in OpenFrameworks. (-;

I’d really advise getting a bit deeper into Memo’s paint simulator, or Laser Tag. Beyond just the initial functions, and into the guts of the program itself.

Think about what qualities of paint you want to simulate - gloopyness? Shinyness? Mixing of colours? Perhaps try to think about how you would make those effects in Photoshop manually, and then think about how you’d automate that process.

Another thing that helps me is to sketch a story board of how I want the interaction to be - that often helps to prioritise development in one direction or another.

Hope this helps,