p5.js 描く

p5js, 公開資料
図形

円や四角形など、Processingでは図形が簡単に描画することができます。この手軽さは他のプログラミング言語ではなかなか実現が難しく、あたかもスケッチブックを取り出して、さっとラフスケッチをするようにプログラミングを用いた表現を始めることができます。

描画で重要なのは座標系の理解です。Processingでは左上が原点(0,0)となり右下に行くほど座標が大きくなります。インタラクティブに座標を確認できるツールがありますので、マウスカーソルを動かして確認してみましょう。

文字

フォントやサイズを指定して文字を描くことができます。フォント名はWebデザインのCSSと同じ表記を用いることができます。こちらを参考にしてみてください。また水平方向と垂直方向の文字揃えも指定することが可能です。

多角形

基本的な図形では描けない形は、多角形の描画を使いましょう。多角形の描画はbeginShape()で始まり、vertext()で頂点を順番に指定していき、endShape()で終わります。

endShape()のパラメーターで閉じた多角形か、開いた多角形かを設定できます。下記プログラムを変更して試してみてください。

endShape(CLOSE); // 閉じた多角形
endShape(OPEN); // 開いた多角形

Related Posts

No results found

メニュー