What do you want to graph? Create a parametric function in JavaScript.
Name it f(). For each input value t, between 0
and 1, f() returns a point like
{ x: 1, y: -0.08333333 }. You can do one time setup before
defining f(). See the examples and
additional instructions, below.
You can access these sliders from inside your code. The name of each
slider is written next to it in blue. The samples will
update immediately as you move the slider.
The first image shows your function tracing out the path. The second image shows how well each approximation matches the original. The table details the progress in the second image.
If you see a dark red or
pink line, that means that there's a
problem drawing the red line. If you see
these extra lines, the normal solution is to ramp up the
support.sampleCount.
| Circles | Amplitude | |
|---|---|---|
| Using | ||
| Adding | ||
| Available |
My take on the classic problem.
In this context “complex” means 2 dimensional. This page will convert any function into a series of circles, called a Fourier series. Add the circles back together to get the original function. Circles (or sines and cosines) are often essential because they easier to use than the original function.
This page lets you explore the Fourier series for a function. You can see how well the series approximates the original function, and how quickly it converges. And you can tweak the function and its parameterization to see the result.
The input to this page is a parametric function written in JavaScript.
Your function takes one input, t, and returns a point. As
t goes from 0 to 1, your function will trace out a path.
Different functions can trace out the same path. These are called
different “parameterizations.” The small,
light blue dot traces out the
results of your function as t increases at a constant rate.
The red dot always moves at a constant
speed, as a point of comparison.
The “Square” and “Square with Easing” examples show two parameterizations of the same shape. The former uses the simplest parameterization where the small blue dot is always moving at a constant speed. In the latter example the blue dot slows down around each of the corners, like a physical object would have to, speeding up through the straightaways. The latter example converges faster than the former, perhaps because sharp corners are difficult for a Fourier series, and this function spent more time around those trouble spots.
You have access to all of JavaScript. You also have access to a variable
called support which provides access to the following:
support.input() — You can call
support.input(n) to read a value from one of the sliders on
this page. 0 for the first slider, 1 for the second, etc. The value will
always come back in the range 0-1. (I’m looking at an improved UI, but
this works for now.)
support.ease() — You can say
t = support.ease(t) to convert the default linear timing
function into a timing function that eases in and out. The derivative of
this function is 0 around t=0 and t=1. This function is shaped like half
of a sine wave.
support.makeTSplitter() — This is way to split a
parametric function into smaller parts. Typically you’d call this once
in the setup part of the script, before defining f(). This
takes a list of bin sizes as an input. This returns a function
that you will call inside of f().
Full documentation.
support.makeTSplitterA() — This is way to split a
parametric function into smaller parts. Typically you’d call this once
in the setup part of the script, before defining f(). This
takes a number of bins as an input and it assumes
they are all the same size.
This will return a function that you will call inside of
f().
Full documentation.
support.lerpPoints() —
support.lerpPoints({x: x1, y: y1}, {x: x2, y: y2}, t) will
return a point on the line connecting the two input points. If
t is 0, lerpPoints() will return its first
input. If t is 1, lerpPoints() will return its
second input. For all other values of t,
lerpPoints() will linearly interpolate to create a new
point.
support.lerp() — Linear interpolation.
lerp(at0, at1, 0) → at0.
lerp(at0, at1, 1) → at1. E.g.
const randomValue = lerp(lowestLegalValue, HighestLegalValue,
Math.random());.
support.makeLinear() — A more powerful approach to
linear interpolation. This function returns another function.
Full documentation.
support.random() — Given a string to seed it, returns
a random number generator. The new random number generator can be a drop
in replacement for Math.random(). See it in use in the
“Polygons and Stars” example.
Full documentation.
support.referencePath — This describes the background
image that I am drawing in light blue. Initially it is empty. You can
set this in your one time initialization. If you don't, the software
will run your function at multiple places and create this path for you.
In either case, you can access the referencePath in the
function. support.referencePath.d accesses the
path string. support.referencePath.length gives you the length of the
path. support.referencePath.getPoint() gives you the x,y of
the path at a given distance along the path.
support.samples —
support.samples.hilbert[0] ...
support.samples.hilbert[3] and
support.samples.peanocurve[0] ...
support.samples.peanocurve[2] contain interesting path
strings.
support.sampleCount — How much detail to use when
displaying the output. If you see pink and dark red lines, try using
more samples. The current default of 200 is more than enough most of the
time. But in the "Like share and subscribe" example I set this to 2000.
support.maxKeyframes — If we have more than this many
circles, combine some of them to make this many bins.