What do you want to graph? Create a parametric function in JavaScript. For
each input value t, between 0 and 1, return an object with
x and y parameters, both numbers.
function (t /* A value between 0 and 1, inclusive. */,
support) {
"use strict";
return { x, y };
}
The far left means that t sweeps from 0 to 1. This is the
default. Set this ¼ of the way from the left to make t start
at 0.25, sweep toward 1, wrap around at 0, then move back to 0.25 to
finish. The right end of the scale means to start from 1, which is
effectively the same as starting from 0. For a closed path this setting
should not change the basic shape that gets stroked or filled. However,
the difference can be obvious in some animations and other special
effects.
This software will make a path approximating your function. This software takes samples at n evenly spread values of t. At each t, this software will record the position of your function and its derivative. Each segment is made of a part of a parabola chosen to best match the samples at either end.
If you plan to smoothly morph between two paths, make sure this parameter is the same when you create each path. The rest should work itself out automatically.
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 output from this program is a css path, a string. That path can be used a lot of different ways. Here are a few examples.
I have provided one demo using
style.clipPath. style.clipPath is a very powerful tool. However, I
usually prefer to work with a mask instead of a clipPath. I get a
superset of the abilities with a lot less drama.
I have provided two demos using
style.maskImage. The first is a pointer to a live <mask> in a live
<svg>. This gives incredible control. The second is a
data-url. You can create the data-url in advance and use it without any
JavaScript. You can use a variety of
style.mask-* properties to customize this mask.
<path />
Desmos can draw your equations very well. But what if you want to display your results somewhere else? A path can be used in so many places so you can integrate your results with a bigger project. This code's been around for a while, but I just built this user interface to let you poke around without any serious programming.
This video will show you how to use this page, and it will discuss the origins of this page and this project. You can find general information about this project here.
You are creating a parametric function for use with
PathShape.parametric(). You can call that code directly from a JavaScript project. Or you can
enter a simple parametric function directly into the big text area at the
top of this page then hit the “Go” button.
Notice the blue, code style text above and below the text
area. This program automatically writes some of the code for you. You have
no control over the input arguments. The body of your function always
starts with "use strict"; and ends with
return { x, y };. You just type the unique part of your code
in the middle.
Your function will take in a value from 0 to 1 in a parameter named
t. Your function needs to return an object of the form
{x: 4, y: 5.01}. Most of the examples create
x and y as constants or variables, and use the
implicit return { x, y }; at the bottom of the
function to return the result. However, an explicit return is
also allowed.
The range of the output doesn't matter. This web page will automatically scale and pan your path to fit. It will preserve the aspect ratio.
Your function will take in a second parameter named support. 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.