Categories - memo

おなじみ適当に作った星をrotate()で動かす。

rotate(45)
star(100,100,10,10,200)

rotate()の中の数字を動かすスライダーを作ってみる。
使うコマンドはvar()

var("star_rotate",NUMBER, 0,0,360)
rotate(star_rotate)
star(100,100,10,10,200)

最初のパラメータ名をrotate()に入れてやればスライダーで動かした値が反映される。
次のパラメタが変数の種類。今回は数字。続いて、初期値、最小値、最大値

varで指定出来るのは以下のとおり

var(name, NUMBER, default, min, max)
var(name, TEXT, default="hello")
var(name, BOOLEAN)
var(command, BUTTON)

例えばBOOLEANだと、

var("enable_star",BOOLEAN)
star(100,100,10,10,200,draw= enable_star)

とかして、オンオフスイッチにしてみたり、
TEXTでテキストボックス作ってみたり、

var("words",TEXT,default=u"あああああ")
font("Osaka")
text(words,0,200)

ボタンの場合はコマンドを指定するみたい。

var("make_star",BUTTON)
def make_star():
   star(100,100,100,50,200)

• translate(x,y): 図形の移動
• rotate(): 回転。通常パラメータは「度」。radians=でラジアン。
• scale(): 拡大縮小。パラメータ1つだと縦横等倍で拡大縮小。パラメータを2つつけると比率を変えられる。scale(x,y)
• skew(): 平行四辺形。パラメータ1つだとx軸方向にだけ歪む。skew(x,y)として、y軸方向も歪ませられる。

呼び出した後の全てに適用される。
連続して呼び出されるとscale()は乗算され、rotate()は加算されていく。

• 回転の軸はtransform()で指定mode=CENTER(真ん中) or CORNER(左上)
• リセットはreset()で行う。

適当な例

size(400,400)
rotate(45)
scale(0.5)
translate(-100,100)
oval(100,0,200,400)
rotate(-45)
translate(400,-100)
skew(0,45)
rect(0,0,200,100)
reset()
star(200,200)

一部分にだけ適応させたい場合はpush()とpop()で囲む。

scale(0.5)
translate(-100,100)
oval(100,0,200,400)
push()
rotate(-45)
translate(400,-100)
skew(0,45)
rect(0,0,200,100)
pop()
star(100,100)

今回は例がいつもに増して適当だった。

パスを作る方法は大きく3つ。

• oval()とかarrow()とかビルトインのshapeコマンドを使う。
• beginpath(),endpath()等を使って各座標を指定する。
• textpath()コマンドを使って文字をパス化する。

で、このパスを使って図形の切り抜きが出来る。

クリップされる側はパスでも図形でもなんでもいいみたい。
今回は適当に作ったstarをクリップしてみる。

star(100,100,100,50,200)

クリップされる側はbeginclip()とendclip()で挟む。begclip()でクリッピングパスを指定する。

beginclip(ここにパス)
star(100,100,100,50,200)
endclip()

まずテキスト。
パスはtextpath()コマンドを用いる。
日本語を使うときはクォートにuを付けてやる。
フォントを明示的に指定してやる。
パスに使うだけなのでtext()で書き出す必要は無い。

font("Osaka")
fontsize(200)
p=textpath(u"あ",0,200)

beginclip(p)
star(100,100,100,50,200)
endclip()

次、shape系。
図形を表示されない場合はdraw=Falseしてやる。

p=oval(0,0,200,200,draw=False)

beginclip(p)
star(100,100,100,50,200)
endclip()

次、パス系?。
変数=endpath()としてbeginclip(変数)してやれば良いみたい。
さらにendpath(draw=False)して図形を描画させないようにしておく。

beginpath(0,0)
lineto(200,200)
lineto(200,0)
p=endpath(draw=False)

beginclip(p)
star(100,100,100,50,200)
endclip()

四角を書く

rect(0,0,100,100)

座標の指定場所は左上と右下。
五番目のパラメータで角を丸める。

rect(0,0,100,100,roundness=0.5)

やりすぎると別の図形になってしまう。

rect(0,0,100,100,roundness=10)

Path同様fill()やstroke()で色指定できる。

nofill()
stroke(0)
strokewidth(10)
rect(0,0,100,100)

次、円を書く

oval(0,0,100,100)

座標は円が収まる四角の左上、widthのheightが同じ値ならば真円。
ずらせば歪む

oval(0,0,200,100)

次、線

line(0,0,100,100)

デフォルトのままだと背景と同色なので見えない。 stroke()で色付けてやる。

stroke(1,0,0)
line(0,0,100,100)

次、矢印

arrow(100,100,100)

座標は最初の2つ、指定場所は矢印の「矢」の先。矢印が右向きなので0,0で指定すると画面の外に出てしまう。
三番目のパラメータでwidthを決める。

矢印の種類はtype=NORMAL もしくは FORTYFIVE
type=FORTYFIVEにすると矢印が右上(45度)を向く。
座標の指定も矢印の先なので右上になる。

arrow(100,0,100,type=FORTYFIVE)

次、星。

star(0, 0)

座標は星の真ん中。続くパラメータで星の山の数、内径、外径を設定する。

star(0, 0,points=100,outer=100,inner=500)

あ、別にパラメータの指定順序がデフォルト通りなら

star(0, 0,100,100,500)

でもいいのね。
逆に指定してやれば、順序入れ替えても良いのか

star(0, 0,inner=500,outer=100,points=100)

座標を指定して線を引くことが出来る。
beginpath()で始まってendpathで終る。

試しに書いてみる。直線の場合はlineto()で座標を追加する。

beginpath(0,0)
lineto(100,100)
endpath()

これで0,0から100,100に線が引かれてるはずなんだけど見えない。
何故か。
背景色と線(というかパスの輪郭線て扱い)の色が一緒だから。
輪郭線の色はstroke()で指定してやる。

stroke(0)
beginpath(0,0)
lineto(100,100)
endpath()

カラーのモードはデフォルトでRGBなのでstroke(r,g,b,(a))を0から1の値を指定するので
黒を指定するならstroke(0,0,0)とすべきなのですが、パラメータを一つだけ指定した場合はグレー階調として扱ってくれるのでstroke(0)でも黒が指定される。

strokewidth()で線の太さを変えられる。

stroke(0)
strokewidth(20)
beginpath(0,0)
lineto(100,100)
endpath()

色の指定は

• stroke(): (輪郭)線
• background(): 背景色
• fill: パスで囲まれた内側

で行う

background(0.5,0.1,0.6)
stroke(0)
fill(1,0.5,1,0.5)
beginpath(0,0)
lineto(100,100)
lineto(100,0)
endpath()

curveto()でベジェ曲線を書ける。目的の座標は5、6番目のパラメータで曲線のコントロール座標が最初の4つ

background(0.5,0.1,0.6)
stroke(0)
fill(1,0.5,1,0.5)
beginpath(0,0)
lineto(100,100)
curveto(50,30,60,20,0,0)
endpath()

moveto()を使うと新しい開始点を作れる。
linetoと比べるとこんなかんじ

background(0.7,0.7,0.9)
stroke(0)
fill(1,0.5,1,0.5)
beginpath(0,0)
lineto(100,100)
lineto(100,0)
lineto(0,100)
endpath()

beginpath(150,0)
lineto(250,100)
moveto(250,0)
lineto(150,100)
endpath()