マガジンのカバー画像

p5.jsのtips

3
本
p5.jsの役立つ情報
運営しているクリエイター
ギン

フォントを変えずにtext()を飾る

はじめにp5.jsで文字をキャンバスに表示させるにはtext()を用います。今回、このtext()で文字を表示する時に、フォントを変えずに文字の装飾をする方法を紹介します。 フォントは好みのものを用いてもらって良いです。本記事ではフォントはmacOSのデフォルトで画像を生成しています。 結合部の形 strokeJoin()text()で表示される文字の枠線の結合部（文字の角）の形は変えることができます。次のコードで説明していきます。 function setup() {

ギン

続・line()の魅力を引き出してみる

はじめに前回、「line()の魅力を引き出してみる」という記事でp5.js()のline()の特徴やそれを使ったジェネラティブ・アートの作例を紹介しました。 今回もその続きで、前回の紹介例を発展させて更にline()の魅力を引き出す方法やline()に関連するp5.jsの描画特徴を紹介していきます。 多角形の中心と頂点を結ぶ前回は多角形の頂点を外周を描くようにline()で結びました。 多角形の中心点と頂点を結ぶ線を追加してみます。単純に描く線の数が増えるので複雑な描画

ギン

line()の魅力を引き出してみる

はじめにp5.jsでクリエイティブ・コーディングをやる中でline()は、初めに学ぶ描画関数だと思います。機能はシンプルで指定した二点間に線を引くというもの。 シンプルが故に時間が経つと忘れられがちな関数だと思います。皆さんの中にもline()って最近使ってないなと思い当たる方もいるのではないでしょうか？ 今回、p5.jsのline()の性質・特徴を改めて振り返ります。更にline()の魅力を活かしたジェネラティブ・アートの作例を解説していきます。これを機会に皆さんもli

ギン