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

SpookyPaint

back


  Uploaded Image: spooky.jpg

Squeakのペイントツールはお絵かきしようとすると
いろいろとしたくても出来ないこと多くて困っちゃうです。
でもSqueakで思い道理に絵が描きた〜い!!
誰も作ってくれないんなら自分で作ればいいんだろうけど
これがなかなかできることじゃない。
でもちょっとづつ挑戦してれば、いつか出来ちゃうんじゃないの?<おいおい。
で、はじめちゃったわけね。だって、愚痴言ってるよりましじゃん。
まだあるのかないのかわかんないペイントツールなんで
SpookyPaintと命名。<いつのまにか消えてなくなるんじゃないだろうな?
さてどうなることやら。ってことでテストテスト。



ソースコードを順番にドゥ〜イットしてみてください。
Alt + d ( Cmd + d )


●キャプチャ用にスケッチ・モーフを用意しました。
これをドゥ〜イットして適当なところに置いて
キャプチャ用にしちゃってくださいませな。
--------------------------------------------
fc _ HTTPSocket httpGif: 'http://www.languagegame.org:8080/zoo/uploads/smple2.gif'.
sk _ SketchMorph withForm: fc .
sk openInHand.
--------------------------------------------



■テストの準備

メインスケッチモーフ
まずメインのスケッチモーフを出すです。
普通なら何もかかれてない白紙が出てくるんでしょうが
テストなんでキャプチャを取った状態で出すです。
カーソルが「 に変わるのでサンプル画像をドラッグ選択。
メインスケッチモーフがマウスにくっついてくるんで
適当な場所に置いときまする。
--------------------------------------------
scale _ 1.
penWidth _ 5.
f1 _ Form fromUser.
c1 _ FormCanvas extent: f1 extent.
c1 paintImage: f1 at: 0@0.
sk1 _ SketchMorph withForm: c1 form.
sk1 openInHand.

--------------------------------------------


拡大スケッチモーフ
この拡大スケッチモーフは後で絵の一部を拡大して編集するのに使います。
メインスケッチモーフの一部をドラッグ選択。
選択した矩形が点線で表示され、拡大スケッチモーフがマウスにくっついてくるです。
メインスケッチモーフのそばにでも置いてて下され。
でた状態では等倍になってまする。
--------------------------------------------
r0 _ Rectangle fromUser.
r1 _ PolygonMorph new openInWorld.
verts _ r0 corners.
r1 setVertices: verts.
r1 borderWidth: 1.
r1 color: Color transparent.
r1 borderColor: Color black.
r1 dashedBorder: {5. 5. Color white. 0. 1}.
sk1 addMorph: r1.
nowPt _ sk1 position - r1 position.
c2 _ FormCanvas extent: r1 extent.
c2 paintImage: c1 form at: nowPt.
sk2 _ SketchMorph withForm: c2 form.
sk2 openInHand.

--------------------------------------------




■お絵かきお絵かき

お絵かき
ではさっそくメインスケッチモーフにお絵かきしてみるです。
色とペンの太さを決めます。
メインスケッチモーフの枠内でドラッグすると絵が描けるです。
右クリックすると終了ね。
--------------------------------------------
| col fd lastPt str |
col _ Color fromUser.
str _ FillInTheBlank request: 'ペンの太さ' initialAnswer: '5'.
str = '' ifTrue:[^nil].
penWidth _ str asInteger.
[Sensor anyButtonPressed] whileFalse.
fd _ FormCanvas on: Display.
[Sensor yellowButtonPressed] whileFalse: [
	lastPt _ Sensor cursorPoint.
[Sensor redButtonPressed] whileTrue:[
	nextPt _ Sensor cursorPoint.
		fd line: lastPt to: nextPt width: penWidth color: col.
		c1 line: (lastPt - sk1 position) to: (nextPt - sk1 position) width: penWidth color: col.
		lastPt _ nextPt.].
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.
Display restore.]

--------------------------------------------


色塗り
メインスケッチモーフで色塗りでする。
色を決めます。
カーソルが+になるのでメインスケッチモーフの色を変えたい部分を
クリックすると色が塗れまする。(ゆっくりクリックでする)
--------------------------------------------
| col interiorPoint |
col _ Color fromUser.
Cursor crossHair showWhile:
	[interiorPoint _ Sensor waitButton - sk1 position].
Cursor execute showWhile:
	[c1 form shapeFill: col interiorPoint: interiorPoint].
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.

--------------------------------------------


コピー
メインスケッチモーフの一部をドラッグ選択します。
マウスにコピースケッチモーフがくっついてきます。
これをメインスケッチモーフ内のペーストしたいところに置きます。
--------------------------------------------
r3 _ Rectangle fromUser.
c3 _ FormCanvas extent: r3 extent.
c3 paintImage: c1 form at: ( sk1 position - r3 origin).
sk3 _ SketchMorph withForm: c3 form.
sk3 openInHand.

--------------------------------------------


ペースト
切り取ったコピースケッチモーフをメインスケッチモーフにペーストします。
ペーストしてもメインスケッチモーフの上に置いたコピースケッチモーフは
そのままありますから、位置を変えて何度でも試せるです。
使わない場合はメインスケッチモーフのそばにおいて置けばいいかにゃ。
--------------------------------------------
c1 paintImage: c3 form at: (sk3 position - sk1 position).
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.

--------------------------------------------


色塗り
コピースケッチモーフのある部分の色を変えたり
透明にしたりしまする。
透明にする場合はカラーパレットの右下にある「Trans」を選びます。
--------------------------------------------
| col interiorPoint |
col _ Color fromUser.
Cursor crossHair showWhile:
	[interiorPoint _ Sensor waitButton - sk3 position].
