p5.jsでお絵かきしよう。

p5.jsでお絵かきしよう。

こんにちは。てつです。

 

今回はProcessingのjavascript版であるp5.jsを使ってみようと思います。

Processingとはビジュアル表現に特化しているオープンソースプロジェクトで、

とても簡単なコードで描画することができます。

そのProcessingをjavascriptに移植したものがp5.jsです。

早速実践してみましょう。

 

p5.jsを使用する準備


https://p5js.org/

まずはp5.jsのサイトからダウンロードするかCDNをコピーしましょう。

今回はCDNで進めていきます。

 

次にp5.jsを書く前の下準備です。

以下の2つの関数を準備しましょう。

setup関数は最初に呼び出される関数で初期設定に関するプログラムを書きます。

draw関数はフレームごとに呼び出されるループしている関数で、描画に関するプログラムを書きます。

たったこれだけで準備はOKです!

それではお絵かきしてみましょう!

 

p5.jsで円を書いてみよう


クリックしている間だけ円が描画されるプログラムを作ってみます。

以下のプログラムを見てみましょう。

内容はコメントに書いてあるとおりですが、少し解説します。

 

まずsetup関数が呼び出されます。

createCanvasで描画範囲の大きさを指定します。

backgroundで背景色を決めます。

 

その後draw関数が実行されます。

マウスボタンの状態を監視して条件分岐します。

もしボタンが押されていたらellipseで円を描画します。

mouseIdPressedやmouseX/mouseYなどで簡単にマウスの状態を取得できるのはいいですね。

 

実行結果は以下のようになります。

See the Pen draw ellipse(p5.js) by Tetsuro Tabata (@allconnect-tt) on CodePen.

 

 

円をフェードアウトさせよう


現在のコードだと書きっぱなし状態で円でいっぱいになってしまいます。

なので書いた円をフェードアウトさせましょう。

フェードアウトは毎フレーム半透明の色を重ねていくことで表現できます。

コードと実行結果は以下の通りです。

 

See the Pen draw ellipse fadeout(p5.js) by Tetsuro Tabata (@allconnect-tt) on CodePen.

 

 

まとめ


いかがでしたか?

たった数行のコードでお絵かきできてしまいました。

皆さんも一度p5.jsでProcessingの楽しさを経験してみてください。


Previous: HTMLメール テンプレート内でPHPの変数を使うには? Next: マネージャとして日々気をつけている事

© 2017 ALL CONNECT Inc. All Rights Reserved.