HOME | DD

Description
You can change brush properties while the mouse button is down, by the way.

This is an example of high-end brush programming for Flash. Unlike most applets, this one keeps the brush dots spaced evenly so they don't overlap awkwardly. The results are more similar to Photoshop's brushes than an oekaki applet.

How it's done:
Painting is done by putting a bunch of dots where the mouse moves.
The dot is a bitmap of a blurred circle. The bitmap size is (brushRadius+blurRadius)*2. To make the circle, the program tests each pixel in the bitmap and measures its distance from the middle pixel using the pythagorean theorem (X distance squared + Y distance squared = the square of the distance). If the pixel's distance is equal to or smaller than the brushRadius, it's colored black. A blur is then applied. Flash has a bitmap blurring method, but I do it manually by averaging pixels. (it's a little hard to explain)

The canvas is also a bitmap. As you brush, the dot bitmap is added to the canvas bitmap over and over. For transparency, there is an extra canvas bitmap that receives each stroke and places it on the bottom canvas with the desired opacity.

Dot spacing can be customized, but here it's set at .4 of the dot radius. When you click, it adds a dot, then when you drag, it measures the distance between the mouse and the last dot. (distance is measured with the pythagorean theorem - X squared + Y squared equals the square of the distance) If the distance is equal to or greater than the chosen dot spacing, a new dot is placed under the mouse.

Each pixel you move over is tested for distance instead of just given a new dot.

When you move the mouse quickly, it can cross multiple pixels in one frame, so the applet has to add multiple dots along the mouse path. It tests each pixel in the mouse path just like it tests the pixel under the mouse when you're moving slow. It always keeps the position of the last dot added in the stroke so no dots overlap incorrectly.

Description
You can change brush properties while the mouse button is down, by the way.

This is an example of high-end brush programming for Flash. Unlike most applets, this one keeps the brush dots spaced evenly so they don't overlap awkwardly. The results are more similar to Photoshop's brushes than an oekaki applet.

How it's done:
Painting is done by putting a bunch of dots where the mouse moves.
The dot is a bitmap of a blurred circle. The bitmap size is (brushRadius+blurRadius)*2. To make the circle, the program tests each pixel in the bitmap and measures its distance from the middle pixel using the pythagorean theorem (X distance squared + Y distance squared = the square of the distance). If the pixel's distance is equal to or smaller than the brushRadius, it's colored black. A blur is then applied. Flash has a bitmap blurring method, but I do it manually by averaging pixels. (it's a little hard to explain)

The canvas is also a bitmap. As you brush, the dot bitmap is added to the canvas bitmap over and over. For transparency, there is an extra canvas bitmap that receives each stroke and places it on the bottom canvas with the desired opacity.

Dot spacing can be customized, but here it's set at .4 of the dot radius. When you click, it adds a dot, then when you drag, it measures the distance between the mouse and the last dot. (distance is measured with the pythagorean theorem - X squared + Y squared equals the square of the distance) If the distance is equal to or greater than the chosen dot spacing, a new dot is placed under the mouse.

Each pixel you move over is tested for distance instead of just given a new dot.

When you move the mouse quickly, it can cross multiple pixels in one frame, so the applet has to add multiple dots along the mouse path. It tests each pixel in the mouse path just like it tests the pixel under the mouse when you're moving slow. It always keeps the position of the last dot added in the stroke so no dots overlap incorrectly.