6

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

from subprocess import check_output

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

4

1 に答える 1

11

このような質問がある場合は、テストをまとめて試してみることをお勧めします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Noise Test</title>
    <script src="p5.js" type="text/javascript"></script>
    <script>
        console.log(noise(100));    
    </script>

  </head>
  <body>
  Noise Test, check the console.
  </body>
</html>

ここでは、p5.jsライブラリをロードしてから、関数を呼び出そうとしていnoise()ます。これを実行すると、エラーが発生します。

Did you just try to use p5.js's noise() function? If so, you may want to move it into your sketch's setup() function.

For more details, see: https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup

index.html:9 Uncaught ReferenceError: noise is not defined

その URL にアクセスして、何が起こっているかを確認できます。

グローバル モードでは、p5 の変数名と関数名は、setup()、draw()、mousePressed() などの外部では使用できません (これらのメソッドのいずれかによって呼び出される関数内に配置されている場合を除きます)。

これの説明は少し複雑ですが、グローバル モードとインスタンス モードの両方をサポートするためにライブラリをセットアップする方法に関係しています。何が起こっているのかを理解するために、最初に p5 を含むページが (グローバル モードで) ロードされたときの順序を見てみましょう。

  1. のスクリプトが読み込まれます。

  2. HTML ページの読み込みの数 (これが完了すると、onload イベントが発生し、ステップ 3 がトリガーされます)。

  3. p5 が開始され、すべての関数がグローバル名前空間に追加されます。

したがって、問題は、p5 変数がまだ認識されていないときに、p5 が開始される前にスクリプトがロードされて評価されることです。ここでそれらを呼び出そうとすると、エラーが発生します。ただし、setup() および draw() 内で p5 関数呼び出しを使用する場合、これは問題ありません。これは、スクリプトが最初に読み込まれるときにブラウザーが関数内を検索しないためです。これは、setup() および draw() 関数がユーザー コードで呼び出されず、定義されているだけであるため、それらの内部のものはまだ実行または評価されていないためです。

setup() 関数が実際に実行されるのは p5 が起動するまでではなく (p5 が呼び出します)、この時点で、p5 関数はグローバル名前空間に存在します。

つまり、関数とp5.js関数なしでは関数を使用できません。setup()draw()

そうは言っても、 から呼び出すコールバック関数を定義して、関数が利用可能setup()であることを知ることができます。p5.js

<script src="p5.js" type="text/javascript"></script>
<script>
    function doYourStuff(){
        console.log(noise(100));        
    }

    function setup(){
        doYourStuff();
    }
</script>

または、インスタンス モードを使用することもできます。

これには、のインスタンスを手動で作成し、p5それを使用して関数をグローバルに呼び出す代わりに直接呼び出す必要があります。

<script src="p5.js" type="text/javascript"></script>
<script>
    var p5 = new p5();
    console.log(p5.noise(100));
</script>

ソースを掘り下げることもできます。

単一の関数をインポートする良い方法はありませんが、縮小されていないソースを ctrl+f で検索p5.jsして関数を探すことができnoise()ます。次に、それを独自のファイル (およびそれが依存する他のヘルパー関数) にコピーできます。しかし、おそらく上記のアプローチのいずれかを使用するよりも手間がかかり、p5.js の著作権を侵害する可能性があります。

于 2016-08-17T13:12:36.960 に答える