Animating maths in p5.js

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 :heart:).

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
9 Likes
3 Likes

Thank you for sharing this wonderful work, @two.ticks – congratulations on this great GSoC project, the animated text and TeX formatting for equations does seem perfect for teaching applications.

I’m sure it could also be useful for kinetic typography artworks :wink:

4 Likes