01-07 結果の出力先

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

Scratchの場合

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

Scratchの画面

p5.jsの場合

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

p5.jsの画面

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

例題1-7-1

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

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

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

練習問題1-7-2

コンソールに自分の自己紹介を出力しなさい。

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

  // コンソールへの出力
  print("はじめまして僕は中村仁です好きな食べ物はポテトで嫌いな食べ物はあのみんなだいすきなお寿司です");   // 文字列を指定して描画（出力）
}

コンソール

クリア

はじめまして僕は中村仁です好きな食べ物はポテトで嫌いな食べ物はあのみんなだいすきなお寿司です

練習問題1-7-3

キャンバスに自分の自己紹介を出力しなさい。

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

  // コンソールへの出力
  print("はじめまして僕は中村仁です好きな食べ物はポテトで嫌いな食べ物はあのみんなだいすきなお寿司です");   // 文字列を指定して描画（出力）
}

コンソール

クリア

はじめまして僕は中村仁です好きな食べ物はポテトで嫌いな食べ物はあのみんなだいすきなお寿司です

感想まとめ

キャンパスへの出力のコードを打ち込んで、textというのを入力すれば複雑なこうていを省いて自分の好きな文字がかけることがわかりました。