knagai右に少しずつ移動する左から右に少しずつ、移動するモーションのコードは次のように記述できます。330);}変数xは描画する円のx位置、vxは速度(スピード)です。時間」という公式が思い浮かび、面倒な印象があるかも知れませんが、ここでは下図のように考えることができます。図の四角形は描画するキャンバスで、幅は240です。ここにはdraw()関数が1/60秒かけて、背景色やシェイプを描画するので、フレーム(映画フィルムのコマ)と見なすことができます。左のフレームでdraw()は黄色の円をx=10の位置に描画しています。draw()は1回の描画が終わったら、次の描画に移ります。その描画では、真ん中のフレームのように、黄色の円を0.5だけ右に描画します。1/60秒後の次の描画では黄色の円をさらに0.5だけ右に描画します。これをずっと連続します。0.5だけ右に移動ここでは、1/60秒の間に、0.5だけ右に移動する値を速度と見なすことができます(単位時間当たりの変化量)。したがって、0.5をもっと大きな値に変更すると、円が右に移動するスピードはアップします。外に出たら戻る前の例では、右へ進んだ後、キャンバスの外に出たらそれっきりなので、元に戻してみましょう。そのためには円の位置を常時監視し、円が外に出たタイミングを知る必要があります。監視する場所は1/60秒の頻度で呼び出されるdraw()関数が適切です。}p5.jsには、シェイプがキャンバスの右端を超えたタイミングを教えてくれる便利な関数はないので、ifステートメントを使って調べます。radius)を調べています。radiusはキャンバスの右端に円の右端が接する位置なので、これより円のx位置が大きくなると、print(‘シェイプ右端が画面右端を超えた’)が呼び出されつづけます。radiusは「シェイプ左端が画面右端を超えた」ということです。-40;}ということです。radiusという条件は満たされなくなって、円は-40の位置から再び右に移動を始めます。右へ進むシェイプがキャンバスの右端に到達したら向きを左に変えて進み、左端に到達したら右に向きを変えて進む、というコードは次のように記述できます。vxにdirectionを掛ける。x);}次のリンクをクリックすると、実際の動作が確認できます。「跳ね返り」ここでは新たにdirection変数を作成しています。これには最初1を代入して、これで右方向を表すことにします。これをvxに掛けます。すると、directionが1のときはこれまでと変わりませんが、-1のときにはvxが-vxに変わります。これは左に進むということです。direction;後は、向きを反転させたいタイミング(シェイプ右端が画面右端を超えときとシェイプの左端が画面左端を超えとき)で、directionに-1を掛けます(そのときのdirectionに-1を掛けた値をdirectionに代入します)。するとdirectionは1なら-1に、-1なら1に変化します。-1;上記のサンプルでは、directionとxの値を<p>要素のテキストに書き出しているので、directionが1から-1に、また1から-1に変化するタイミングと、1のときにはxは増加し、-1のとき減少することが分かります。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。WAAPIに関する注意WAAPIを利用するにはブラウザに特別な設定が必要です。ブラウザの実験的な機能を有効化する方法に書いているので、必ずお読みください。楕円(円)、円弧を描く。APIやTensorFlow.jsについて調べたことを書いています。freebiescafe.com。