提供：Japanese Scratch-Wiki
ペンで図形を描画するテクニックは、100%penのプロジェクトにおいて特によく使われるペンブロックにおけるテクニックである。本稿においては、基本的な図形描画の方法を述べていく。また、この項で紹介するテクニックを100%penの作品で使う場合、「再描画せずに実行する」のチェックボックスにチェックを入れて使う場合が多い。
円
弾幕における弾、物理エンジンにおけるボール、プラットフォーマーにおける自機、細かいところでは読み込み中を知らせる回転アイコンなどに使用される。
塗りつぶされていない円
三角関数を利用する方法と、() 歩動かすブロックを使用する方法がある。
三角関数を利用する方法
単位円による三角関数の証明をプログラムに落とし込むという方法である。
プログラム例
[θ v]を[0]にする (360)回繰り返す x座標を((((θ)の[cos v]::operators) * (半径)) + (中心のx座標))、y座標を((((θ)の[sin v]::operators) * (半径)) + (中心のy座標))にする ペンを下ろす [θ v]を(1)ずつ変える end ペンを上げる
() 歩動かすブロックを使用する方法
直径(前述の例と同じ条件で試行するなら半径の2倍)から円周率の近似値を用いて円周を求め、『高精度の「(円周)角形」』を描くことで円に非常に近い多角形を表示するという方法である。
プログラム例
[円周（メモ用） v]を(((3.1415)/((半径) * (2)))を四捨五入)にする//「3.1415」は円周率の近似値。より近づけてもよい。 x座標を(中心のx座標)、y座標を((中心のy座標) + (半径))にする (90)度に向ける ペンを下ろす (円周（メモ用）)回繰り返す (1)歩動かす @turnRight((360)/(円周))度回す end ペンを上げる
塗りつぶされた円
ペンブロックの仕様を利用する方法、塗りつぶされていない円を重ねる方法などがある。
ペンブロックの仕様を利用する方法
ペンを下ろすブロックは仕様上、実行されたとき下ろしたスプライトの座標を中心としてペンの太さを直径とする塗りつぶし円を描画する。その仕様を利用し描画するという方法である。
プログラム例
x座標を(中心のx座標)、y座標を(中心のy座標)にする ペンの太さを((半径) * (2))にする ペンを下ろす ペンを上げる
塗りつぶされていない円を重ねる方法
前述した、塗りつぶされていない円を徐々に小さくして重ねていく方法。
※冗長性を省くため、プログラム例中に登場する塗りつぶされていない円::customという定義には、前述の2つの方式のうちどちらかが組み込まれているものとする。
プログラム例
ペンの太さを(1)にする [半径（塗りつぶされていない円） v]を(半径（塗りつぶされた円）)にする (半径（塗りつぶされた円）)回繰り返す 塗りつぶされていない円::custom [半径（塗りつぶされていない円） v]を(-1)ずつ変える end
多角形
三角形ならば演出における破片やシューティングゲームにおける自機に、
四角形ならマス目やボタンなどに、
六角形ならパズルゲームにおける駒などに、それぞれ使われる。
塗りつぶされたn角形の描画
この項では、座標をリストによって指定することでその座標を頂点とする塗りつぶされたn角形の描画方法の例を記述する。
塗りつぶされた三角形
当記事で紹介する方法では、塗りつぶされたn角形の描画のため、方法については後述するが、塗りつぶされた三角形を使用する。そのため、先に塗りつぶされた三角形のスクリプト例を紹介する。
プログラム例
プログラムを記述する前に、この例に登場する変数についての解説を以下に記す。
(x1)//頂点1のx座標。(x2)//頂点2のx座標。(x3)//頂点3のx座標。(y1)//頂点1のy座標。(y2)//頂点2のy座標。(y3)//頂点3のy座標。(メモ用x)//メモに使用する。(メモ用y)//メモに使用する。
ペンの太さを(1)にする x座標を(x1)、y座標を(y1)にする ペンを下ろす (((((x1) - (x3)) / ((y1) - (y1)))の(atan v)::operators) + (<(y3) < (y1)> * (180)))度に向ける ((((((x1) - (x3))の(絶対値 v)::operators) * (((x1) - (x3))の(絶対値 v)::operators)) + ((((y1) - (y3))の(絶対値 v)::operators) * ((y1) - (y3))の(絶対値 v)::operators))の(平方根 v)::operators)回繰り返す [メモ用x v]を(x座標)にする [メモ用y v]を(y座標)にする x座標を(x2)、y座標を(y2)にする x座標を(メモ用x)、y座標を(メモ用y)にする (1)歩動かす end ペンを上げる
塗りつぶされたn角形
前述のとおりである。
プログラム例を記述する前に、今回紹介する例の基本的な考え方を説明する。
例えば、右の画像のような五角形12345があったとする。
その五角形を、次の画像のように線で区切る。
この線で区切られた区画を三角形に見立て、前述の方法で塗りつぶしていくことで、塗りつぶされたn角形を描画できるわけである。
※冗長性を省くため、プログラム例中に登場する塗りつぶされた三角形::customという定義には、前述の方式が組み込まれているものとする。
※当記事で紹介する方法では、塗りつぶすことのできない多角形も存在する。
プログラム例
プログラムを記述する前に、この例に登場する変数およびリストについての解説を以下に記す。
(前述の塗りつぶし三角形の項で挙げたものは略す）
(x座標格納::list):x座標が格納されている。例えば前述の例における(x1)の値が欲しいのなら((x座標格納 v)の(1)番目::list)の返り値がそれである。(y座標格納::list)//上記のx座標格納と同じく、y座標が格納されている。(処理カウント)//参照しているリストの番号を保存するカウンター。
[x1 v]を((x座標格納 v)の(1)番目::list)にする [y1 v]を((y座標格納 v)の(1)番目::list)にする [処理カウント v]を(1)にする (((x座標格納 v)の長さ::list)-(2))回繰り返す//この時参照されるリストは、y座標格納でも問題ない。 [処理カウント v]を(1)ずつ変える [x2 v]を((x座標格納 v)の((処理カウント))番目::list)にする [y2 v]を((y座標格納 v)の((処理カウント))番目::list)にする [x3 v]を((x座標格納 v)の((処理カウント)+(1))番目::list)にする [y3 v]を((y座標格納 v)の((処理カウント)+(1))番目::list)にする 塗りつぶされた三角形::custom end
よく使われる定義
上記のn角形の塗りつぶしは、そもそもあまり使われていないものであり、ペンで図形を描くなら、通常は正多角形や長方形のボタンなどが主な用途である。なので最後に、よく使われる定義を紹介して終わりとする。
塗りつぶされた長方形
定義 線分abを対角線として持つ長方形(aのx)(aのy)(bのx)(bのy) ペンの太さを(1)にする x座標を(aのx::custom)、y座標を(aのy::custom)にする (((aのy::custom)-(bのy::custom))の(絶対値 v)::operators)回繰り返す ペンを下ろす x座標を(bのx::custom)にする x座標を(aのx::custom)にする ペンを上げる y座標を((((bのy::custom)-(aのy::custom))の(絶対値 v)::operators)/((bのy::custom)-(aのy::custom)))ずつ変える//aとbでyが大きい方に1ドット動く。 end
