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

new.gif NEW Tutorial:

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

Natural Language

 

MAXScript

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

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 green 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 paintBrush 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

 

MicroPaint_Step3.gif

 

 

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