# Animating maths in p5.js

**URL:** <https://discourse.processing.org/t/animating-maths-in-p5-js/31583>\
**Category:** Gallery\
**Created:** [August 5, 2021, 10:39pm UTC](https://discourse.processing.org/t/animating-maths-in-p5-js/31583 "2021-08-05T22:39:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![two.ticks](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/two.ticks/32/12676_2.png) [@two.ticks](https://discourse.processing.org/u/two.ticks)\
**Post date:** [August 5, 2021, 10:39pm UTC](https://discourse.processing.org/t/animating-maths-in-p5-js/31583/1 "2021-08-05T22:39:23Z")

</div>

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](https://github.com/two-ticks/p5.teach.js/tree/develop), library is in progress (any suggestions and feedback are welcomed ❤).

Collection : [p5.js Web Editor](https://editor.p5js.org/radium.scientist/collections/-xxYz8cof)

https://editor.p5js.org/radium.scientist/full/7ucXgK3Vzhttps://editor.p5js.org/radium.scientist/full/s1c5z0vEMhttps://editor.p5js.org/radium.scientist/full/ym8mRbuwChttps://editor.p5js.org/radium.scientist/full/9cWR718Ui
# Text and TeX animations
https://editor.p5js.org/radium.scientist/sketches/ym8mRbuwC
# 2-D Graphs
https://editor.p5js.org/radium.scientist/sketches/FPDw4KQWx
# 2-D Polar Graphs
https://editor.p5js.org/radium.scientist/sketches/9cWR718Uihttps://editor.p5js.org/radium.scientist/sketches/cVQipYG1L
# 2-D Parametric Graphs
https://editor.p5js.org/radium.scientist/sketches/7ucXgK3Vz
## 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 |

---

<div class="post-metadata">

**Author:** ![two.ticks](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/two.ticks/32/12676_2.png) [@two.ticks](https://discourse.processing.org/u/two.ticks)\
**Post date:** [August 6, 2021, 11:35am UTC](https://discourse.processing.org/t/animating-maths-in-p5-js/31583/2 "2021-08-06T11:35:41Z")

</div>

https://editor.p5js.org/radium.scientist/full/3ZN-KT8-Q

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [August 18, 2021, 6:30pm UTC](https://discourse.processing.org/t/animating-maths-in-p5-js/31583/3 "2021-08-18T18:30:41Z")

</div>

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](https://en.wikipedia.org/wiki/Kinetic_typography) artworks 😉