第2部の目標

1. p5.jsで何ができるか説明できるようになる

2. p5.jsの基本的な概念（スケッチ、setup、draw）を説明できるようになる

3. p5.jsのサイトでアカウントを作成し、保存や共有などができるようになる

4. p5.jsで図形を描画して、動かすことができるようになる。

何かの図形を描く

正弦波で円を描く

図形を円周上で回転させる

p5.jsとは

チュートリアルをやれば、大体のことはできるようになります

本日はエディタを使います

p5.jsは、クリエイティブなコーディングのためのJavaScriptライブラリで、 アーティスト、デザイナー、教育者、初心者、その他誰にとっても、コーディングを身近で包括的なものにすることに焦点を当てています。 p5.jsはフリーでオープンソースです。 なぜなら、ソフトウェアやそれを学ぶためのツールは、誰もがアクセスできなければならないと私たちは考えているからです。p5.jsは絵を描く際の考え方に基づいて、描画機能を全ての備えています。 しかし、キャンバス上での描画に限ったことではありません。 テキスト、入力、ビデオ、ウェブカメラ、サウンドなどのHTML5オブジェクトを含む、 ブラウザのページ全体をスケッチと考えることができます。

特徴

ブラウザ上でコードを書いて動かすことができる→入門が簡単

<上> オフラインで動かすことも可能です。実験などで使う場合はこちらの使い方をします。

プログラミング言語はjavascript

刺激提示と反応取得に必要ないろいろな関数（コマンド、命令）が用意されています。

<上> 裏ではcanvasへの描画が動いています

実験フレームワークのjsPsychと組み合わることで、実験での利用が可能です。

<上> 本を書く人、いませんか？

学習のためのリソース

1. アカウントの作成

アカウントを既に作ってある人は、右上の「Log in」、アカウントを作ってない人は「Sign up」。

必要な情報：ユーザーネーム（適当に決める）・ パスワード・メールアドレス

ログインに成功すると、右上にユーザーネームが表示されます

表示言語は日本語に変更できます。メニューバーの「English」→「日本語」に。

1-2 エディタの説明

左側にコードを書きます。すでに、テンプレのコードが入っています。

左上に、実行ボタンと停止ボタンがあります。コードを動かすには、実行ボタンを押します（キーボードショートカットもあります）

右側のプレビューに、実行結果が表示されます。

1-3 最初のコードを動かす

プレビューに、灰色の四角が表示されればOK。

1-4 コードの概要

p5.jsではコード（プログラム）全体を「スケッチ」と呼びます。描画する領域を「キャンバス」と呼びます。

スケッチの構成要素

setup関数：実行ボタンを押すと、最初に一回だけこの関数の内容が実行されます。

キャンバスの種類や大きさの指定、いろいろな初期設定を行います。

draw関数：setupのあとに、この関数の内容がずーっと繰り返し実行され続けます

実際に図形を描画する命令を書きます。

多くの場合、1秒間に60回ほど、実行されます。

<上> setup、drawともにp5.jsのメインルーチンから呼び出されるコールバック関数です。

テンプレコードのsetupは以下の通りです

code:javascript

function setup() {

createCanvas(400, 400);

}

テンプレコードのdrawは以下の通りです。

code:javascript

function draw() {

background(220);

}

<Beginner向け> 命令（関数・コマンド）の基本

命令（関数、コマンド）は以下のような書式で書きます。引数は「ひきすう」と呼びます。

code:any

関数名(引数1, 引数2, 引数3, ...);

1-5 テンプレコードをイジって色を変えてみよう

background関数で、数字を1つ指定した場合、グレイスケールの明るさを設定できます。範囲は0（黒）から255（白）です。

background関数で、数字を3つ指定した場合、RGBの各要素の色を設定できます。各要素の範囲は0から255まで。

<上> 色名、16進表記でも指定できます。また透明度指定のためのアルファ値の指定もできます。HSBモードに設定すると、HSBでの色指定も可能です。

1-6 単純な図形を描く

code:javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

// 円を描く

// 引数はx座標、y座標、直径

circle(300, 100, 100);

//.四角を描く

// 引数は左上のx座標、y座標、幅、高さ

rect(50, 300, 200, 50);

}

図形の属性の指定

図形の属性（位置、大きさ、線の色、塗りつぶしの色）などを簡単に設定できます。

fillコマンドで塗りつぶしの色、strokeコマンドで枠線の色を指定できます。色の指定方法は背景色と同じです。

noFillコマンドで塗りつぶしなし、noStrokeコマンドで枠線の描画なし、が指定できます。

複数の図形が重なっている場合、コードの上の方が先に描かれるので、下に書いたほうが上に表示されます。

以下のコードを動かしてみましょう。

code:javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

// 塗りつぶしを赤、線を緑、線の太さを5に。

fill(255, 0, 0);

stroke(0, 255, 0);

strokeWeight(5);

// 円を描く

circle(300, 100, 100);

// 塗りつぶしをなし、線を青、線の太さを2に。

noFill();

stroke(0, 0, 255);

strokeWeight(2);

//.四角を描く

rect(50, 300, 200, 50);

// 白く塗りつぶし、枠線なし

fill(255);

noStroke();

// 三角形を描く

triangle(50, 380, 150, 200, 250, 380);

}

三角形は灰色に。

四角の枠線を青色に。

四角が三角形の上に表示されるように。

1-7 正弦波で円を描く

ここから急に難易度が上がります。

p5.jsの図形描画関数は便利なのですが、知覚心理学や錯視の研究で使う場合は、数学関数と頂点座標の指定による図形描画の方が使いやすい場合が多いです。

<上> OpenGLの描画関数が利用できます。

code:javascript

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

// 左上の図形

beginShape();

vertex(30, 20);

vertex(40, 30);

vertex(50, 20);

vertex(60, 30);

vertex(70, 20);

vertex(80, 30);

vertex(90, 20);

vertex(90, 80)

vertex(30, 80)

endShape(CLOSE); // 閉じて終わる

// 40pxが1周期の正弦波を描く

noFill(); // 塗りつぶさないように

beginShape();

for (i=10; i<390; ++i) {

vertex(i, 200+sin(i*2*PI/40)*30);

}

endShape();

}

変数

上のコードのiは変数（変数）です。値をいろいろと変えられる記号のようなものだと思ってください。

繰り返し（forループ）

上のコードの中のfor...ループです。繰り返し処理を行います。

「最初にiを10にする (i=10)。iを1ずつ増やしながら(++i)、vertex...の命令を実行する。『iが390より小さい(i < 390)』が成り立たなくなったら（つまり、iが390になったら）、終了する」ということを意味しています。

頂点指定による描画を開始します。

頂点を指定します。引数はx座標、y座標です。

頂点指定による描画を終了します。