JavaScriptModeのdraw（）メソッドでimage（）とrect（）を使用できません

Question

JavaScriptModeのdraw（）メソッドでimage（）とrect（）を一緒に使うことはできません。私がコードを実行しようとすると、スケッチは何もしません。真ん中に白い矩形の緑色の円の背景を印刷することになっています。私はこれが他の人のスケッチで完璧に行われているのを見ました。だから私はこれで何が起こっているのか分かりません。 I私はまだJavaScriptModeでは動作しません理解して（ここで）（createShapeを使用していない

をここに私のコードです：。。

PImage image; 
void setup() { 
    size(400,400); 
    image = loadImage("green-circles-wallpaper-4893-5151-hd-wallpapers.jpg"); 
} 
void draw() { 
    image(image,0,0,width,height); 
    rect(100,100,200,200); 
} 

私は緑色の円を描くようにしようとしています

Answer 1

変数の名前を関数と同じ名前にすることはできません。

image変数が012と干渉していますは同じ名前なので、機能します。問題を解決するには、image変数の名前をmyImageのように変更してください。

PImage myImage; 
void setup() { 
    size(400,400); 
    myImage = loadImage("green-circles-wallpaper-4893-5151-hd-wallpapers.jpg"); 
} 
void draw() { 
    image(myImage,0,0,width,height); 
    rect(100,100,200,200); 
} 

また、JavaScriptコンソールでエラーをチェックする習慣も必要です。ほとんどのブラウザでは、F12キーを押すことで開発者ツールを起動できます。そこにコンソールタブがあり、そこに何らかのエラーが表示されます。 image()関数をimage変数で上書きしたため、コードには"Uncaught TypeError: image is not a function"というエラーが生成されます。

これはthe Processing.js documentationで覆われている：

Processing.jsでは、JavaScriptの強力な機能の

つの処理よりも、変数の命名でより多くの注意が必要ですが、そのダイナミックな、型なし性質です。 Javaなどの型指定された言語、したがってProcessingでは、あいまいさの恐れなしに名前を再利用できる（たとえば、メソッドのオーバーロード）場合、Processing.jsはできません。 JavaScriptの内部動作に着くことなく、処理開発者のための最善のアドバイスは、function/class/etcを使用しないことです。変数名としてProcessingからの名前例えば、lineという名前の変数は妥当と思われるかもしれませんが、同様の名前のline（）関数にはProcessingとProcessing.jsが組み込まれています。これは、作成した組み込み関数と関数についても同様です。良い経験則は、関数foo（）;と同じスケッチで変数fooを持たないようにすることです。