問題タブ [p5.js]

有望な p5.js ライブラリを使用して単純な Web アプリを作成しようとしていますが、行き詰まっており、先に進む方法がわかりません。次の行が機能しない理由は本当に謎です。単純なテキスト ファイルを読み込もうとしていますが、読み込めません。明らかに空ではないのに、空だと言い続けます。私は、p5js の Web サイトにあるデフォルトの例と異なることは何もしていません。

実際、ロードする文字列をhttp://quarx.asfa.gr/data.txtに置き換えて、デフォルトの例も試しました 。私のサーバーは、文字列を送信していることを示しています... p5jsが何をしているのかわかりません。何か案が？コードは以下のとおりです。

p5.j​​sでフォントを変更するにはどうすればよいですか? 処理用語「loadFont」を認識せず、CSS からフォントを引き継がず、.vlw ファイルや GoogleFont へのリンクを挿入することもできません。少なくとも、私が試した方法ではありません。

リファレンス ページには、「text」オプションと「textFont」オプション (p5.js リファレンス ページの最後にある「タイポグラフィ」セクション) のみが含まれており、どちらも実際にフォントを指定することはできません。

私も試してみました

ここにリストされているオプション（https://github.com/lmccart/p5.js/wiki/Beyond-the-canvas）は役に立ちません。それは実際にページ全体を壊しました。CSS で:

処理中のバージョンが機能しませんでした:

また、

text と textFont の例にあるものは機能しません。

別のフォントを使用する方法が必要です。助けてください！

https://mathematica.stackexchange.com/a/39049に見られるように、Mathematica スイートを使用して他の人が成功したと思われる効果を Javascript (特に p5.js) で再現しようとしています。

私は Mathematica について 100% 無知ですGradientOrientationFilterが、画像のグラデーションの方向に沿ってストロークのパターンを作成するというメソッドを使用していることがわかります。

私の結果はまだ満足のいくものではありません。

私が試みているロジック

• 方向付けられた勾配のヒストグラムを作成し、輝度値を評価してから、水平方向と垂直方向の勾配、およびその方向と大きさを見つけます。
• 各ピクセルに線を描画して、グラデーションの方向をランダムなグレースケール カラーで表します。後でこれらの線を実際の写真とブレンドして使用します。

コード：

画像の結果

JavaScript で作成したフィールドは、Mathematica で作成したフィールドよりもノイズが多いです。

http://jsfiddle.net/frapporti/b4zxkcmL/

最後の注意事項

私はp5.jsを初めて使用します。おそらく、いくつかの節で車輪を再発明しています。これについてもお気軽に修正してください。

フィドル: http://jsfiddle.net/frapporti/b4zxkcmL/

私はハープ (harpjs.com) と p5.js (p5js.org) を使用しており、すべてを coffeescript で記述したいと考えています。

Harp は .coffee ファイルを理解するので、単純に sketch.coffee を書きましたが、うまくいきませんでした。名前をsketch.jsに変更してもうまくいきましたが、私は.coffeeの方が好きです。これを接続するために特別なライブラリが必要ですか?

p5という素敵なライブラリを使用して JavaScript プログラムをコーディングしています。javascript で OOP を試みていますが、ポインターthisのスコープに問題があります。BackgroungToolsクラスのコンストラクター内で、以下に示すように、いくつかのクラスのメンバーを定義します。

コンストラクターのmouseClickedは、クラスから引数としてメソッドを受け取ることに注意してください。これはコールバック関数です。その後、p5 のsetup関数内でこのクラスをインスタンス化します。

これがコンストラクターで出力されると、期待されるもの (現在のオブジェクトへのポインター) が得られます。しかし、ボタンをクリックして、toggleBackgroundToolsメソッドが呼び出されると、内部のthisは期待どおりではありません。現在のオブジェクトへのポインターではなく、コンソールに次のように表示されます。[top: Window[0], window: Window[0], location: Location, external: Object, chrome: Object…]

p5.ElementのメソッドmouseClickedがthisのスコープを変更していると思います。しかし、 toggleBackgroundToolsメソッドでクラスのメンバーにアクセスしたいと考えています。

誰かがこれを経験したことがありますか？この状況にどのように対処できるかについてのアイデアはありますか?

どうもありがとう！

順番に並べられたピクセルの色値 (R、G、B、A、R、G、B、A... など) でいっぱいの配列があり、R、G の値を変更してそれらを移動しようとしています。とBですが、Aは放っておきたいです。配列の 4 番目 (または n 番目) の値を具体的にスキップする最良の方法は何ですか?

私がやろうとしていること:

• すべてのフレームで、最初の R 値 (配列の 1 番目の項目) を 1 ずつ増やします。
• R 値で 0 から 255 に移動します。
• R = 255 の場合、0 にリセットし、G 値 (配列の 2 番目の項目) を 1 増やします。
• R は循環し続け、0 から 255 まで進み、次のようになるまで毎回 G を増やします。
• G=255の場合、0にリセットし、Bの値(3番目の項目)を1増やします。
• 同じこと、G サイクルは毎回 B を 1 ずつ増やします。
• B = 255 の場合、0 にリセットしてA 値 (4 番目の項目!) をスキップし、代わりに次の R 値である 5 番目の項目を増やします。そして、これを配列の最後まで無限に続けます。

私が取り組んでいるプロジェクトは P5.js にありますが、この問題は Javascript に固有のものであると考えました。

みんな、ありがとう！

ETA: 人々が私が何を使っているのか尋ねてきたので、ここに行きます:

これはほぼ問題なく機能しているようで、ピクセルが色を循環するのを見ることができますが、すぐに白に変わります (おそらく、ifステートメントがループ後に A 値をゼロにリセットしているためです。それでもやりたいのですが) 1 つだけ実行してから次のピクセルに移動するのではなく、すべてのピクセルを移動し続けます (リストで説明した方法のように)。

私はもともとこれを含めませんでした。私はまだ Javascript に非常に慣れていないためです。これまでの私の作業は非常に難解なブートストラップである可能性が高く、ほとんどの人がそれを理解できないのではないかと恐れています。でも、できればそのほうがいいと思います。

ここでは JavaScript プログラミングが初めてです。p5.j​​s (およびその p5.dom ライブラリ) を使用して、棒グラフの視覚化を作成しています。

私は、人々の名前、身長、および学校に通った州をリストするデータセットを持っています。これはその部分的なスニペットです:

また、各個人の身長に基づいて棒グラフを作成する方法と、各学校のボタンを作成しました (以下で詳しく説明します)。

今、私がやりたいことは、各人が通っている学校に基づいて、見られるものをフィルタリングできるようにすることです。たとえば、「FL」ボタンをクリックすると、学校の値が「FL」である生徒に関連するバーのみが表示されます。これを行う関数を書き始めました：

しかし、これを適切に設定する方法がわかりません。

私が行った1つの試みはfunction filterschool(e)、新しい変数を作成するように変更することでした:

でその新しい変数を参照しますfunction draw()。

しかし、最初に (ボタンが押される前に) すべての学校の場所を受け入れるように で定義valueする方法がわかりませんでした。function setup()また、それが機能したとしても、このアプローチ全体がとにかく正しいかどうかはわかりません。

どんな助けでも大歓迎です。

関数angleMode(mode);があります。RADIANSまたはDEGREESのいずれかのモードを設定するP5ドキュメントでは、それを使用する方法やp5.jsで極座標を描画する方法がわかりません。p5.j​​sでそれを行う方法を知っている人はいますか?