Where we start
if we plug that value into the derived solution for initial velocity, we can also derive the
gravity = -2h / th^2
because algebra
gravity can be defined by this ratio of the desired height and the desired time to peak

we need to know what th

time to peak is one of the things that we specify when we are designing it, so we know that

we can solve for the initial velocity, in terms of the gravity coefficient
We need to know what gravity will give us the duration to peak that we desire


our desired height of the jump is labelled h
the time needed to reach the top of the jump is labeled t h
the horizontal access is time
Desig
c = initial position
b = initial velocity
a= 0.5*gravit
the gravity coefficient controls the shape and steepness of the parabola

ax^2+bx+c
This polynomial
And we can integrate over time again to find the position from that

If we know our acceleration at any point in time then we can integrate to find the velocity


I want to move this far

if we want to define two dimensional movement, then the time to peak will fall out of the horizontal velocity and the gravity coefficient
We want to be able to describe the
How do we tune the feel of our movement?
Derive constants to model the trajectory in code


This is the important slide her
Designed trajectories on paper
Constructing a better jump
Q diff between this and PID
for 1D motion (like a servo motor or a NeoPixel strip), direction is the + or - sign
braking to slow down in 1D is negative acceleration, speeding up is positive
Becky Stern and furby
TODO: cam channels

one dimensional cubic hermite interpolation

// takes in a value between a and b, and spits out a fraction between 0 and 1, LINEARLY proportional to a and b
// InvLerp(10, 20, 10.8) = 0.08
float InvLerp( float a, float b, float v ) {
return ( v - a ) / ( b - a );
}
use case?
inverse lerp remaps color range to be more or less contrasty
t
if the function doesn’t clamp then you will get negative and large values
it doesn’t go above 1 or below 0, so it saturates
purple
creates a gradient map
so a and b are the thresholds
cyan
when player is 20 meters away, volume of 0
FastLED has some really fast lerp
functions
Lerp over space
when player is 10 meters away from thing, volume of 1 (maxed out)
blending over space
control e.g. audio volume by distance
or angles/radians
A and B can also be colors to blend between
or to move smoothly or oscillate between two coordinates (A and B)

a really useful way to remap things from 0 to 1 to some other range
if inputFraction and outputFraction can be different, we can move outputFraction toward inputFraction!
value
b
a
// takes in values a and b, and a fraction between 0 and 1 t, and returns a value between a and b,
// LINEARLY proportional to t
// Lerp(10, 20, 0.08) = 10.8
float Lerp( float a, float b, float t ) {
return ( 1.0f - t ) * a + b * t;
}
takes in a value between a and b, and spits out a fraction between 0 and 1
what it sounds like
(linear) blend between a and b, proportional to the fraction t
value
Inverse LERP
t
b
a
fraction (from 0 to 1)
float map( float iMin, float iMax, float oMin, float oMax, float v ) {
float t = InvLerp( iMin, iMax, v );
return Lerp( oMin, oMax, t );
}
end
start
Linear Interpolation (LERP)
anticipation
bouncy
explanation of the stepwise function
comments with the useful ranges
stretchy
overlapping action / inertia
add context and animation for three different values
have sets of f, z, r which work well for this type of movement
perky
or the movement of a servo motor
TODO gifs of movement at 6:27
lethargic
or the velocity of a DC motor
Sets of Movement Values
TODO: make gifs of the adjustments to f, z, r from around 4:30 ish timestamp
we could easily apply this to the movement of a sprite on a NeoPixel strip
would help think in terms of existing concepts we have learned in animation

TODO: go over non blocking delay substitutes
but since each individual parametric animation is expressed as 1 dimensional movement
The focus of the video is on game animation
so in a way, this space is kind of the same thing; notes on a subject currently under study
specifically: how do you learn to control the kind of character of movement you get with procedural animation?
TBH this whole space started as a project to understand the fundamentals behind applying this video to generative robot and NeoPixel animation
This video is best understood as the creator’s notes on what they have learned on this subject
Turns out, you can! With a little bit of extra math.
Wouldn’t it be great if we could have the responsiveness and flexibility of procedural animation, with the character and personality of keyframes and interpolation curves?
this is not always the tool you want, just like keyframe animation may not be the right fit for other things
modifying these scalar constants produces changes to the movement, but not in a super predictable way
more complex than other approaches
“It’s easiest to think of in terms of position, velocity, and acceleration. If used with a servo, for example, the servo will smoothly move to a target value with a trapezoidal velocity profile.”
these values scale the movement vectors; call them “scalars”
less direct control over the timing and movement than with keyframe animation
there is a good reason why this is how video games animate the movement of player avatars and mobs
you can tune a dynamic system by multiplying numeric constants by the velocity and acceleration variables
https://github.com/chillibasket/arduino-classes/tree/master/servo-trajectory
emergent behavior can be surprising, which can be good or bad
realtime reaction to inputs is super powerful!
super flexible and fun to play with
there is a learning curve
What about personality, though?
naturally fluid and reactive movement
Cons
initial complexity pays off when you scale up to many inputs or movements

