問題タブ [p5.js]

私は JavaScript が初めてで、あなたのアドベンチャー ゲームを作成しようとしています。p5.j​​s で DOM を使用しています。「あなたのヒーロー名」を入力した後、送信ボタンが消えてほしいです。また、ゲームの残りの部分で多肢選択式の回答タイプを設定してほしいので、その出発点を見つけるのを手伝っていただけると非常に助かります. ありがとうございました。

私はほぼすべてのインターネットを検索しましたが、答えにかなり近づいていますが、ウェブサイトで p5.js を使用する方法がまだわかりません。より具体的には、おそらくweeblyを作成して、p5コードを表示できるようにしたいと考えています。ファイルまたはオンラインファイルを介してp5.jsをロードするWebサイトと、sketch.jsが含まれていることを私は知っています。Web 上で p5.js を使用する方法がない場合、インターネット上で一般的な処理コード (または同様のもの) を使用する方法はありますか? ありがとう

単純なライブラリを作成しようとしていたところ、問題が発生しました。これは私のhtmlファイルです：

mosaic.js は私が作成しているライブラリです。

mosaic.js の内容は次のとおりです。

HTMLファイルに示されているように、内部からsetMosaicを呼び出すと、関数が定義されていないというエラーが表示されます。しかし、sketch.js の setup() または draw() 内から setMosaic() を正常に呼び出すことができます。/src/environment/environment.js で setMosaic を定義し、p5.js を再度ビルドすると、スケッチの外部から setMosaic を呼び出すことができます。

スケッチの外から setMosaic を呼び出す方法はありますか?

編集（コメントに応じて）：

1) スケッチを複数の画面に拡大できるフレームワークを構築しようとしています。したがって、スケッチを書く人は通常の方法でそれを行う必要がありますが、私のツールはサーバーなどと通信するいくつかの関数を呼び出すので、これらの関数をスケッチの外で呼び出す必要がありますが、それらは p5 オブジェクトにバインドする必要があります (名前空間) 私が書く関数は、p5js 内部のいくつかの関数を呼び出さなければならないからです。これは私のプロジェクトです。

2) スケッチごとに値が影響を受けます。

p5.j​​s を使ってちょっとしたプログラムを作っているところですが、何か変なものを見つけました。サイズが非常に大きい場合、arc() 関数は正しくレンダリングされないようです。

これが私のコードです：

そして、これがレンダリングされたイメージです。黒い円は、円弧が持つべき正しい位置合わせを示しています。下に見えるように、一部のアークは予想される位置を超えています。

なぜこれを行うのか分かりますか？

クリックしたときに円の内側の長方形を再描画したいと思います。誰でもアイデアを提案できますか？

remove() はキャンバス全体を消去します。

私が作成したdivを取得して、p5.jsを使用して1時間ごとに画面上を移動させようとしています.p5.jsで1時間ごとにそのdivの色をランダムに変更できるかどうかも疑問に思っていました.

私は、一連の Web ページからすべての出力を同時に再生する中央ページにサウンド出力を送信するアプリケーションに取り組んでいます。現在、p5 (Processing JavaScript ライブラリー。これは基本的に WebAudio API の単なるラッパーです)、node.js、および socket.io を使用しています。

マイク入力をサーバーにストリーミングしてからクライアントに戻すことができることは知っていますが、WebAudio API を使用してブラウザーで作成されたオーディオでこれを行うにはどうすればよいでしょうか? AudioContext の出力をバイナリ データに変換し、ソケットを介してストリーミングし、クライアント側で再生するにはどうすればよいですか? どんな助けでも大歓迎です！

私のphpスクリプトjson_encodesこれ：

しかし、p5.js プログラムでこの情報を抽出する方法がわかりません。

たとえば、「x」、「y」、「名前」を使用して、適切な場所に正しい名前で円を描く必要があります。

スクリプトでloadJSONを使用しましたが、変数があります-

しかし、たとえば、JSON から「x」コンポーネントを取得するにはどうすればよいでしょうか?

座標系を回転させた後、新しい軸に沿って移動しています。回転する前に軸に沿って変換することは何とか可能ですか?

アイデアは、ユーザーが画像をアップロードし、それを回転、ズーム、ビューポートの中央に移動できるというものです。どういうわけか、これらすべての機能を一度に達成できませんでした。

助言がありますか？

編集

つまり、キャンバスがあります。そこに絵を描きます。次に、それを 90° 回転させ、X 軸に平行移動させます。画面を下に移動します。軸が回るからです。

編集

これは、変換に使用するコード スニペットです。画像は常に (0,0) ポイントで回転します。そのため、中間点で回転するように翻訳します。その後、オフセット ポイントに画像を描画します。

編集

最初に平行移動してから回転することにしました。平行移動は正しくなりますが、間違ったピボット ポイントを中心に回転します。私が推測するすべてを持つことはできません。