パスを書く

座標を指定して線を引くことが出来る。
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()