can allow for very lifelike and emergent behavior
(but have never yet used)
Pros
These are possibly related resources I have in open tabs
a sensor value could be mapped to a target coordinate which your moving motor or pixels want to seek toward and arrive at
2
is 2 steps in the + direction from 0
-3
is 3 steps in the - direction from 0
sensor input could stretch a virtual spring, or push a swinging pendulum

that force gets applied to the acceleration of a moving thing

Whether you group the coordinates of two or three different motors together as a vector depends on whether that makes sense for your particular setup
A 1D vector is just a number on a number line!
consider mapping an input (such as sound volume, or a rangefinder) to a force
For 3D, we store (x, y, z)

Nature of Code - Forces
This is sometimes called a “second order” system.
for 2D values, a vector is stored as the (x,y) coordinates of travel from (0,0)
Or a pair of closely related servos might describe a 2D vector with (p1, p2) coordinates

so we do not control position directly, just the acceleration.
Nature of Code has great videos explaining 2D vectors in p5.js
the forces we are applying to change the motion
acceleration changes velocity, velocity changes the position
Vectors describe a direction and magnitude of movement
Individual motors such as servos can be thought of as 1D movement: floats or ints can store their position, velocity, and acceleration vectors
Acceleration
the distance and direction moved last time we updated
Velocity
speed and direction of the change we want to make to the velocity
acceleration is the change to velocity, i.e. the speed and direction the thing is currently moving
for 2D motion (e.g. on screen, matrix), position, velocity, and acceleration can be represented as vectors
servo position
Position
speed and direction thing is moving right now

current pixel on a NeoPixel strip
current coordinates of moving thing
our code will make changes to the acceleration of a motor or pixels, rather than moving it directly
(x,y) coordinates on a 24 x 24 LED matrix
This does move “on the fly” toward a moving target
The Nature of Code is a fantastic resource for using velocity and acceleration for naturalistic movement
Velocity, acceleration, and trajectories!
so the movement ends up looking unnatural, despite following a smoothed curve
animation which dynamically follows a changing input parameter is procedural
other following / seeking behavior with unpredictable and/or changing target destinations
responding to unpredictable changes in sensor values
eyes or ears tracking input direction

