How To ... Develop a Bitmap Painting Tool

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

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

Step-By-Step

Result