How To - Practical Examples > How To ... Develop a Bitmap Painting Tool In Nine Easy Steps >

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

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 not 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)

In order 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

#### See Also

- "How To" Tutorials Index Page