チュートリアル - ビットマップペイントツールの開発 - エアブラシとシェイプ

このビットマップペイントツール開発の手順では、ツールにエアブラシオプションと、矩形および円形のブラシで描画するためのブラシシェイプのオプションを追加します。

全体の流れ:

既存のロールアウトにブラシシェイプを定義するドロップダウンリスト、エアブラシを使用可能にするチェックボタン、およびエアブラシの吹き付け強度をコントロールするための編集ボックスを追加します。

既存のコードを拡張し、エアブラシオプションについては点がランダムに描画されるようにします。

drawStroke 関数を拡張し、[サイズ](Size)の半径の円を描画できるようにします。

スクリプト:

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:4
  checkbutton airBrush "AirBrush" width:50
  spinner AirBrushSpeed "Speed" range:[0.1,50,10] fieldwidth:40
  spinner BrushSize "Size" range:[1,50,10] type:#integer fieldwidth:40
  listbox BrushShape items:#("Circle","Box") pos:[bitmapX+5,0]width:90
 
  fn paintBrush pos =
  (
    case BrushShape.selection of
    (
      1: (
        if distance pos currentPos <= BrushSize.value/2 do
          setPixels theCanvasBitmap pos #(inkColor.color)
      )
      2:  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
    (
      if airBrush.checked then
      (
        for b = 1 to (BrushSize.value / AirBrushSpeed.value) do
        paintBrush (currentPos + (random [-BrushSize.value/2,-BrushSize.value/2] [BrushSize.value/2,BrushSize.value/2] ))
      )
      else
        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+100) (bitmapy+30)
)

ステップごとの解説

--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:4

新しいコントロールを全部、最下部の横一列に自動的に配置できるように、across: パラメータを 4 に増やします。

checkbutton airBrush "AirBrush" width:50

このチェックボタンのチェックマークが付けられると、エアブラシ機能が使えるようになります。

spinner AirBrushSpeed "Speed" range:[0.1,50,10] fieldwidth:40

この値でエアブラシ機能の強度をコントロールします。

spinner BrushSize "Size" range:[1,50,10] type:#integer fieldwidth:40 listbox BrushShape items:#("Circle", "Box") width:90 pos:[bitmapx+5,0]

このリストボックスでブラシのシェイプを選択します。このコードの後のバージョンでは、ツールをさらに追加します。

Listbox

fn paintBrush pos = ( case BrushShape.selection of (

ブラシシェイプのドロップダウンリストでの設定によって、ピクセルは円形の中だけで描画されるか、または以前と同じように描画されます。

Case 式

1: (
if distance pos currentPos <= BrushSize.value/2 do
setPixels theCanvasBitmap pos #(inkColor.color)
)

円形のシェイプが選択された場合、描画する位置からブラシの中心までの距離と半径の値 (サイズを 2 で割った値) を比較します。距離が半径より短い場合にのみ、描画を行います。円形のブラシはこうして定義されます。

2: setPixels theCanvasBitmap pos #(inkColor.color)

前の手順で従来使用されていた関数です。ドロップダウンリストで 2 - [ボックス](Box)が選択された場合に使用されます。

) ) 
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
( if airBrush.checked then (

エアブラシオプションが選択されている場合、次のコードが実行されます。

for b = 1 to (BrushSize.value / AirBrushSpeed.value) do

一定の回数繰り返します。回数はブラシのサイズとエアブラシの[Speed]の値によって決まります。[Speed]の値が高いほど、ブラシのサンプル数は低くなります。

paintBrush (currentPos + (random [-BrushSize.value/2,-BrushSize.value/2] [BrushSize.value/2,BrushSize.value/2] ))

反復のたびに、ボックスブラシの左下隅と右上隅の間に点をランダムに描画します。円形のブラシが選択されている場合、上述の paintBrush 関数の新しいコードにより、点の一部がフィルタリングされ、描画されません。

)
else

それ以外の場合は、以下の従来のブラシのコードが実行されます。

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
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+100)(bitmapY+30)

カラーとブラシサイズの新しいユーザインタフェースコントロールが収まるように、ダイアログボックスの横のサイズを 100 ピクセル大きくします。

結果:

前のチュートリアル:

チュートリアル - ビットマップペイントツールの開発 - ブラシのサイズとカラー

次のチュートリアル:

チュートリアル - ビットマップペイントツールの開発 - スムーズブラシ

チュートリアル - ビットマップ ペイント ツールの開発 - エアブラシとシェイプ

ステップごとの解説

関連事項

チュートリアル - ビットマップペイントツールの開発 - エアブラシとシェイプ