Sketch.js | Vector drawing app w/ animated replay

From the documentation for createCanvas:

Creates a canvas element in the document, and sets the dimensions of it in pixels. This method should be called only once at the start of setup. Calling createCanvas more than once in a sketch will result in very unpredictable behavior.

Instead of calling createCanvas repeatedly in your drawing functions, you should use resizeCanvas once when transitioning from one screen to another.

I couldn't actually reproduce whatever issue you were describing (partly because I could not make sense of your description). However I did also notice an issue with the variable ripple not being declared anywhere, so I fixed that, and now the sketch appears to be working correctly.

It is because you are declaring let can and let center inside a function, so it's only stored locally.

Try defining let can, center; at the beginning of your code, and then removing the lets inside function setup() Something like:

You are currently calculating r for each point when drawing the path. Since you redraw the entire path each frame all of the segments will grow. To prevent this you need to make r something that you calculate when you are adding points and include it in the data structure for the path.

There are numerous issues with the posted code, and it is hard to tell which are because this code is incomplete, and which are bugs. However here are a few issues that stand out.

• You have no setup function
• You are creating a new canvas on every call to begining which doesn't make much sense.
• You are creating HTML elements in functions called in draw
  • Unless you disable looping you should not do this because HTML elements are persistent.
• You are calling noLoop as an instance method on p5.Element in multiple places, this is not valid.
• In the button function you create 200 "Next" buttons, that's probably not what you want to do.
• In the button function you do a bunch of drawing, but unless looping is disabled this will immediately be covered up by the call to background in bankScreen on the next execution of draw
• You don't remove the elements from the "beginning" screen when the submit button is clicked and you try to move to the "bankScreen"
• When next page is clicked you are already on screen = 1 so that function has no effect.

I've attempted to fix the issues with your code:

It's possible that you don't have permission to access the camera in the context where you are using this code. If your code is running in an iframe on another website it may have restrictions that prevent it from even requesting access to the webcam.

Other than that your code mostly works. However, when you get to screen 1 (a.k.a. mainScreen) you are currently recreating the buttons and capture every frame, which is not what you want to do. Both buttons and capture objects are persistent, so you only need to create them once.

Additionally, while your code displays the webcam video on the screen it will not be present in the file generated when you click saved. This is because creating a capture object doesn't actually draw the captured images to your canvas. Instead you need to hide the capture object and draw it as an image to the canvas. Here is a working version of your code hosted on p5js.org. And bellow is an abridge version with just the relevant bits:

In order to draw your arrow head you will need to draw the desired triangle when the mouse is released. P5.js will call various input event functions when the user performs input actions and one such function is mouseReleased(). Here is an example of drawing arrow heads in the mouseReleased function.

I checked the p5js docs and found out how to do it. Look at setup for the changes.

You can do something similar to this. I set the x and y to the values of num1 and num2 in a loop. I don't fully understand why it would be useful but maybe it can help you in the right direction.

UPDATE:

You're shifting properly, but you forgot to clear the pg graphic, which is kind of like forgetting to put background(0) in your original sketch. So instead of drawing all the ellipses on a blank background, you're drawing them on top of the previous frame.

Adding pg.clear() anywhere in draw() after you display pg on the canvas (image(pg, ...)) and before you draw the ellipses (for (...) {... ellipse(nosePosition[i].x...)}) should do the trick. Here's where I put it: