p5.jsをローカル環境で動かす

p5.js

2025/01/27 2024/10/24

今回はパソコンのローカル環境で動かす方法を教えます。
割と簡単です。

まず、p5.jsのwebエディターのファイルからダウンロードをクリックします。
これで今までwebエディターで作ってたものをダウンロードできます。
これでファイルを展開したあと、index.jsをそのままダブルクリックしたら動きますが、このままではインターネットに繋がらない状況だと動きません。
少しindex.htmlのコードをいじります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="p5.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sprite.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

headタグ内のscriptタグを上記の様に書き換えます。
何故こんな風に書き換えるかというと、ダウンロードしたフォルダの中にはp5.jsファイルがあるから、それを読み込むためです。
以下の様なファイル構造になっているはずです。