こんにちは、lisです！
最近「p5.js」というjavascriptのライブラリで、お絵かきするのにハマっています。
めっちゃ楽しいので、もっとみんなに遊んで欲しい……！
p5.jsってなに？
元はProcessingという、簡単に言うとアートやデザインをプログラミングでできるプログラミング言語があります。
これをjavascriptで使えるようにしたライブラリが、p5.jsです。
javascriptなのでブラウザで動かしたり、HTMLに組み込んだりもできちゃいます。
またキーボードやマウス、カメラなど色々なところからも入力をすることもできます。
なので例えば「マウスポインタの位置によって動く作品」のようなものも作れます。
p5.jsでこんなものも作れる
どんなものが作れるのか？というのを見れば興味が湧くのではないでしょうか？
引用: https://openprocessing.org/sketch/1447203
引用: https://openprocessing.org/sketch/988880/
p5.jsの始め方
色々とやり方はあります。
やりかた1: Webエディタで試してみる
これが1番簡単な方法です。
p5.js公式様が用意しているWebエディタで試せちゃいます。
やりかた2: PCローカルで試す
普通のWebページ(HTML×javascript)を作ってPCのローカル環境で動かすこともできます。
ダウンロードページの「Single Files」から
- p5.js
- p5.min.js
- CDN
を選んで組み込んであげればOKです。
ぼくは下記のような環境を作ってローカル環境で遊んでいます。
- Node.js
- VSCode
- VSCode拡張: Live Server
やりかた3: OpenProcessingに登録する
OpenProcessingという、p5.jsのコミュニティ的サイトがあります。
ここでは作品をアップロードしたり、他の人が公開した作品を見たりすることができます。
作品数は少ないですが、ぼくもここに登録しています！
「p5.jsでこんなものも作れる」では、このサイトから作品を引用させてもらいました(しれっと自分のも入れました)。
自分で作らなくても、人の作品を見ているだけでも楽しいのでオススメです。
作品もですが、コードも見ることができるので「これどうなってるんだ？」と思ったら、直接コードを見て勉強することもできます。
p5.jsでお絵かきする簡単なサンプルコード
「実際の所、作るの難しいんじゃないの？」
と思われるかも知れないので、ここで簡単なサンプルです。
function setup() { createCanvas(400, 400); background('#FFF'); } function draw() { noStroke(); fill('#F00'); rect(30, 50, 50, 300); fill('#0F0'); circle(width/2, height/2, 100); fill('#00F'); triangle(300, 100, 250, 200, 350, 300); stroke('#F0F') line(10, 10, 300, 50); }
setup()は、最初の1回だけ呼ばれます。ここで初期設定をする感じ。
ここで出てくる関数は
- createCanvas(): キャンバスを作成(絵を描くところ)
- background(): キャンバスの背景を設定
draw()は一定周期で無限に呼ばれて、ここのコードに沿って描画をしてくれます。
ここで出てくる関数は
- noStroke(): 枠線なしに設定
- stroke(): 枠線の色を設定
- fill(): 図形の塗りつぶし色を設定
- rect(): 四角形を描画
- circle(): 円を描画
- triangle(): 三角形を描画
- line(): 線を描画
色の設定は16進数のカラーコードを指定しています。
図形は座標やサイズを設定することで指定しています。
p5.jsのリファレンス
p5.jsのリファレンスです。
公式(英語)
日本語リファレンスをQiitaに掲載している方がいるので、これも見るとわかりやすいです。
あとがき
p5.jsでアートして楽しもうでした！
最近めっきりハマってこればかりやっています。
諸先輩方のカッコいい綺麗なアート作品を見ていると「作ってみてぇ……」と思いつつもスキルと発想力が追いついてない感が否めません。
もっと色々やりたい！
