Sketches | Creative coding sketches made with Java | Code Editor library

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'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:

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

In the following p5.js code I'm trying to create 2 separate methods.

centerInWindow() is meant to keep the image centered in the canvas while it's being scaled down after the user clicks on the canvas.

centerToClick() is meant to keep the image centered on the point the user clicked on, while it's being scaled up.

None of them work and I'm having trouble getting the logic right.

A common pattern in Arduino C++ sketches is the use of Serial.print() or Serial.println() to debug problems.

What is the corresponding Rust idiom when programming for the Arduino Uno?

TL;DR Why isn't the ball bouncing off of the edge in the link below?

I'm currently going through the CodingTrain P5JS videos. What I'm trying to achieve is a simple toggle button:

https://editor.p5js.org/S_Oda/sketches/uF_dgcQP-

When the button is 'on' it changes to red and the ball moves until it hits the left or right edge where it will bounce off and change to the opposite direction. When the button is toggled 'off' the ball will freeze in place, it will resume movement when the button is pressed again.

My problem is, when the ball hits the edge, it seems to glitch in place. The bouncing was working before I introduced the toggle button. The resoning for my code is that if I tie the 'speed' variable of the ball to be dependant on a boolean ("ballState"), then the button can just change whether 'ballState' is true or false, i.e. move or not move. So I'm wondering if the problem is here somewhere:

I want to turn this halting, discontinuous trails in the particle on this simulation

to something worth staring at as in this beautiful field flow in here (not my work, but I don't remember where I got it from).

I have tried different permutations of the code in the accomplished field flow without getting anything remotely close to the smoothness in the transitions that I was aiming for. I suspect I am mishandling the updates or the placement of the black rectangle that seems to circumvent the need for a black background, which would erase the wake of the particles.

I got half-way through what I wanted in the representation of physics vector fields in 2D with p5js here. The other half is to get random particles to dynamically follow the forces of the vector field, and I am having a lot of problems with it. I have tried multiple things to take into account the wrap-around of the particles, as well as the fact that I am translating the origin of the plot to the center of the canvas. However, the particles seem minimally affected by the individual vectors in the field, and ultimately march along the x axis with slight bumpiness.

The fact that I am completely new at JS doesn't help splice all these elements from several presentations available online, and I would appreciate any advise as to what may be going wrong, and where I should focus on.

Here is what I have so far: a file sketch.js corresponding to my own answer quoted above: