Differences

This shows you the differences between two versions of the page.

--- p5js-animation [2025/02/18 00:33] – created renick
+++ p5js-animation [2025/04/02 23:41] (current) – renick
@@ Line 23: / Line 23: @@
 ===== an example to work with =====
-So let's simplify and then change the code from the p5js site above so that we can understand animation better.
+So let's simplify and then change the code from the p5js site above so that we can understand animation better. Here's a link to a p5js sketch: https://editor.p5js.org/renick/sketches/dzUsUxKw9
   let x, y;
@@ Line 61: / Line 61: @@
 https://p5js.org/reference/#/p5/frameCount
-Let's add the frameCount to the middle of the window so that we can see it increasing.
+Let's add the frameCount to the middle of the window so that we can see it increasing. Here's a link to it in a p5js editor: https://editor.p5js.org/renick/sketches/k7ZkhVA5o
   let x, y;
@@ Line 117: / Line 117: @@
   Math.sin(0)
-Unlike Math.random, which gives us random values, Math.sin will move in order from -1 to 1 and then back. Let's have a look at it. In the code below, we divide the framecount by 100 and then get the sine of it. Watch how the number changes as the frameCount increases.
+Unlike Math.random, which gives us random values, Math.sin will move in order from -1 to 1 and then back. Let's have a look at it. In the code below, we divide the framecount by 100 and then get the sine of it. Watch how the number changes as the frameCount increases. See this in a p5js editor: https://editor.p5js.org/renick/sketches/AfFw6CHbb
   let x, y;
@@ Line 160: / Line 160: @@
   x = Math.abs(Math.sin(frameCount/100) * width)
-Here's a full example with a few other things adjusted to make it easier to see.
+Here's a full example with a few other things adjusted to make it easier to see. Have a look at it in the p5js editor here: https://editor.p5js.org/renick/sketches/EMUPWvu86
   let x, y;
@@ Line 227: / Line 227: @@
 ===== a complete example =====
-You might just want to see the ball float from left to right without going up and down. Here's the complete code for that, along with some animated text to help you understand what is going on.
+You might just want to see the ball float from left to right without going up and down. Here's the complete code for that, along with some animated text to help you understand what is going on. See it in action on the p5js editor: https://editor.p5js.org/renick/sketches/fEPJvGo79
   let x, y;