p5.jsを触ってみる

お久しぶりです

最近何がしたいのか迷走中ですが,JavaScriptをメインでやっています.

そんな中,思い出したのがProcessingです.一年前ぐらいにやっていて一応プロジェクトとして完了したので放置していました...

で,そのProcessing にはJavaScriptに移植されていろいろできるらしいというのを思い出し(1年前はスルーしていました),今回からJSの勉強ついでにいじっていきたいと思います.

p5.jsって

ビジュアルコーディングでおなじみのProcessingのJavaScript移植版です.

p5.jsでビジュアルコーディングしてみる:https://qiita.com/minamooon/items/c2d65a18fd36be693139

とはいえ,数式をゴニョニョいじってアート作品を作ろうという感じで,うれしいような辛いようなという感じです.

ざっと動かす

とりあえず,今回はWindows環境で試します.

いつものProcessingIDEを使えるので公式からインストーラをダウンロードします.https://processing.org/download/

インストールというか展開します.「processing.exe」を起動すると...

こんな感じ.赤枠は,無視してください.

右上のJavaと書かれたドロップダウンリストをクリックして,「モードの追加…」をクリックしてください.(もうすでにp5.jsが追加されていますが)

「p5.js Mode ~」というところをクリックしてから,右下の「Install」をクリックしてインストールします.

それで,(すでにネタバレしている)ドロップダウンリストから「p5.js」をクリックします.

こうなります.「index.html」というファイルも作成されますがあまり気にしなくてもいいと思います.(コメントの2バイト文字が化けるときは,「ファイル」->「設定」から,「エディタとコンソールのフォント」を日本語が表示できそうなものに変更すれば大丈夫です.)

 

面白みのないサンプルのコードです.

コードが入力できたら左上にある三角形の実行ボタンをクリックすれば,ブラウザが開いて円が表示されます.

遊び方

いろんな作品がアップロードされているサイト があります.OpenProcessing: https://www.openprocessing.org/

このサイトでは,コードの内容を見ることができコピペすればローカルで実行することもできます.(変なことしなければ大丈夫だと思います).

例えば,

Stardust
by Konstantin Makhmutov さんの作品https://www.openprocessing.org/sketch/529835であれば,このボタンをクリックすれば

ずらっとコードが表示されます.(とても参考になります)

 

基礎さえ終わってしまえば,後はとにかくいい作品を研究して自分のものにできればよいかと思っています.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です