如何在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) 
    } 
}