問題タブ [p5.js]

何かをコーディングしてから何年も経ちましたが、今は p5.js を取り上げる必要があります。練習として、単純な描画プログラムを作成しようとしていました.デフォルトで黒で描画し、画面の隅にある赤い四角形をクリックすると色を赤に切り替えたい. 私は次の非常にずさんなコードを持っていました (マウスを押すと赤い四角形と正確に一致しないこと、「描画」メカニズムが最適ではないことなどを知っています。私はそれをいじっているだけです)

「color」変数を使用せず、代わりにストロークを 0 に設定すると、黒で十分に描画できます。そして、 mousePressed 関数が機能しているようです-長方形を押すと、テストのために入れた楕円が描画されます。ただし、描画関数で var 'color' を参照できないようです。これはおそらくばかげた問題ですが、困惑していることは認めます。私は何を間違っていますか？

p5.j​​s スクリプト (ブラウザーの処理) を動的に読み込もうとしていますが、何をしても、スクリプトがそのビジュアルを Web ページに表示できません。通常の状況では、標準の .html を使用して、index.html に p5 スクリプトをロードします <script src="sketch.js" type="text/javascript"></script>。ただし、jquery スクリプトを使用してスクリプトを動的に追加しようとすると、Chrome は「メイン スレッドでの同期 XMLHttpRequest は、エンド ユーザーのエクスペリエンスに有害な影響があるため、非推奨です」をスローします。私も使ってみました

まったく何も表示/印刷しません。

奇妙なことに、このコードはスクリプトが正常に実行されたことを返します。

jquery を適切に使用して sketch.js ファイルを動的にロードする方法を理解するのに役立ちます。

単純なコントラストと赤のチャンネル操作スケッチを p5.js に変換しようとしています。

元の .pde は、processing.js を使用してうまく機能します。

ただし、p5.js に変換すると、更新されたスクリプト (以下) はエラーを返します。

私が試したことについていくつかのコメントを残しました： var img; // 可変感度;

問題は red() green() blue() 関数にあると思います。

私はJavascriptに比較的慣れていないので、p5ライブラリをいじっていました。Python では、以下を使用してライブラリから単一の関数をインポートできますfrom x import y statement。

setup/draw私の質問は、フォーマットを使用せずに p5 で同じことを行う方法はありますか? たとえば、noiseスクリプトの 1 つで関数を使用したいとします。その機能だけをインポートして使用できますか?

p5.j​​s の PGraphics インスタンスからピクセルにアクセスしようとしていますがloadPixels()、配列を呼び出した後でも空です。

これが私が試したことです：

p5.j​​s を使用して PGraphics のピクセルにアクセスすることは可能ですか? もしそうなら、どのように？

source/javascripts フォルダーに配置した p5.js でスケッチを作成しました。

機能するには、p5js ライブラリ (p5.dom.js、p5.js、p5.sound.js) が必要です。それらをどこに配置し、どのように呼び出すのですか?

all.jsでファイルが呼び出される source/javascripts フォルダーに直接配置しようとしました//=require_treeが、ベンダー ライブラリであるため、別のフォルダーに配置したいので奇妙に思えます。（そしてとにかくうまくいかない）

また、作成したフォルダー (source/library) に<script src="/source/libraries/p5.js" type="text/javascript"></script>配置して、layout.erb ファイルから呼び出そうとしましたが、どちらも機能しません。

Middleman にはベンダー フォルダー stylesheets/vendor がありますが、これは css 用であるため、おそらく js をそこに配置しないでください。

何か案が？

私は電子アプリを持っています。パッケージ化するまで、すべてが意図したとおりに完全に機能します。

アプリはインタラクティブな映画であり、ユーザーが決定した後にシーンをロードします。すべてが npm start で機能しますが、パッケージ化すると、最初は機能し、その後のオプションも機能しますが、クリックすると3番目のオプションが表示されますボタン (ビデオに読み込まれる関数を呼び出す必要があります) は機能しません。デバッガーでは、ステータスがキャンセルされたと表示されますが、理由はわかりません...

これは、機能していないその関数のコードです (その時点までの他のすべてのシーン関数は機能します) フロントエンド ライブラリとして p5.js を使用しています。

コード全体については、私の github にアクセスしてください: https://github.com/Reddamhouse/thief/blob/app/sketch.js (173 行目)