1-1. タッチ位置に円を描く

このBookでは、タッチに反応して図形を描くプログラミングしていきます。タッチに合わせて動くエフェクトはとても魅力的です。表現を工夫して楽しいエフェクトを作っていきましょう。

手始めに、タッチしたところに円を描くプログラムを書きましょう。

前のBookでは実行時に1度だけ処理するdesign関数をつかいました。このBookから、design関数に加え、update関数をつかいます。 update関数は繰り返し呼ばれる関数です。呼ばれるたびにタッチの情報を更新するため、今タッチしている位置が得られます。screen.latestTouch が最新の触れた位置の情報です。

design関数に screen.clearColor = .lightGrey を書きます。背景を薄灰色に設定します。
update関数を用意します。
update関数のはじめに、screen.removeAllShapes() を書きます。一度すべての図形を消す処理です。updateは繰り返し呼ばれるので前のフレームの図形が残ります。今回は前フレームの図形を消すため、removeAllShapes()を呼びます。
let touch = screen.latestTouchを書きます。最新のタッチ情報がtouchに入ります。
PGCircle() を書きます。
PGCircle()に .position( touch.xy ) を追加します。 touch.xyはタッチ情報のxy座標が得られます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


func design( screen:PGScreen ) {
   screen.clearColor = .lightGrey
}

func update( screen:PGScreen ) {
   screen.removeAllShapes()
   
   let touch = screen.latestTouch
   
   PGCircle()
   .position( touch.xy )
}

「コードを実行」を押します。

目標

実行後、タッチした位置に丸が描けたら成功です。
(+1) PGCircle() を PGRectangle() や PGTriangle() など別の形に変えてみましょう。

終わったら次のページへ進みます。

目標#

目標