View this PageEdit this PageAttachments to this PageHistory of this PageHomeRecent ChangesSearch the SwikiHelp Guide

funfunfun21

▲PREV　------　●　TOP　●　------　NEXT▼Uploaded Image: fmrph.jpg

準備体操っていうか画面にドット打ったりラインを描画

以前から「多角形」ってもっと楽チンに形を作るっての出来ないかなと思ってたですよ。
「モーフ妄想メモ」でもこうゆうモーフが欲し〜い！！って書いてたけどね。
なんかそれっぽいのに挑戦。でもその前にやっておかなきゃあ、いけない事がありまする。

■準備体操その１

実は「StrokeSimplifier」クラスに「flattenExample」っていうサンプルコードがあるです。
画面をドラッグして線を描くとその線の形のPlyagonMorphができるってやつ。
い〜じゃん！！これそのままパクってモーフにしちゃえ！と最初は思ったんだけどね・・・・。
とにかくブラウザ開いて「Graphics-Tools-Simplification」カテゴリの
「StorkeSimplifier」クラスを選んで「class」ボタンをクリック、
「flattenExample」のソースコードにある一行目
--------------------------------------------
StrokeSimplifier flattenExample
--------------------------------------------
をドゥーイット。
Alt + d ( Cmd + d )

Uploaded Image: image23.jpg


でやってみると確かにポリゴンになるんだけど、これじゃちょっとポイントが多すぎるですよ。

Uploaded Image: image24.jpg


これがそのソースコードね。
--------------------------------------------
flattenExample	"StrokeSimplifier flattenExample"
	"This example demonstrate how aggressive the stroke =recorder simplifies series of points"
	| pts fc lastPt nextPt |
	[Sensor anyButtonPressed] whileFalse.
	fc _ FormCanvas on: Display.
	pts _ self new.
	lastPt _ Sensor cursorPoint.
	pts add: lastPt.
	[Sensor anyButtonPressed] whileTrue:[
		nextPt _ Sensor cursorPoint.
		nextPt = lastPt ifFalse:[
			fc line: lastPt to: nextPt width: 3 color: Color black.
			pts add: nextPt.
			lastPt _ nextPt.
		].
	].
	pts closeStroke.
	(PolygonMorph vertices: pts finalStroke 
			color: Color transparent 
			borderWidth: 3 
			borderColor: Color black) 
			makeOpen; addHandles; openInWorld.
--------------------------------------------

■準備体操その２

てなわけでマウスドラッグで仮のラインを描画させるんじゃなくて
マウスクリックで仮の点を描画していってその点を結んだ形が
ポリゴンモーフになるって感じにしたいわけよ。
まずはテストするんでもうひとつ「WorkSpace」出してみるです。

Uploaded Image: image16.jpg


●まずは画面上に点を打っていくってやつね。
Workspaceに下記のコードを書いてドゥーイット。
Alt + d ( Cmd + d )
--------------------------------------------
| pt |
flag _ true.
[flag] whileTrue:
	[Sensor waitButton.
	 Sensor redButtonPressed ifTrue: [
		pt _ Sensor waitClickButton.
		(Form dotOfSize: 8) displayAt: pt.]
	ifFalse: [flag_false]
	]
--------------------------------------------

Uploaded Image: image17.jpg


左クリックすると点を描画しまする。（ゆっくりとマウスダウンしないとダメだよん）
右クリックで終了でする。「ワールド」メニューの「ディスプレイを再表示」で消せるよん。

Uploaded Image: image18.jpg



●お次は画面にラインを描画していくってやつね。
Workspaceに下記のコードを書いてドゥーイット。
Alt + d ( Cmd + d )
--------------------------------------------
| fc lastPt nextPt |
fc _ FormCanvas on: Display.
lastPt _ Sensor waitClickButton.
flag _ true.
[flag] whileTrue:
	[Sensor waitButton.
		Sensor redButtonPressed ifTrue: [
		nextPt _ Sensor waitClickButton.
		fc line: lastPt to: nextPt width: 1 color: Color red.
		lastPt _ nextPt]
	ifFalse: [flag_false]
	]
--------------------------------------------

Uploaded Image: image19.jpg


左クリックしていくとラインを描画しまする。（ゆっくりとマウスダウンしないとダメだよん）
右クリックで終了でする。「ワールド」メニューの「ディスプレイを再表示」で消せるよん。


Uploaded Image: image20.jpg


●最後にうえの２つのやつ（点とライン）を組み合わせるよん。
Workspaceに下記のコードを書いてドゥーイット。
Alt + d ( Cmd + d )
--------------------------------------------
| fc lastPt nextPt |
fc _ FormCanvas on: Display.
lastPt _ Sensor waitClickButton.
(Form dotOfSize: 5) displayAt: lastPt.
flag _ true.
[flag] whileTrue:
	[Sensor waitButton.
		Sensor redButtonPressed 
	ifTrue: [
		nextPt _ Sensor waitClickButton.
		(Form dotOfSize: 5) displayAt: nextPt.
		fc line: lastPt to: nextPt width: 1 color: Color red.
		lastPt _ nextPt]
	ifFalse: [
		flag_false]
]
--------------------------------------------

Uploaded Image: image21.jpg


左クリックしていくと点とラインを描画しまする。（ゆっくりとマウスダウンしないとダメだよん）
右クリックで終了でする。「ワールド」メニューの「ディスプレイを再表示」で消せるよん。


Uploaded Image: image22.jpg


おっしゃ！！準備体操はおしまい。お次はこれを使ってモーフを作るです。
▲PREV　------　●　TOP　●　------　NEXT▼







■　MEMO　■
Monday, 16 February 2004, 4:07:46 am
penを使って「shapeFromPen」でポリゴンモーフを作るってのがあってこれもおもろいですな。--thoru

Drawing a Hilbert Curve

Links to this Page