p5.jsでHelloWorld

• オープンソースのJavaScriptのライブラリ
• クリエイティブ，アート，ビジュアル，インタラクティブな作品制作に特化している

公式のエディタにアクセスしてみる

再生ボタンを押すと実行

• すぐ実行はできる
• ログインしてない状態だと編集はできない

アカウントを作成する

• 自分でもコンテンツを作るためにはアカウント作成が必要
• 右上の「Sign up」よりアカウントを作成できる
• 好きな方法でどうぞ

プログラムを編集してみる

• 例えば以下のようなプログラムに変更

let xPos = 100;
let yPos = 50;
let xDir = 1;
let yDir = 1;
let c = "red";

function setup() {
  createCanvas(300, 300);
}

function draw() {
  background(220);
  fill(c);
  ellipse(xPos,yPos,50,50);
  xPos = xPos + xDir;
  yPos = yPos +  yDir;
  if (xPos > width-25 || xPos < 25) {
    xDir = xDir * (-1);
  }
  if (yPos > height-25 || yPos < 25) {
    yDir = yDir * (-1);
  }
}

function mouseClicked(){
  c = color(random(0, 255),random(0, 255),random(0, 255));
}

上のコードを実行する

• ボールが画面の中を跳ね返りながら移動
• 画面をクリックするとランダムに色が変わる

プログジェクトの名前を変える

• ランダムで適当なプロジェクト名になっている
• 自分がわかる名前にしておくと良い

作成したものは全てネット上で公開される

• ↑の例だと https://editor.p5js.org/shinyaoguri/sketches/Xk2gHIEnp
• 誰でも見れるので，個人情報や著作権に関わるものなど入れないよう気をつける

色々なサンプルがある

• どんなことができるのか，サンプルがたくさんある
• 色々と見てみよう

プログラムの説明

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

デフォルト状態のコード

• 大きくsetup()とdraw()で構成されている
• setup()はプログラムの実行する最初に1度だけ実行される
  • createCanvas()ではキャンバスのサイズを決定する
• draw()は1秒間に30回呼び出される．つまり30FPSのそれぞれの画面をこの関数が作っていく感じ
  • background(220)は背景色を220つまりRGBで(220,220,220)のグレーの色に設定するという意味

簡単な図形を書いてみる

function draw() {
  background(220);
  circle(50, 60, 100);
}

• setup()はとりあえず同じなので省略．以下同じ．
• circle(50, 60, 100); の部分で円を中心座標$(x,y)=(50,60)$に直径100の円を書いた
  • でも色は白で，輪郭に線がある

色を変える

function draw() {
  background(220);
  fill(255,0,0);
  circle(50, 60, 100);
}

• fill(255,0,0);という行を追加した．RGB(255,0,0)で塗るという意味

ペンを持ち変えるようなイメージ

function draw() {
  background(220);
  fill(255, 0, 0);
  circle(50, 60, 100);

  fill(0, 255, 0);
  circle(170, 170, 100);

  fill(0, 0, 255);
  circle(320, 330, 100);
}

• 円を3つ描いた．色を設定→円を描く→次の色に設定→円を描く→次の色に設定→円を描く
• みたいにペンを持ち変えるように手順をプログラムしていく

インタラクティブな要素を追加する

function draw() {
  background(220);
  fill(255,0,0);
  circle(mouseX, mouseY, 100);
}

• mouseX,mouseYでマウス座標を取れるので，マウス座標に円を描くようにしてみた
• つまり，draw()は1秒間に30回実行されていて
  1. background(220)で全体をグレーに塗りつぶす（リセット的な）
  2. 塗り潰しの色を赤に設定
  3. マウス座標に円を描く
  4. また1に戻る

background()をしないとどうなるか

function draw() {
  fill(255,0,0);
  circle(mouseX, mouseY, 100);
}

• draw()の度にマウス座標に円を描き続けるので，過去の描画の内容は自動では消えない

え，何したら何ができるかとか機能や関数や変数とか全然わからんけど！！！

 たくさんあり過ぎて紹介しきれないのでリファレンスをみてください

リファレンスを読もう

リファレンスを見て使い方を確認する

• 例えばShape（形）＞rect()で四角形の説明を見てみる

• 関数の説明と，サンプルプログラム（しかもその場で動作確認ができる）があるのでわかりやすい

#blog