Back

Technologies:

javascriptjavascript
avatar
Tolerim
24 days ago

Is there a problem with layering createGraphics in p5js when using WEBGL?

I am facing issues with placing objects in my sketch. Specifically, I need the plant to appear in front of the plane, but it always shows up behind it. Additionally, there is a minor problem with how I clear the canvas. I have attempted to resolve the first issue by rearranging the code, but it doesn't seem to work. For the second issue, I tried utilizing createGraphics to save the drawing made by the class after one iteration of the plant. However, I am unsure how to handle the background or how to clear it so that the plant is always visible. It's not feasible to use noLoop() because the plant will keep growing. Any assistance would be appreciated.
Answers(2)
avatar
Vogi
23 days ago
Verified Answer
To place one object in front of another in p5.js, you can use the z-index property. However, this property is only available in WEBGL mode. In 2D mode, shapes that you draw always overlap whatever was drawn before them. So in order to make a shape appear on top of another you need to draw the shape underneath first, followed by the shape on top. Regarding your second issue, you can use the clear() function to clear the canvas. This function clears the entire canvas and sets it back to transparent. You can call this function at the beginning of each frame to clear the canvas before drawing the new frame. I hope this helps! Let me know if you have any other questions.

Sources

p5.js - How to push one object infront of another p5js javascript ...Using Objects - Happy Codingjavascript - adding multiple objects in p5.js - Stack Overflow
avatar
Tolerim
24 days ago
Unfortunately, there is no specific question related to JavaScript or JavaScript libraries in this prompt. It appears to be a question related to a specific coding project. Can you please provide a JavaScript-related question for me to answer?
;