■

fill(angle, mouseX, mouseY);

でangleが色相にmouseXが彩度にmouseYを明度に定義

function draw() {
var angleStep = 360/segmentCount;

beginShape(TRIANGLE_FAN);
vertex(width/2, height/2);
for (var angle=0; angle<=360; angle+=angleStep){
var vx = width/2 + cos(radians(angle))*radius;
var vy = height/2 + sin(radians(angle))*radius;
vertex(vx, vy);
fill(angle, mouseX, mouseY);
}
endShape();
}

vertexを使って中心からsin cos radiusを使って円など正多角形を描写

■

stepX =mouse X+2

ステップは小さくなりすぎないように+2をしている。

マウスの座標に応じてstepも上下する。

rect(gridX,gridY,stepX,stepY)

gridXがx座標  gridYがy座標

stepXがwidth stepYがheight

x座標 y座標は

for (var gridX=0; gridX<width; gridX+=stepX

forループで0からwidth(or height)までループする。

colorMode(HSB,width,height,100);

で色相が0〜widthの範囲で定義、彩度が0〜heightの範囲で定義される。

fill(gridX,height-gridY,100);

彩度はgridYが大きくなるにつれ減っていく

■

シフマン先生による公式example

加速しながら中心から回転する円。

var x = r*cos(theta);

var y = r*sin(theta);

rはheight*0.45なのでcanvasの中心から45%までの距離で、円が回転する。

theta_vel += theta_acc;

theta += theta_vel;

theta_velはtheta_acceの値のぶんだけ毎フレーム大きくなっていく。

そのtheta_velがthetaに足されるので、加速するように見える。

p5.js 勉強3

公式例より。

青い○はx座標を黄色い○はy座標をそれぞれ変数で移動させている。 

 var  x1 = width/2 + (scaler * cos(ang1));

scaler は　70で　真ん中にある長方形の辺の長さの半分の多きさ

よって　var 1 は 2/width-70 〜 2/width+70の範囲で変動する。

cos()の中の変数を変化させることによって動きをつけているのは前回のexampleと同様である。 

p5.js 勉強2

公式サンプルより。

var d1 = 10 + (sin(angle + PI/2)*diameter/2)+diameter/2；

diameter はheight-10の変数

sinは-1から1までの範囲で変化するので 10 + sin((angle+PI/2)*diameter2 + diameter/2

の値は10〜diameterの範囲で変化する。

またsin()の中の変数を変えることにより、大きさの変化のタイミングに差をつけている。

p5.js勉強1

マウスのX座標に応じて中心からの距離の変わる、円形が5つ回転し続けるシンプルなサンプルです。

ポイント

map functionを使い設定した変数でマウスのx座標に応じて各円の回転軸からの距離が遠くなるようにする。