p5.jsをオフラインでも実行できるようにする

こんにちは。
今回の話題はタイトルの通りです。

初回でも書きましたが、p5.jsはweb上に専用のエディターがあって始めやすいです。
しかし、web上にあるのでネット環境が無いと使えません。
コードを書くこと自体はどこでもできますが、実行しなければ本当に動くかどうか確認できません。

ということで、p5.jsをネット環境無しのパソコンで動かす方法を書いておきます。

まずは、以下のサイトから「Single Files」のところにある「p5.js」または「p5.min.js」をダウンロードします。

そして、どこでも良いので「index.html」というファイルをつくり、同じところに「p5.js」または「p5.min.js」と、コードを書いておく「sketch.js」をつくって置きます。

「index.html」をメモ帳などテキストを編集できるソフトで開き、以下を入力します。

<script src="p5.js"></script>
<script src="sketch.js"></script>

新たな言語である「HTML」に触れることになるので詳しくは見ませんが、<script>で「p5.js」（または「p5.min.js」）と「sketch.js」を読み込んでいます。

ちなみに、先に挙げたサイトの「Complete Library」の部分に「p5.js complete」といものがあります。
この中にも同様のHTMLファイルがあり、そこには、

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="../p5.js"></script>
  <!-- <script src="../addons/p5.sound.js"></script> -->
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>