How To ... Develop a Bitmap Painting Tool - Brush Size and Color

In this step of the Bitmap Painting tool development, we will add brush color and size controls.

NATURAL LANGUAGE

We will extend the existing MacroScript by adding new UI controls to the rollout to define the Ink color and the Brush Size.

The paintbrush function will be changed to use the color defined by the UI color picker.

The drawStroke function will be enhanced to draw a large rectangle based on the defined size.

SCRIPT:

   macroScript MicroPaint category:"HowTo"
   (
   global MicroPaint_CanvasRollout
   try(destroyDialog MicroPaint_CanvasRollout)catch()
   local isDrawing = false
   local bitmapX = bitmapY = 512
   local theCanvasBitmap = bitmap bitmapX bitmapY color:white
   local currentPos = lastPos = [0,0]

   rollout MicroPaint_CanvasRollout "MicroPaint"
   (
     bitmap theCanvas pos:[0,0] width:bitmapX height:bitmapY bitmap:theCanvasBitmap
     colorpicker inkColor height:16 modal:false color:black across:2
     spinner BrushSize"Size"range:[1,50,10] type:#integer fieldwidth:40

     fn paintBrush pos = (setPixels theCanvasBitmap pos #(inkColor.color))
     fn drawStroke lastPos pos =
     (
       currentPos = lastPos
       deltaX = pos.x - lastPos.x
       deltaY = pos.y - lastPos.y
       maxSteps = amax #(abs(deltaX),abs(deltaY))
       deltaStepX = deltaX / maxSteps
       deltaStepY = deltaY / maxSteps
       for i = 0 to maxSteps do
       (
         for b = -BrushSize.value/2 to BrushSize.value/2 do
           for c = -BrushSize.value/2 to BrushSize.value/2 do
             paintBrush (currentPos + [c,b])
         currentPos += [deltaStepX, deltaStepY]
       ) 
       theCanvas.bitmap = theCanvasBitmap
     )
     on MicroPaint_CanvasRollout lbuttondown pos do
     (
       lastPos = pos
       isDrawing = true
       drawStroke lastPos pos
     )
     on MicroPaint_CanvasRollout lbuttonup pos do isDrawing = false
     on MicroPaint_CanvasRollout mousemove pos do
     (
       if isDrawing do drawStroke lastPos pos
       lastPos = pos
     )
   )
   createDialog MicroPaint_CanvasRollout bitmapX (bitmapY+30)
   )

Step-By-Step

--Code in italic has no changes since the previous version. macroScript MicroPaint category:"HowTo"
(
global MicroPaint_CanvasRollout
try(destroyDialog CanvasRollout)catch()
local isDrawing = false
local bitmapX = bitmapY = 512
local theCanvasBitmap = bitmap bitmapX bitmapY color:white
rollout MicroPaint_CanvasRollout "MicroPaint"
(
bitmap theCanvas pos:[0,0] width:bitmapX height:bitmapY bitmap:theCanvasBitmap colorpicker inkColor height:16 modal:false color:black across:2

This is the color picker which will be used to define the color of the paintbrush.

Colorpicker

spinner BrushSize "Size" range:[1,50,10] type:#integer fieldwidth:40

This spinner will define the size of the paintbrush.

Spinner

fn paintBrush pos = (setPixels theCanvasBitmap pos)
fn drawAPoint lastPos pos =
(
currentPos = lastPos
deltaX = pos.x - lastPos.x
deltaY = pos.y - lastPos.y
maxSteps = amax #(abs(deltaX),abs(deltaY))
deltaStepX = deltaX / maxSteps
deltaStepY = deltaY / maxSteps
for i = 0 to maxSteps do
( for b = -BrushSize.value/2 to BrushSize.value/2 do
(

This new loop will define the vertical size of the brush. It counts from minus half the size to plus half the size, full size altogether.

for c = -BrushSize.value/2 to BrushSize.value/2 do

This second loop defines the width of the paintbrush. It also loops from minus half the size to plus half the size, full size altogether.

paintBrush (currentPos + [c,b])

After each iteration of the c loop, we call our paint Brush function, passing the current position in the stroke plus the offset based on half the size of the brush and the b loop.

)
currentPos += [deltaStepX, deltaStepY]
) 
theCanvas.bitmap = theCanvasBitmap
)
on MicroPaint_CanvasRollout lbuttondown pos do
(
lastPos = pos
isDrawing = true
drawAPoint lastPos pos
)
on MicroPaint_CanvasRollout lbuttonup pos do isDrawing = false
on MicroPaint_CanvasRollout mousemove pos do
(
if isDrawing do drawAPoint lastPos pos
lastPos = pos
) createDialog MicroPaint_CanvasRollout bitmapX (bitmapY+30)

To accommodate the new User Interface controls for the color and brush size, we have to increase the vertical size of the dialog by 30 pixels.

)

Result

Previous Tutorial:

How To ... Develop a Bitmap Painting Tool - Strokes Support

Next Tutorial:

How To ... Develop a Bitmap Painting Tool - Airbrush and Shapes