Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
p5js-animation [2025/04/02 23:28] renickp5js-animation [2025/04/02 23:41] (current) renick
Line 61: Line 61:
 https://p5js.org/reference/#/p5/frameCount 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;   let x, y;
Line 117: Line 117:
   Math.sin(0)   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;   let x, y;
Line 160: Line 160:
   x = Math.abs(Math.sin(frameCount/100) * width)   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;   let x, y;
Line 227: Line 227:
 ===== a complete example ===== ===== 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;   let x, y;
  • p5js-animation.1743661722.txt.gz
  • Last modified: 4 weeks ago
  • by renick