この記事は Qiita p5js アドベントカレンダー9日目の記事です。
これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はShapeのline()について。
line()
文字通り、canvasに線を描画するための関数です。
リファレンスより
スクリーンに線（2点間の直接の経路）を描画します。パラメータを4つだけ指定して呼び出すと、デフォルトで1ピクセルの幅で2Dの線を描画します。この幅は、strokeWeight()関数を使って変更することができます。線は塗りつぶすことができないので、fill()関数は線の色に影響を与えません。したがって、線に色をつけるには、stroke()関数を使います。（DeepL翻訳）
stroke()なんかも話題に出そうとしていたのですが、リファレンスがご丁寧でした。
ちなみにfill()とは矩形（rect()）の中の色を指定するときに使ったりします。
line()はそもそも線なので、fill()は使えないよということが書かれています。
（rect() の枠線の色を変えたいときにはstroke()を利用する）
Type
line(x1: number, y1: number, x2: number, y2: number): p5;
引数
- x1 最初の点のx座標
- y1 最初の点のy座標
- x2 終わりの地点のx座標
- y2 終わりの地点のx座標
２種類の(x, y)をつないで線を作ります。
また引数を６つ渡すと、3番目と6番目がz座標になるようです。
line(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number): p5;
どんな時に使えそうか
前日に投稿した記事でもline()を使用しています。
自分はそのうちp5で描画したものに音をのせたいと思っているのですが、
line()を使用していろんなパターンのボリュームメーターや波形が作れそうですね。
気になった挙動
ここでp5の挙動について注意点を発見しました。
function draw() {
line(0, 0, 100, 100)
stroke('red')
line(100, 0, 0, 100 )
}
上記のように書くことで、１本はデフォルトの黒。２本目は直前にstroke('red')を差し込んでいるため赤になる予定でした。
で、実行してみると。。
あれ、両方赤だ！
何が起こっているかというと、
- 色がデフォルト値の黒で１本線が描画される
- stroke('red')で「線を赤にする！」という命令が下される
- ２本目の線は赤で描画される
ここまでが1フレームの挙動です。
そして2フレーム目に入ったときにstroke()の命令が保存されているため、最初の線も赤で描画されるというものでした。
試しにsetup内でframeRate(1)を指定したところ最初の線が黒から赤に変わる瞬間がはっきりとわかりました。
function setup() {
createCanvas(600, 600);
frameRate(1)
}
片方黒にしたい（それぞれに色をつけたい）場合は、各lineの直前にstroke()を実行することで動作します。
これはstrokeWeight()（線の太さ）でも同じことです。
function setup() {
createCanvas(600, 600);
}
function draw() {
stroke('black')
strokeWeight(10)
line(0, 0, 100, 100)
stroke('red')
strokeWeight(5)
line(100, 0, 0, 100 )
}
