印刷する

コードを書く・動かす

この教材では、Processingのp5.jsモードを使って、JavaScriptのコードを書き、実行します。
p5.jsモードは、Processingの環境でp5.jsのプログラムを編集・実行する機能です。インタラクティブなモーショングラフィックスの処理をJavaScriptで記述し、Webブラウザ上で実行することができます。

p5.jsモードのスケッチ

p5.jsモード
   Processingウィンドウの右上隅の下向き三角で、p5.jsを選択すると、図のような画面になります。 sketch_で始まるタブはJavaScriptのプログラムで、起動直後(新規作成時)は空のsetup()関数とdraw()関数が定義されています。

   functionは、JavaScriptで関数を定義するキーワードです。ページのロード時に1回だけ実行したい初期化処理はsetup()関数内に、フレームレート(1秒間の描画回数)に従って繰返したい処理はdraw()関数内に書きます。デフォルトのフレームレートはディスプレイのリフレッシュレートに従っており、ほとんどのコンピュータでは60に設定されています。

   スケッチには、JavaScript言語の文法に従い、p5.jsに定義された命令(関数と呼ぶ)を使って、描画処理のプログラムを記述します。


   p5.jsの関数はメニューの[Help][Reference]から仕様の一覧を参照できます。 次のURLからもリファレンスを参照できます。 https://p5js.org/reference/

   index.htmlのタブは、JavaScriptのプログラムをWebブラウザ上で実行するためのHTMLファイルで、[実行]ボタン(右向き三角)をクリックすると、Webブラウザが起動され、index.htmlファイルが表示されます。index.htmlには、次の2つの<script>タグが記述されており、JavaScriptのプログラムがページ上で実行されます。
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js">  </script>
  <script language="javascript" type="text/javascript" src="sketch_200307c.js">  </script>
   スケッチを保存すると、スケッチにつけた名前のフォルダが作成され、その中に拡張子jsのファイル、index.html、librariesフォルダ(p5.min.jsファイルが入る)ができます。
   スケッチが正しく動作しない時は、WebブラウザのJavaScriptコンソールで、エラーに関する情報を得て、修正します。
copyright © info