01-06 結果の出力先

プログラムは何らかの処理を行い、結果を出力します。

Scratchの場合

Scratchではスクリプトエリアに作成したプログラムが動作すると、ステージエリアに結果が表示されました。

Scratchの画面

p5.jsの場合

一方、p5.jsではスクリプトエリア（コード）に作成したプログラムの結果を、キャンバスやコンソールなどに出力することができます。

p5.jsの画面

• キャンバスは、Scratchのステージエリアに似ていて、画像や図形、文字などを描画するための場所です。プログラムが作り上げた成果物を視覚的に見ることができます。
• コンソールは、文字のみを表示するための場所です。これはプログラムを作っている途中で、変数の中身や座標などの動きを確認する「デバッグ作業」に役立ちます。プログラムがうまく動いているかどうかを確かめるための「道具」として覚えておきましょう。

例題 1-6-1

次のコードを実行して、キャンバスとコンソールへの出力の違いを確認しましょう。

function setup() {
  // キャンバスへの出力
  createCanvas(400, 200);
  background(220);                // 背景色を設定
  textSize(32);                   // 文字サイズを設定
  fill(0, 102, 153);              // 文字色を設定
  text("キャンバスの文字", 50, 100); // 文字列と位置を指定して描画

  // コンソールへの出力
  console.log("コンソールの文字");   // 文字列を指定して描画（出力）
}