次のコードは、基本的なシェイプ関数を使って”困った顔”を描画しようとする例です。図形の位置決めには、方眼紙を使って鉛筆でざっと図形を描いてみる方法が役立ちます。radians(300))}円グラフ(パイチャート)arc()関数を使用すると、配列などに保持したデータから円グラフが作成できます。}}-解説-しかしこの例では、forループを使って複数の円弧を一気に作成しているので、少し分かりづらいかもしれません。次のコードでは分かりやすくするため、1つの円弧を作成する関数を定義し、それを必要な回数だけ呼び出す方法を取っています。グラフに色付けも行っています。radians(angle);}arc()関数で円グラフを描く場合、円の中心座標と円の大きさは一定なので、同じ数値を与えれば事足ります。問題なのは開始角度と終了角度、つまり円の中心からX軸の方向(0度)を基準として、円の何度から何度までのパイ部分を描くのか、の指定です。‘CornflowerBlue’)からは、次のパイが描かれます。30度が計算されて、30度がstopAngleに代入されます(実際にはラジアン値)。200)を中心とする直径300の円が想定されて、その円の0度から30度までのパイ部分がCornflowerBlueで塗られて描かれます。最後、次の呼び出しに備えて、描いたパイ部分だけ、startAngleに足しておきます。これが次の開始角度になります。このために作成した次のpolygon()関数はどんな正多角形でも描くことができます。polygon()関数に渡す数値を変えていろいろと試してみてください。endShape(CLOSE);}-解説-draw()関数内では、作成する正多角形ごとに、push()とpop()関数で囲み、移動と回転の変換を行っています。これにより、その変換がpush()とpop()で囲んだシェイプのみに限定できます。polygon()関数はこのままではいかにも難しそうに見えるので、以下で細かく見ていきます。fill(255);}上記コードでは、キャンバスのセンターに移動する変換だけを適用しているので、シェイプは重なって描画され、回転しません。draw()内の二十角形と七角形を作成する行にコメントをつけ、正三角形だけを描画すると、次の結果が表示されます。正三角形は赤い円で囲まれ、頂点には黒い丸がついています。これらは正多角形を作成するpolygon()関数を理解しやすくするために追加しています。y)とその半径(radius)、描画したい正多角形の頂点数(npoints)を取ります。3)の場合には、(0,0)を中心とする半径82の円を想定し正三角形を描け、という意味になります。下図は、これの説明のための図です。3)の4つめの引数です。この3で円周の360度を割って、等分に刻む角度とします。360/3は120です。0)を中心とする半径82の円を想定し、円の右端(円の中心からX軸方向に進んだ線と円との交点)を0度として、1つめの頂点とします。ここを起点とし、時計回りに120度進んだ円上の点を2つめの頂点、さらに120度進んだ円上の点を3つめの頂点として、これら3つの頂点を直線で結ぶと、正三角形になります。この3つの頂点を求めているのが、次のforループです。sy);}このsxとsyの計算は、「半径1の円(単位円)の円周上の点(x,y)がx軸の正方向と角度θをなすとき、その座標は(cosθ,sinθ)で表される」という数学の三角関数、サインコサインの定義にもとづいています。簡単に言うと、角度が分かれば、円周上の点の座標(sxとsy)はサインコサインで計算できる、ということです。これが、正多角形の描画に円を想定する理由です。JavaScript」で述べています。0)として扱われます。星形この例に特化したstar()関数はさまざまなタイプの星型が作成できます。draw()内のstar()関数の呼び出しにさまざまな数値を入れて、試してみてください。endShape(CLOSE);}-解説-では、ここでも星型がどのようにして作られているか、上記コードに手を加えて見ていきましょう。}}下図の左は、star()関数内に2つあるvertex()への呼び出しを行わない結果で、右は行った結果です。ここでは、星型を作るために、大きな円と小さな円を2つ想定しています。大きな円でも小さな円でも、頂点の座標を求める方法は前の正多角形の方法と変わりませんが、小さな円では、頂点を時計回りの方向にhalfAngle分だけずれるようにしています。大小2つの円上の頂点をforループで一気に作成すると、星型の作成に必要な頂点が得られます。Greenberg作によるサンプル。vertex()関数とbeginShape(TRIANGLE_STRIP)モードを使って、閉じられたリング(環)を生成します。変数outsideRadiusとinsideRadiusはそれぞれ、リングの半径を制御します。endShape();}マウスを左右に動かすと、マウスの位置によってリング内に作成される三角形が増減します。-解説-beginShape()関数に定数TRIANGLE_STRIPを指定すると、vertex()関数で作成した頂点を結ぶ三角形が描画されます。上記サンプルでは、map()関数を使って、その時点でのマウスのx位置を6から60までの数値に変換し(比の計算)、それを頂点数(numPoints)としています。これにより、マウスが左にあるほど頂点数は少なく、右にあるほど多くなるという、ダイナミックな処理が可能になります。JavaScript」で述べています。60));このサンプルのポイントはこれ以降のコードです。以下では、頂点数を取るdrawTriangleStrip()関数を定義して、この処理を見ていきます(引数を固定的に取るので、ダイナミックにはなりません)。endShape();}これを実行すると、次の結果が得られます。p5.jsのサンプルでリングと呼んでいるのは、上図の大きな円と小さな円にはさまれた部分で、ここに頂点を順に結んだ三角形のストリップが描かれます。ここではdrawTriangleStrip()関数に6を渡しているので、六角形が2つ生成されることになります。drawTriangleStrip()関数ではまず、ローカル変数angleを0で初期化しています。これは2つの円上に頂点を作成するときの角度になります。360をnumPoints(今の場合は6)で割り、それを2で割って、ローカル変数angleStepに代入しています。これは増やす角度の分量です。下にあるforループでは、1回の繰り返しで2回、angleにangleStepを足しているので、円の全周に合わせるため2で割ります。numPoints;その後、参考用に大小2つの円を描画し、drawTriangleStrip()関数の核心であるforループに入っていきます。ここでもやっていることは、正多角形や星型のときと同じ、sin()とcos()を使った、円上での頂点の作成です。これは、このサンプルではnumPointsをダイナミックに変更するのでこのようにしているのかと思われますが、どちらの方法でも三角形ストリップは描画できます。numPointsでは、最後の線が描画されないので、<=にする必要があります。下図は、上記コードで2カ所あるtext()関数を実行した結果です。numPointsとすることで、実際にはiが0と6のときに頂点が重複していることが分かります。ベジェ曲線bezier()関数の最初の2つのパラメータはベジェ曲線の最初の点を指定し、最後の2つのパラメータは最後の点を指定します。中央のパラメータは曲線の形状を定義するコントロールポイント(制御点)を設定します。}}マウスを左右に動かすと、描画されるベジェ曲線がダイナミックに変化します。-解説-このサンプルで、ベジェ曲線がダイナミックに変化するのは、draw()関数内forループで呼び出しているbezier()関数の引数にmouseXを渡しているからです。ベジェ曲線については、「ベジェ曲線講座」などで解説されています。簡単に言うと、固定したい点(アンカーポイント)2つと、制御する点(コントロールポイント)2つから、一定の決まりにもとづいて描かれる滑らかな曲線です。Illustrator」やフリーツールの「Inkscape」などの描画アプリケーションで作成できます。下図はInkscapeで作成した例です。白い丸がコントロールポイントで、青い四角がアンカーポイントです。マウスでコントロールポイントをドラッグすると、コントロールポイントが移動でき、その結果作成される曲線が変化します。以下は上図のような曲線を作成するbezier()関数の例です。150)}下図はこの実行結果です。アンカーポイントやコントロールポイントをドラッグできるようにすると、ダイナミックに変化するベジェ曲線が描画できます。プリミティブ3Dオブジェクトを数学的な方法で疑似空間に配置します。box()とsphere()関数は、サイズの指定に最低でも1つのパラメータを取ります。作成したシェイプはtranslate()関数によって位置取りできます。pop();}下図はこの実行結果です。-解説-とはいえこれでは面白くないので、もう少し3Dが実感できる例を紹介します。円環}マウスでグリグリできます。3D空間を作成するには、createCanvas()関数の第3引数に定数WEBGLを指定します。debugMode()関数はデバッグモードを有効にします。これにより、3D空間に地面のグリッドと、X、Y、Zの3軸の向きを示すカラーの線が描画されるようになります。orbitControl()関数でマウスのドラッグによる3D空間の制御が可能になります。p5」が参考になります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。