Tried It In An Editor Same Result
In order to create a helix effect, two rotating ellipses with a trail can be made using p5.js in the WebGL mode by following the "left-handed" rule. A rotating 3D sphere can also be created by implementing point and spherical coordinates. However, in p5.js's implementation of the WebGL system, the origin point is located at the center of the screen and not the top-left corner. Additionally, the x-axis goes left-to-right, the y-axis goes up-to-down, and the z-axis goes front-to-back. A perspective camera in p5.js can also be used to create a gradual shrinking effect on objects as they move away.
The behavior you're describing is unexpected, especially when considering the code you've provided. Given that testing in a different editor yields the same result, it seems that there might be a specific aspect of rendering in the WEBGL mode that's leading to this unexpected outcome.
While I'm still investigating this issue, one possible workaround could be to manually implement the trail of the sphere using additional drawing commands. By drawing semi-transparent copies of the sphere at previous positions, it's possible to create a visual trail. However, this method may be resource-intensive and could affect performance.
I will continue to research this issue to provide you with a more comprehensive understanding of the unexpected behavior you're encountering.
Sources
Related Questions
Work fast from anywhere
Stay up to date and move work forward with BrutusAI on macOS/iOS/web & android. Download the app today.