p5js | Simplex Noise & WebGL with p5js from Processing.Org | Graphics library

I created a sketch which draws 100s of thousands of lines. As expected, it is quite slow. So, I tried the same sketch with WEBGL mode. But this turned out to be slower than the default mode.

My understanding was that WEBGL leverages GPU for fast rendering. Is it not true?

Thank you.

createCanvas(windowWidth, windowHeight, WEBGL)

Side note: I coded this sketch first in Processing (java), where the WEBGL mode was 100 times faster than the default mode. So, I expected the same with P5js.

I am a super early user of coding from Italy. I came up with an idea to promote a company logo on their website and I almost reached the goal so I am sharing this problem.

The idea is to obtain a sort of clipping mask effect when the mouse/cursor move on the image I've made so far a code that does the work with a still ellipse.

When I set the position parameters of the ellipse as mouseX and mouseY the effect does not work if not just a bit of a glitch at the start. How can I make it work as intended?

Here you can find the link of what I have now: https://editor.p5js.org/francesco.ficini.designer/full/FLBuhggW-

Here the code:

What I am trying to create is a point and click adventure game with decisions that effect your outcome. So far, I have only added text so I wanted to upload images and use them in my scenes. One of my attempts to get this to work is as below as well as an example of one of the scenes. I also tried creating properties within the scene and then tried code something along the lines of image(scenes[pointer].sceneGraphic, scenes[pointer].graphicXPosition, scenes[pointer].graphicYPosition), which resulted in a possible scope error in the console.

The following code can be seen in full at this p5js editor link.

I have seen some closed posts on GitHub, and the occasional unsolved similar question on random returns, but I can get a good explanation as to why on a simple print() command of a defined object the object is being printed on the console seemingly in a loop:

I just started using p5js, and don't know javascript. So it may be where the commands are placed (function setup() or function draw()), which I am still unsure why they are defaulted on the editor start page, or else I need to specify that I want the result printed just once (?).

I'm using p5js to turn some barnsley fern code into an object using the coding train's code.

I'm trying to animate it by changing one of the coefficients but I need the fern to at least render properly as an object first.

My issue is that the fern doesn't render correctly after I've ported the properties and methods into a barnsley fern object. The only thing that renders sometimes is the stem but none of the leaves do.

I've tried changing the order in the draw function, using a function factory approach and object literals but I keep getting the same result 😭

Here is the p5sketch so you can see

I'm really struggling here and I can't get it right, not even knowing why. I'm using p5.js in WEBGL mode, I want to compute the position of on point rotated on the 3 axes around the origin in order to follow the translation and the rotation given to object through p5.js, translation and rotatation on X axis, Y axis and Z axis.

The fact is that drawing a sphere in 3d space, withing p5.js, is obtained by translating and rotating, since the sphere is created at the center in the origin, and there is no internal model giving the 3d-coordinates.

After hours of wandering through some math too high for my knowledge, I understood that the rotation over 3-axis is not as simple as I thought, and I ended up using Quaternion.js. But I'm still not able to match the visual position of the sphere in the 3d world with the coordinates I have computed out of the original point on the 2d-plane (150, 0, [0]).

For example, here the sphere is rotated on 3 axis. At the beginning the coordinates are good (if I ignore the fact that Z is negated) but at certain point it gets completely out of sync. The computed position of the sphere seems to be completely unrelated:

It's really hours that I'm trying to solve this issue, with no result, what did I miss?

Here it follows my code:

The thing that i wanna do is similiar with this video. In p5.js, I am using get() function. After use this, I will create small images (by dividing big tileset) and push them into an array. But in my code get() returns an empty pixels array. Here is a part of my code:

My logic is simple, create a state array and a stateIndex, when the user interacts with the drawing, save the current state as an entry in the array and increment the stateIndex.

When the user presses "undo" (for this sketch press any key), decrement the stateIndex and draw to the page whatever value is in state for that index.

I've implemented it in this sketch https://editor.p5js.org/mr_anonymous/sketches/s0C1M7x1w but as you can see instead of storing the last state of the drawing it seems to only store the blank state.

Anyone know what's going wrong?

Edit: Added source code

I thought I had the hang of promises in all situations, but I'm stuck here: I'd like an animation to happen on a timer. The only thing I can get from the graphics package is the frame number, so I compute an end frame based on a frame rate estimate.

The graphics package is p5.js, which exposes frameCount, that just runs up at about 60 fps on each draw cycle. (I named it currentFrame in this question, hoping that would clarify). As far as I can tell, this is the only visibility I get into the animation frame state in p5.js