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 =…

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

シフマン先生による公式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_acc…

公式例より。 青い○はx座標を黄色い○はy座標をそれぞれ変数で移動させている。 var x1 = width/2 + (scaler * cos(ang1)); scaler は 70で 真ん中にある長方形の辺の長さの半分の多きさ よって var 1 は 2/width-70 〜 2/width+70の範囲で変動する。 cos()の…

See the Pen &amp;amp;amp;lt;a href="http://codepen.io/NaokiMattari/pen/pEjOvv/" data-mce-href="http://codepen.io/NaokiMattari/pen/pEjOvv/"&amp;amp;amp;gt;pEjOvv&amp;amp;amp;lt;/a&amp;amp;amp;gt; by Naoki Yasuda (&amp;amp;amp;lt;a href="htt…

See the Pen &amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/NaokiMattari/pen/zBgpAX/" data-mce-href="http://codepen.io/NaokiMattari/pen/zBgpAX/"&amp;amp;amp;amp;amp;amp;gt;zBgpAX&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;…