講義2-1: p5.jsの基礎

https://editor.p5js.org/

p5.js: Web版のProcessing環境

Processingとは

ビジュアルアートのプログラミング環境．
プログラミングでお絵描きができる!

Processingが関係する授業

【3年前期】グラフィックスの理論
【3年後期】ビジュアルコンピューティング演習
【3年後期】（コンピュータグラフィックス）

Web版を使う利点

テンプレートファイルを配布しやすい（URLにアクセスするだけ）
自分のプログラムコード・結果をすぐ共有できる（メニューからすぐ共有リンクを発行可能）

※ セットアップ，メンテナンスの手間が少ないのでWeb版を使っています

p5.jsのプログラミング言語

JavaではなくJava Script

かなり似ているが…プロⅠで習った構文と若干違うので注意が必要
Webコンテンツ作成の方でも扱う

演習では: ライブラリの呼び出しを組み合わせることを意識

JavaとJava Scriptの変数宣言の違い

Java: 型の指定がある

int     int_val = 100;
double  float_val = 2.4;
String  txt = “Java”;

int, doubleなどの型指定を明確に行う必要がある

Java Script: 型の指定がない (宣言方法が共通)

let  int_val = 100;
let  float_val = 2.4;
let  txt = “Java”;

共通のlet, var構文でintも文字列も宣言できる

※ 演習ではこれらの構文の違いはなるべく意識しなくても済むようにする．

2D・3DのDemoスケッチ

2D描画を行う最小サンプル

Demo_2DSimple

初期化関数

createCanvasで描画領域を作る

// 初期化関数
function setup() {
  createCanvas(600, 600); // 2Dキャンバスの作成
}

描画関数

background関数で背景色の指定
fill関数で円の色を指定
circle関数で円の描画

// 描画関数
function draw() {
  background(80, 80, 80);  // 背景色の指定

  fill(100, 100, 255);

  // マウスの座標を取得
  let x = mouseX;
  let y = mouseY;

  // circle(x, y, r)
  // - (x, y)の位置に直径rの円を描く
  circle(x, y, 100);
}

プログラムで動かしてみましょう

Demo_2DAnimation

変数の設定

(x, y)を更新するための入れ物を作っておく．

// 初期位置
let x = 100;
let y = 100;

// スピード
let vx = 2;
let vy = 2;

(x, y)の更新処理

スピード分を足し込んでいくと，位置が描画するごとに変化していく．

  // 1回毎に(x, y)を更新する
  x = x + vx;
  y = y + vy;

※ vx, vyの値を変化させるとどうなる？
※ 戻ってくるようにするためには？

3Dモデルを表示する最小サンプル

Demo_3DModel

3Dモデルなど重いデータを読み込む処理が追加

// 事前に必要な読み込み処理
function preload() {
  // 3Dモデルデータの読み込み
  mesh = loadModel('suzanne_smooth.obj', true);
}

3D表示用のキャンバス作成

WEBGLを設定することで3D用キャンバスになる

// 初期化関数
function setup() {
  ...;
  createCanvas(600, 600, WEBGL);  //3D用キャンバス
}

draw関数の中で3DCG用の描画を行う

camera関数の呼び出し
rotateYによる回転操作
model関数による3Dメッシュの描画

function draw() {
  ...

  // カメラの設定
  //     ex, ey, ez,cx,cy,cz,ux,uy,uz
  camera( 0,100,200, 0, 0, 0, 0, -1, 0);

  // モデルの回転
  ...
  rotateY(rotationAngle); // y軸周りの回転アニメーション

  // モデルの描画
  model(mesh);
}

※ ポイントとなるのは，ライブラリ関数の組み合わせで作られていること