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.
23 days ago
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.
24 days ago