Cursor execute showWhile:
	[c3 form shapeFill: col interiorPoint: interiorPoint].
sk3 form: c3 form.

--------------------------------------------


トレイルブラシ
コピースケッチモーフの画像をブラシにしてトレイル・ペイントするです。
ruleの値をいろいろ変えるといいかも。
--------------------------------------------
| col fd lastPt |
col _ Color red.
penWidth _ 2.
bf _ FormCanvas extent: c1 extent.
[Sensor anyButtonPressed] whileFalse.
fd _ FormCanvas on: Display.
[Sensor yellowButtonPressed] whileFalse: [
	lastPt _ Sensor cursorPoint.
[Sensor redButtonPressed] whileTrue:[
	nextPt _ Sensor cursorPoint.
		fd line: lastPt to: nextPt width: penWidth color: col.
		bf image: c3 form at: (nextPt - sk1 position) sourceRect: (0@0 corner: c3 extent) rule: 7.	
		lastPt _ nextPt.].
c1 paintImage: bf form at: 0@0.
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.
Display restore.]

--------------------------------------------


フォームブラシ
ついでにフォームでブラシを作ってみます田。
これもruleを変えてみてちょんまげ。
--------------------------------------------
| str |
col _ Color fromUser.
str _ FillInTheBlank request: 'ブラシサイズ' initialAnswer: '5'.
str = '' ifTrue:[^nil].
dotSize _ str asInteger.
brush _ FormCanvas extent: dotSize @ dotSize.
brush fillOval: (0@0 corner: brush extent) color: col.
bf _ FormCanvas extent: c1 extent.
[Sensor anyButtonPressed] whileFalse.
fd _ FormCanvas on: Display.
[Sensor yellowButtonPressed] whileFalse: [
	lastPt _ Sensor cursorPoint.
[Sensor redButtonPressed] whileTrue:[
	nextPt _ Sensor cursorPoint.
		fd line: lastPt to: nextPt width: 2 color: col.
		bf image: brush form at: (nextPt - sk1 position) sourceRect: (0@0 corner: bf extent) rule: 7.	
		lastPt _ nextPt.].
c1 paintImage: bf form at: 0@0.
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.
Display restore.]

--------------------------------------------




■拡大スケッチモーフ

倍率を変える
拡大スケッチモーフは今、等倍ですから倍率を変えてみるです。
2〜8倍くらいにしておいてちょんまげ。
元に戻すときは「1」でいいかんね。
--------------------------------------------
| str |
str _ FillInTheBlank request: 'スケール' initialAnswer: '1'.
str = '' ifTrue:[^nil].
scale _ str asInteger.
r1 extent: r0 extent / scale.
nowPt _ sk1 position - r1 position.
c2 _ FormCanvas extent: r1 extent.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.

--------------------------------------------


スクロール
編集領域をドラッグスクロールでする。
それにあわせて拡大スケッチモーフの表示部分もスクロールするです。
(とほほなところは、一瞬メインスケッチモーフが浮きそうになるところ・・・)
--------------------------------------------
[Sensor anyButtonPressed] whileFalse.
[[Sensor anyButtonPressed] whileTrue:[
	World activeHand dropMorphs.
	r1 center: Sensor cursorPoint.
	nowPt _ sk1 position - r1 position.
	c2 fillColor: Color gray.
	c2 paintImage: c1 form at: nowPt.
	sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
	sk2 form: sc]]fork.

--------------------------------------------


お絵かき
拡大スケッチモーフにお絵かきしてみるです。
描き終わるとメインスケッチモーフに反映されるです。
--------------------------------------------
| col fd lastPt str |
col _ Color fromUser.
str _ FillInTheBlank request: 'ペンの太さ' initialAnswer: '5'.
str = '' ifTrue:[^nil].
penWidth _ str asInteger.
[Sensor anyButtonPressed] whileFalse.
fd _ FormCanvas on: Display.

[Sensor yellowButtonPressed] whileFalse: [
	lastPt _ Sensor cursorPoint.
[Sensor redButtonPressed] whileTrue:[
	nextPt _ Sensor cursorPoint.
	lpt _ ((lastPt - sk2 position) // scale) + (r1 position - sk1 position).
	npt _ ((nextPt - sk2 position) // scale) + (r1 position - sk1 position).
		fd line: lastPt to: nextPt width: penWidth * scale color: col.
		c1 line: lpt to: npt width: penWidth color: col.
		lastPt _ nextPt.].
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.
Display restore.]

--------------------------------------------


色塗り
拡大スケッチモーフで色塗り塗り。
--------------------------------------------
| col interiorPoint |
col _ Color fromUser.
Cursor crossHair showWhile:
	[interiorPoint _ ((Sensor waitButton - sk2 position) // scale) + (r1 position - sk1 position)].
Cursor execute showWhile:
	[c1 form shapeFill: col interiorPoint: interiorPoint].
sk1 form: c1 form.
c2 paintImage: c1 form at: nowPt.
sc _ c2 form magnify: c2 form boundingBox by: (1@1 * scale).
sk2 form: sc.

--------------------------------------------







下の入力ボックスに書き込んで”add to the page”ボタンで登録出来ます。
修正したい場合はページ左のアイコンの”edit”で出てくる画面で編集可能です。
ページ左のアイコンの”uploads”で画像(JPEG,GIF,PNG)のアップロードもできます。



Sunday, 11 July 2004, 5:11:40 am
道は果てしなく遠そうだすな・・・やれやれ。--thoru

Link to this Page