These ears move along smoothed interpolation curves to try and follow a sensor value, but the value changes unpredictably
or when the animation you want is a response to unpredictable or chaotic inputs
or when you want something to move as though it has physical properties like a spring, or pendulum
many libraries and tools available
not the best tool when the movement’s beginning and end points are chaotic and unpredictable
powerful tool for movement with personality
repeatable
this means the movement is predefined, not spontaneous
fine-grained control
Cons
Pros
anticipatory movements before another larger movement
adding follow-through and overlapping action to a larger movement
head tilt
robot transformation sequences
opening or closing something
eyebrow waggles
movement or gesture which you really want fine-grained control over to make it feel right
the in between frames are interpolated
moving a flag or sign
More complicated sets of movements
ear twitches
bringing something in or out of view
combined movements of head, eyes, in a pre-rendered gesture
This is how traditional animation is often done: important (key) frames are drawn first, then the in-betweens.
works great for
Issue: ‘the curve does not update “on the fly” in response to updated sensor inputs’ (see https://github.com/siteswapjuggler/RAMP/issues/19#issuecomment-984511412 )

move from one pose to another pose over a known time period
this is really great for keyframe animation
if this isn’t the right kind of movement, there are different options
for interpolation along a curve, easing functions do for pixels what the mechanical linkages do for mechanical movement

https://easings.net/#easeOutCubic
the type of motion you get is similar to easeOutCubic
-- fast movement slowing to a stop as it reaches the target
switch1Smoothed = (switch1 * 0.05) + (switch1Prev * 0.95);
switch1Prev = switch1Smoothed;
servo1.writeMicroseconds(switch1Smoothed);
void loop() {
switch1 = digitalRead(12); // read switch
switch1 = switch1 * 100; // multiply by 100
// *** smoothing ***
switch1Smoothed = (switch1 * 0.05) + (switch1Prev * 0.95);
switch1Prev = switch1Smoothed;
// *** end of smoothing ***
Serial.print(switch1); // print to serial terminal/plotter
Serial.print(" , ");
Serial.println(switch1Smoothed);
delay(10); // run loop 100 times/second
}
the resulting movement starts fast, and slows as it reaches target position
move 10% of the remaining distance to your target location each frame
position += (target - position) * .1;
servo1.writeMicroseconds(position);
seriously this is a huge improvement for very little effort
one tiny change to movement code: add a simple smoothing algorithm
great place to start
Really Simple Movement Smoothing
simple works
simple is good
use springs if you want something to return back to position
https://web.archive.org/web/20120606141658/http://www.makingthingsmove.com/resources/
we can control that with the code driving the movement
Book: Making Things Move by Dustyn Roberts
????????
Physical linkages aside, we probably want to learn how to smooth and control the motion of our motors or pixels
and the physical design of the geometry of that connection can make the resulting motion move much more naturally
adafruit learn tutorials

OddJay’s companion robots
Your servo motor or DC motor will move the trigger of a linkage
Mechanical Design and Prototyping - walking robot project
Resources for making physical stuff move
4-bar linkages consist of four rods connected by pins. These mechanisms convert rotational motion into a rocking motion which can be useful in robotic arms, clamping mechanisms, animatronics etc.
The combination of levers, joints, rods, and springs create a physical non-linear system
movement along a curve speeds up and slows down, like living things do
non-linear movement feels more natural and alive
linear movement can look mechanical and lifeless

when motion is linear (a la linear interpolation or lerp), it moves at a constant rate
Or cams and followers

what do we mean by non linear?
Planetary Gears, for example
The relationship between an input and the resulting motion is nonlinear

This site has many examples of basic mechanical movements
one example is the four-bar linkage
not the only example! There are many others
If your mover is a motor or other physical movement, there is a lot you can do with very simple hardware
Puppets and animatronics connect physical input to physical movement with linkages
First tip: don’t glue what you want to move directly to your servo horn
regardless of the form, it will take work to find the type of motion you want to see, and make it happen

It could be pixels
what your mover looks like when it is outside your head
#include <Servo.h>
Servo myservo; // create servo object to control a servo
int potpin = 0; // analog pin used to connect the potentiometer
int val; // variable to read the value from the analog pin
void setup() {
myservo.attach(9); // attaches the servo on pin 9 to the servo object
}
void loop() {
val = analogRead(potpin); // reads the value of the potentiometer (value between 0 and 1023)
val = map(val, 0, 1023, 0, 180); // scale it to use it with the servo (value between 0 and 180)
myservo.write(val); // sets the servo position according to the scaled value
delay(15); // waits for the servo to get there
}
how the movement reacts to changes in input
some kind of very simple software connects the knob to the motion of your mover
some other form of motion

It can be a servo motor
a knob to turn, standing in for some kind of control system
this is how you see what the movement looks like
a solenoid
Let’s just call it a “mover”
pixels on an LED strip
a servo or dc motor
and something we want to make move
a potentiometer
Mover
Knob
And then explore different ways of smoothing, animating, and tuning the software which controls the movement
We touch briefly on some changes to the physical setup and connections of a physical mover
Then, as you scroll down and around, we will explore different ways to improve the movement of our model
First, we will start where we usually start: a simple toy model of a thing we want to make move.
At some point when designing a moving thing, we have two things set up on a breadboard

Here is the simplest model of a system under design
It’s about learning how to give personality and liveliness to moving things
The idea is to explore how you can learn to control the type of motion you get
This space is a summary of some ways to improve the quality of motion of a robot, or a pixel animation.
it just isn’t moving the way I imagined.
Often, though, it feels like...
Congratulations! That is hard!
Let’s say you have a microcontroller that moves something
Introduction