knagai通常のJavaScriptと異なり、p5.jsやp5.play.jsの出来事はどれもキャンバスの中で起こります。したがって、p5.jsやp5.play.jsでは、何かをドラッグするというよりも、何かをドラッグしているように毎フレーム描画する、具体的には、マウスカーソルの位置に合わせ、スプライトの位置を更新して描画する、ということがドラッグ動作になります。これはまた、p5.jsやp5.play.jsには専門の関数やメソッドはなく、手計算で行う、ということでもあります。ドラッグの論理は概ね、次の手順で作成します。変数draggingやoffsetX、offsetYなどを用意する。マウスボタンを押したタイミングでdraggingをtrueにする。draw()関数内で、スプライトの位置をマウス位置やoffsetX、offsetY値に応じて設定する。マウスボタンを放したタイミングでdraggingをfalseにする。ドラッグを可能にする方法はいくつもあります。以降では、矩形スプライトのドラッグと、円形スプライトのドラッグに見える方法を見ていきます。矩形スプライトのドラッグスプライトに限らず、コンピュータの描画物は基本的に矩形です。次の例では、p5.jsのmousePressed()関数でドラッグを開始し、mouseReleased()関数でドラッグを終了しています。cursor(ARROW);}円形スプライトのドラッグスプライトの”顔”に使用するPNG画像の背景を透明にすると、表示上は円形のスプライトが作成できます。上記の方法をそのまま適用すると、イメージの透明部分をマウスでつまんでもドラッグできます。これを嫌う(見えている円形だけでドラッグできるようにしたい)場合には、何らかの工夫を行う必要があります。重なりを利用するキャンバスには、1drawサイクル(1回draw()関数が呼び出される間)で呼び出された順番に描画が行われ、後の描画は前の描画を上書きします。先に円を描画しそれをドラッグして、後に円とまったく同じ位置に円と同じ大きさの丸いスプライトを描画すると、見た目は丸いスプライトをドラッグしているように見えます。false;}dist()は2点間の距離を計算するp5.jsの関数です。スプライトのコライダーを設定するスプライトのコライダー(Collider)は衝突判定に使用するp5.play.jsの機能ですが、マウスカーソルとの重なりにも利用できます。コライダーを円形で設定。}}下の実行画面で、コイン画像の緑の外枠線で示されているのがコライダーです。円形になっているのが分かります。)スプライトのコライダーを設定する。p5.playのColliderオブジェクトは、そのスプライトに関して任意のサイズや位置が設定できる、不可視の円または矩形で、ほかのスプライトとの衝突や重なりの判定、マウスカーソルとの重なりの判定に使用する。スプライトが衝突や跳ね返り、重なり、マウスイベントに関して調べられると、そのスプライトの作成時に渡されたwidthとheightパラメータから、またはアニメーションするスプライトの場合にはイメージのサイズから、そのスプライトのコライダーが自動的に作成される。イメージの境界ボックスは多くの場合、衝突判定の領域として適切でないので、さまざまなサイズの円形や矩形のスプライトを設定し、スプライトのセンターからオフセット(有効範囲が設定)できる。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。