Hi everyone! I have been working on animating text, TeX and geometric shapes in GSoC’21 with mentors @Jithin and @mcintyre. I would like to share some of the results here with the community.
You can see the library at GitHub - two-ticks/p5.teach.js at develop, library is in progress (any suggestions and feedback are welcomed 
).
Collection : p5.js Web Editor
Text and TeX animations
2-D Graphs
2-D Polar Graphs
2-D Parametric Graphs
createText(text, x, y, font-size)
Parameters
| Parameter | Type | Description |
|---|---|---|
| text | string |
the alphanumeric symbols to be displayed |
| [x] | number |
x-coordinate of text |
| [y] | number |
y-coordinate of text |
| [font-size] |
number px |
font-size of text |
[ ] : optional arguments
Methods
| Method | Description |
|---|---|
| object.position(x, y) | sets position of text object |
| object.size(font-size) | sets size of text object |
| object.fill(fillColor) | sets fill of text object |
| object.play(“animation-type”, [startTime], [endTime]) | play animation of specified type (startTime and endTime are in seconds) |
| object.add() | adds object to scene without animation |
| object.remove() | removes object from scene without animation |
| Animations | Description |
|---|---|
write |
Writes the text with a blurry effect at each new character |
fadeOut |
Make a fade-out effect |
fadeIn |
Make a fade-in effect |
waveIn |
Make a wave in effect: appears on the screen with a wave |
waveOut |
Make a wave out effect: disappear from the screen with a wave |
erase |
Make an eraser effect and make text disappear from the screen |
dissolve |
Dissolves the text and make it disappear from the screen |
spinOut |
Spins the text and make it disappear from the screen |
createTeX(tex, x, y, font-size)
Parameters
| Parameter | Type | Description |
|---|---|---|
| tex | string |
escaped TeX sequence |
| [x] | number |
x-coordinate of tex |
| [y] | number |
y-coordinate of tex |
| [font-size] |
number px |
font-size of text |
[ ] : optional arguments
Methods
| Method | Description |
|---|---|
| object.position(x, y) | sets position of tex object |
| object.size(width, height) | sets width and height of tex object |
| object.fill(fillColor) | sets fill of tex object |
| object.stroke(strokeColor) | sets stroke color of tex |
| object.strokeWidth(strokeWidth) | sets stroke-width of tex |
| object.play(“animation-type”, [startTime], [endTime]) | play animation of specified type |
| object.add() | adds object to scene without animation |
| object.remove() | removes object from scene without animation |
| Animations | Description |
|---|---|
write |
Writes the TeX with a blurry effect at each new character |
fadeOut |
Make a fade-out effect |
fadeIn |
Make a fade-in effect |
dissolve |
Dissolves the tex and make it disappear from the screen |
appear |
make it appear from the screen character by character |
blink |
blinking tex |
create2DGraph(equation, x, y, width, height)
Parameters
| Parameter | Type | Description |
|---|---|---|
| equation | function |
function to be plotted |
| [x] | number |
x-coordinate of graph |
| [y] | number |
y-coordinate of graph |
| [width] |
number px |
width of SVG |
| [height] |
number px |
height of SVG |
[ ] : optional arguments
| Method | Description |
|---|---|
| object.plot() | plots the graph |
| object.position(x, y) | sets position of graph object |
| object.size(width, height) | sets width and height of graph object |
| object.stroke(strokeColor) | sets stroke color of graph object |
| object.play() | play animation of creation |
| object1.transform(object2) | transforms object1 into object2 |
create2DPolarGraph(equation, theta-range, x, y, width, height)
Parameters
| Parameter | Type | Description |
|---|---|---|
| equation | function |
function to be plotted |
| theta-range | number array |
range of theta |
| [x] | number |
x-coordinate of graph |
| [y] | number |
y-coordinate of graph |
| [width] |
number px |
width of SVG |
| [height] |
number px |
height of SVG |
[ ] : optional arguments
| Method | Description |
|---|---|
| object.plot() | plots the graph |
| object.position(x, y) | sets position of graph object |
| object.size(width, height) | sets width and height of graph object |
| object.stroke(strokeColor) | sets stroke color of graph object |
| object.play() | play animation of creation |
| object1.transform(object2) | transforms object1 into object2 |
create2DParametricGraph(x, y, [range])
Parameters
| Parameter | Type | Description |
|---|---|---|
| x expression | function |
x expression |
| y expression | function |
y expression |
| [range] | number array |
range of parameter |
[ ] : optional arguments
| Method | Description |
|---|---|
| object.plot() | plots the graph |
| object.position(x, y) | sets position of graph object |
| object.size(width, height) | sets width and height of graph object |
| object.stroke(strokeColor) | sets stroke color of graph object |
| object.play() | play animation of creation |
| object1.transform(object2) | transforms object1 into object2 |
