Applied Math for Creative Coders
  1. Dancing With Newton
  • Math Models for Creative Coders
    • Maths Basics
      • Vectors
      • Matrix Algebra Whirlwind Tour
      • Things at Right Angles
      • content/courses/MathModelsDesign/Modules/05-Maths/70-MultiDimensionGeometry/index.qmd
    • Tech
      • Tools and Installation
      • Adding Libraries to p5.js
      • Using Constructor Objects in p5.js
      • The Open Sound Protocol
    • Geometry
      • Circles
      • Complex Numbers
      • Fractals
      • Affine Transformation Fractals
      • L-Systems
      • Kolams and Lusona
    • Media
      • Fourier Series
      • Additive Sound Synthesis
      • Making Noise Predictably
      • The Karplus-Strong Guitar Algorithm
    • AI
      • Working with Neural Nets
      • The Perceptron
      • The Multilayer Perceptron
      • MLPs and Backpropagation
      • Gradient Descent
    • Projects
      • Projects

On this page

  • Introduction
    • Position
    • Velocity

Dancing With Newton

mechanics
Published

February 7, 2025

Modified

Invalid Date

Introduction

What do we recall from our school-time encounter with Newtonian Physics?

We have several aspects to movement, e.g.:

  • position
  • velocity
  • acceleration
  • rotation
  • oscillation
  • friction

And here are some more terms from the spacecraft/rocket science domain:

  • roll
  • pitch
  • yaw
  • jerk

Anything else?

We need to think of a way in which these aspects can be modelled and coded to suit our creative needs. Let us define these terms once again, so that we know what we are talking about!

Position

Note

Where an object is, say in {x,y} coordinates.

In p5.js we can create the coordinates of an object separately, as x and y, OR create a p5.Vector object that can manipulate both coordinates together.

Why would we manipulate coordinates? Because we want things to move! Movement is manipulation of position.

Velocity

NoteVelocity

Rate of change of distance travelled. So \(velocity \sim distance/time\). We can have movement in the x or y direction independently, or both movements can be simultaneous ( but not necessarily equal!) using the p5.Vector objects.

How do we model this in code? p5.js has a FrameRate (60 frames/second. Check this!!); this is the rate at which the code computes and refreshes the display. We can take individual x and y positions and add something to them each frame, causing the object to move. If the object is a p5.Vector object, we manipulate these coordinates using Vector arithmetic, which we will peep into shortly.

Back to top

Citation

BibTeX citation:
@online{2025,
  author = {},
  title = {\textless Iconify-Icon Icon=“ph:circles-Three-Fill”
    Width=“1.2em”
    Height=“1.2em”\textgreater\textless/Iconify-Icon\textgreater{}
    \textless Iconify-Icon Icon=“gravity-Ui:function” Width=“1.2em”
    Height=“1.2em”\textgreater\textless/Iconify-Icon\textgreater{}
    {Dancing} {With} {Newton}},
  date = {2025-02-07},
  url = {https://mathforcoders.netlify.app/content/courses/MathModelsDesign/Modules/10-Physics/01-Movement/},
  langid = {en}
}
For attribution, please cite this work as:
“<Iconify-Icon Icon=‘ph:circles-Three-Fill’ Width=‘1.2em’ Height=‘1.2em’></Iconify-Icon> <Iconify-Icon Icon=‘gravity-Ui:function’ Width=‘1.2em’ Height=‘1.2em’></Iconify-Icon> Dancing With Newton.” 2025. February 7, 2025. https://mathforcoders.netlify.app/content/courses/MathModelsDesign/Modules/10-Physics/01-Movement/.

License: CC BY-SA 2.0

Website made with ❤️ and Quarto, by Arvind V.

Hosted by Netlify .