p5.js Practice

#03 はじめてのp5.js

p5.jsの基本的な構造を理解したのちに、四角形をアニメーションさせてみましょう。

・CDNをダウンロード

https://p5js.jp/get-started/
・最初に1回だけ実行される処理とそのあと繰り返し実行される処理

setup()、draw()
・描画サイズを決める：createCanvas()
・背景色を付ける：background()
・四角形を作る：rect()
・変数

#04 色を表現してみよう

p5.jsで色を表現するためのさまざまな表記について見ていきます。

・1つの数値による表記

n:グレースケール background(n0-255) → background(127);
・3つの数値による表記

RGBを使う場合 → background(255, 0, 0);

HSBを使う場合 → colorMode()で以下のような記載

colorMode(HSB, 100);

background(50, 100, 80);

▼透明度

H=色相（Hue）、S=彩度（saturation）、B=明度（bright） + 透明度
・CSS記法による表記

background('red');

background('#ff0000');

background('rgba(255, 0, 0, 0.2)');

#05 rect()で長方形を描いてみよう

長方形を描くためのrect()について見ていきます。

・長方形を描画する：rect()

rect(x, y, w, h);
・描画位置を指定する01

rect(width/2, height/2, w, h);で描画範囲の中心から描写を開始する
・描画位置を指定する02：rectMode()

rectMode()でrest(引数)の引数を変える

rectMode(CORNER); rect(x, y, w, h);

デフォルト。ヨコ開始位置、タテ開始位置、幅、高さ

rectMode(CORNERS); rect(x1, y1, x2, y2);

ヨコ開始位置、タテ開始位置、幅終了位置、高さ終了位置

rectMode(CENTER); rect(cx, cy, w, h);

長方形の中央から開始

rectMode(RADIUS); rect(cx, cy, w*2, h*2);

長方形の中央から開始。幅と高さが2倍になる。（中央からの距離になるので）

#06 ellipce()やline()を使ってみよう

楕円を描くellipse()や直線を描くline()について見ていきます。

・楕円を描画する：ellipse()

ellipse(x, y, w, h);
・ellipseMode()もある

ellipseMode(CENTER)：デフォルト。以下rectModeと同じ

ellipseMode(RADIUS)

ellipseMode(CORNER)

ellipseMode(CORNERS)
・線を描画する：line()

line(x座標の始点, y座標の始点, x座標の終点, y座標の終点); → line(x1, y1, x2, y2);
・点を描画する：point()
・円弧を描画する：arc()
・三角形を描画する：triangle()

#07 塗りと線の設定をしてみよう

図形の塗りや線を設定するための命令について見ていきます。

・塗り：fill();

・色を変数にする

var c = color('pink');

・塗りを指定しない：noFill();

・線の色を指定：stroke();

・線の太さを指定：strokeWeight();

・線を指定しない：noStroke();

#08 テキストの描画をしてみよう

テキストを描画するためのさまざまな命令について見ていきます。

・テキストの描画：text()

text('文字列', x, y, w, h);

w:幅とh:高さを省略すると、文字列の幅と高さが反映される

デフォルトでは始点はテキストの左下

・始点の位置を指定する：textAlign();

textAlign(左右方向（LEFT、RIGHT）, 上下方向（TOP、BOTTOM）);

・文字の大きさを指定：textSize();

・フォントを指定：textFont();

・スタイルの変更：textStyle();

・塗りと線の設定

fill();、strokeWeight();などで指定

#10 マウスとのインタラクション

マウスの操作に応じてなんらかの処理をする方法について見ていきます。

・マウスの座標を取得：mouseX, mouseY

マウスの動きに追随する

・マウスの状態を検出：mouseIsPressed

クリックされている状態のときにtrueを返してくれる

if(mouseIsPressed === true)：クリックされている状態

・マウスがクリックされたときの処理を書きたい：mousePressed();

ブラウザ毎に割り当てられているデフォルトの設定を無効にする：return false;

#11 キー入力とのインタラクション

キー入力に応じてなんらかの処理をする方法について見ていきます。

・何らかのキーを押してる間trueを返す：keyIsPressed();

・特殊キーを無視：keyTyped();

・大文字小文字を区別しない：keyPressed();

・通常キー：key

・特殊キー ALT COMMAND TAB、矢印など：keyCode

#12 乱数を扱ってみよう

ランダムな数値を生成するための方法について見ていきます。

・引数がない場合：random();

0-1

・引数を1つとる場合：random(n);

0-n

・引数を２つとる場合：random(n, m);

n-m

#13 sin()、cos()を扱ってみよう

sin()、cos()を使った図形描画について見ていきます。

・sin();

・cos();

三角関数。円周状に沿うように物体を動かすなどのアニメーション

#14 p5.domライブラリを使ってみよう

p5.jsからdomを扱うためのライブラリについて見ていきます。

・p5.dom

・createSlider();

・createButton();

三角関数。円周状に沿うように物体を動かすなどのアニメーション

p5.jsでクリエイティブコーディングを体験してみよう

p5.jsを使ってクリエイティブコーディングの基本的なトピックについて学んでいきます。

・二重ループ

ループの中にループを書く

グリッドを描くときなどに使う

・乱数を使ってサイズにメリハリを作る

・乱数を使って配色アルゴリズムを作る

・マウスの軌跡を作る