背景 今回はP5.JSというProcessingというプログラミング初心者のアーティストやデザイナ―でも簡単かつ無料で使える プログラミング言語 を JavaScript に置き換えたものを使っていきます。 最終目的は次回の記事でP5.playと言うP5.JSを拡張したライブラリを使って謎解き系の ミニゲーム を作ってみたいと思っているので、P5.JSの導入と公式から提供されているお試しプログラムの動作確認など行っていきたいと思います。 導入 まずは導入から行っていきます。 導入と言っても選択肢が大きく3つで、特に何もしなくて良いし手間がかかる方に分かれます。 どちらも簡単なので好きな方を選んでください。 選択肢1. Web Editor editor.p5js.org 上記のリンクに飛んでもらえればすでにP5.jsが動かせる環境がととのっています。 特に手間をかけずに試したい方はこちらを選ぶことを推奨します。 選択肢2. ダウンロード 自分でHTMLファイルも用意したり、ちょっと手の込んだことをしたい方や手元の環境で動作させたい方向けです。 p5js.jp 上記のリンクに飛んでもらうと、下記の画像のようなページになるので青線で囲まれた場所をクリックすると勝手にZIPファイルがダウンロードされます。 私の場合、寄付に関するページに自動で飛びましたがお気持ちがある方のみで大丈夫なので無視しても問題ありません。下記の画像のようなページが開かれました。 先ほどダウンロードしたZIPファイルを解凍するといくつかのフォルダがあるので画像のように進めて empty-example を探してください。 empty-example の中身には二つのファイルがあり、これらに追記していくことで好きなプログラムを動かすことが出来ます。 中身は empty-example と言うだけあって中身はとても簡単です。 index.html <!DOCTYPE html> < html > < head > < meta name = "viewport" width = device-width, initial-scale= 1.0, maximum-scale= 1.0, user-scalable=
埼玉県越谷市レイクタウンにあるコワーキングスペース「HaLake(ハレイク)」からレイクタウンに関する情報、技術情報などを発信するマガジンサイト