P5jsでcreateGraphics関数を使用するときの関数の実行方法は？

Question

私は

ドキュメンタリーで

..私の主なスケッチにそれを貼り付けcreateGraphicsのは、別の画面上で何かを描画する機能を使用したい...と、彼らが与える例は、のようなものをやっている：

var vignette; 

function setup(){ 
    createCanvas(710, 400); 
    vignette = createGraphics(400, 250); 
} 

function draw(){ 

    ellipse(mouseX, mouseY, 60, 60); 

    pg.background(51); 
    pg.noFill(); 
    pg.stroke(255); 
    pg.ellipse(mouseX-150, mouseY-75, 60, 60); 

    //Draw the offscreen buffer to the screen with image() 
    image(pg, 150, 75); 
} 

しかし、私は何をしたい私は、放射状のグラデーションを作成し、この機能を実行したいpg.background（51）

よりも複雑である。

function drawGradient() { 
    for (let r = canvasX; r > 0; --r) { 
    let lightnes = map(r,0,canvasX,360,0) 
    fill(360, 360, lightnes) 
    ellipse(0, 0, r, r) 
    } 
} 

しかし、私はvignette.drawGradient（）を行う場合、私はエラーを取得：vignette.drawGradientは関数ではありません...

、どのように私はその後、createGraphicsの内部drawgradient関数内でいただきました！のようなものを実行することができます関数？ここで

codepenです：https://codepen.io/giorgiomartini/pen/ZJjWbw?editors=0010

Answer 1

あなたはcreateGraphics()機能 "内の" 何も入れていないだろう。 createGraphics()関数は、p5.Rendererのインスタンスを返します。その後、そのインスタンスの関数を呼び出します。

vignette.drawGradient()に電話をかけて正しい方向に行っていましたが、発見したようにp5.RendererにはdrawGradient()機能が含まれていません。作成したものなので、スケッチにはその関数が含まれています。

p5.Rendererは、描画機能が含まれています：background()、fill()、rect()、およびellipse()ようなものを。したがって、レンダラーにvignetteレンダラーにグラデーションを描画したい場合は、vignette変数で実際に描画する関数を呼び出す必要があります。このように：

function drawGradient() { 
    for (let r = canvasX; r > 0; --r) { 
    let lightnes = map(r,0,canvasX,360,0) 
    vignette.fill(360, 360, lightnes) 
    vignette.ellipse(0, 0, r, r) 
    } 
}