knagaip5.playにはSpriteオブジェクトが定義されています。SpriteSpriteオブジェクトはp5.playの主要な構成要素で、イメージやアニメーションが保持でき、位置や可視性などのプロパティのセットを持つ。Spriteオブジェクトはまた、ほかのSpriteオブジェクトやマウスのインタラクションとの衝突や重なりを検出するためのアクティブな領域を定義するコライダーを持つこともできる。1つのスプライトの作成p5.play.Spriteオブジェクトは次の手順で作成できます。setup()関数で、p5.play.createSprite()を呼び出す。draw()関数で、p5.play.drawSprite()を呼び出す。50のサイズで作成する。drawSprite(sp);}スプライト(p5.play.Spriteオブジェクト)は、p5.playのcreateSprite()で作成できます。y)と幅、高さが指定できます。100のサイズで作成されます。createSprite()は作成したスプライトを返すので、これを変数に割り当てます。作成したスプライトを描画するには、draw()内で、p5.play.drawSprite()に、作成したスプライトの変数を渡して呼び出します。スプライトは、表示するイメージやアニメーションを与えないと、色の付いたプレースホルダ矩形として表示されます。色はデフォルトで作成されるたびに変化します。ObjectSpriteオブジェクトはp5.playの主要な構成要素で、イメージやアニメーションが保持でき、位置や可視性などのプロパティのセットを持つ。Spriteオブジェクトはまた、ほかのSpriteオブジェクトやマウスのインタラクションとの衝突や重なりを検出するためのアクティブな領域を定義するコライダーを持つこともできる。createSprite()で作成されたスプライトはallSpritesグループに追加され、ほかのすべてのスプライトの前面(手前)に来る深度が与えられる。プレースホルダ矩形の幅。イメージか新しいコライダーが設定されるまでのコライダーの幅。プレースホルダ矩形の高さ。)スプライトを表示する。通常はメインのdraw()関数内で使用する。sの付いたdrawSprites()もあるので注意。上記サンプルでは、スプライトを1つだけ作成しましたが、もちろん複数のスプライトも作成し描画できます。そのときには、指定されたスプライトを描画するdrawSprite()ではなく、作成したスプライト全部を描画してくれるp5.play.drawSprites()が使用できます(最後に複数形のsが付いている)。次のコードでは、ボタンが押されるたびに、新しいスプライトがランダムな位置に作成され描画されます。スプライトは複数作成されるので、draw()内でdrawSprites()を使っています。作成されたSpriteオブジェクトをコンソールに出力しています。50のサイズで作成する。drawSprites();}ボタンを押すと、赤い矩形のスプライトが押した数だけ表示されます。コンソールには下図に示すようなSpriteオブジェクト(の文字列表現)が出力されます。Spriteオブジェクトは相当な数のメソッドとプロパティを持っていることが分かります。Colorイメージかアニメーションが設定されていない場合、これがプレースホルダ矩形のカラーになる。)スプライトのグループを表示する。パラメータが指定されない場合には、スケッチ内のすべてのスプライトを描画する。描画する順番はスプライトのdepthプロパティで決まる。表示するスプライトのグループスプライトごとに異なる属性を持たせるSpriteオブジェクトが持っているプロパティを使用すると、スプライトごとに外見と動作を変えることができます。次の例では、キャンバスのどこかをクリックすると、新しいスプライトが作成されます。スプライトはそれぞれ(茶系で統一されつつも)色が異なり、移動する方向も違います。コンソールには、作成したスプライトの数を出力しています。マウスの位置に新しいスプライトを作成する。print(allSprites.toArray().length);}クリックでスプライトが作成され、別々の方向に移動します。マウスのクリック時には、新しいスプライトが作成されます。ここではそのスプライトのvelocityプロパティのxとyプロパティに、ランダムな数値を設定しています。velocityはスプライトの移動速度で、xプロパティはX軸方向の、yプロパティはY軸方向の移動量を意味します。velocity.xに2を、velocity.yに3を指定されたスプライトは、draw()関数が1回呼び出される間に、右に2、下に3だけ移動します。これが毎フレーム継続されるので、スプライトは右下の方向に移動して描画されることになります。毎フレーム同じ値が加算(または減算)されるので、移動は定速です。上記サンプルのスプライトはキャンバスの外に出ると見えなくなりますが、その後もずっと”生きたまま”移動をつづけています。これは明らかに無用のメモリ消費です。mouseClicked()関数の最後で使用しているallSpritesは、p5.playが複数のスプライトの管理に使用しているp5.play.allSpritesプロパティです。ここではそのtoArray()メソッドを使って、その時点までに作成されたスプライトの数を出力しています。速度は、垂直成分と水平成分に分けたスピード(draw()が1回呼び出される間の移動量)。Groupスケッチ内の全スプライトを含んだGroupオブジェクト。()グループのコピーを標準の配列として返す。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。