diff --git a/README.md b/README.md
index ec40cf0..ddfed6f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,8 @@
-# p5.teach.js
+# p5.teach.js
+
+
+
+> A beginner friendly math animation library for p5.js
p5.teach.js provides tools for teaching through p5.js, such as functions to animate text, TeX, and shapes.
@@ -6,7 +10,8 @@ p5.teach.js provides tools for teaching through p5.js, such as functions to anim
## Documentation
-- [API Reference](api_reference.md)
+- [TypeDoc Documentation](https://two-ticks.github.io/p5.teach.js/docs/index.html)
+- [API Reference](https://two-ticks.github.io/p5.teach.js/api_reference.md)
- [Example Sketches](https://editor.p5js.org/radium.scientist/collections/-xxYz8cof)
## Setting up the development environment
@@ -17,6 +22,11 @@ p5.teach.js provides tools for teaching through p5.js, such as functions to anim
4. As the code is updated, the final js file is updated in `dist/p5.teach.js` dynamically
5. The sketch in the `index.html` file is reflected with the changes
+## Generating documentation
+
+1. We use `TypeDoc`
+2. Run `yarn typedoc src` for generating docs
+
## Tests
1. We use `jest` for testing
diff --git a/api_reference.md b/api_reference.md
index 3cb3942..2f87228 100644
--- a/api_reference.md
+++ b/api_reference.md
@@ -2,9 +2,25 @@
## Index
+- MObject
- [`createText(text, x, y, font-size)`](#createtexttext-x-y-font-size)
- - [`createTeX(tex, x, y, width, height)`](#createtextex-x-y-width-height)
- -
+ - [`createTeX(tex, x, y, font-size)`](#createtextex-x-y-font-size)
+- GObject
+ - [`create2DGraph(equation, x, y, width, height)`](#create2dgraphequation-x-y-width-height)
+ - [`create2DPolarGraph(equation, theta-range, x, y, width, height)`](#create2dpolargraphequation-theta-range-x-y-width-height)
+ - [`create2DParametricGraph(x, y, [range])`](#create2dparametricgraphx-y-range)
+ - [`.axes()`]()
+ - [`.configure()`]()
+- Scene
+ - [`Scene()`](#scene)
+ - [`createControls()`](#createcontrols)
+ - [`clock()`](#clock)
+ - [`addDuration(timeDuration)`](#adddurationtimeduration)
+ - [`.add()`](#add)
+ - [`.remove()`](#remove)
+ - [`.play()`](#playanimationtype)
+ - [`transform()`](#transformobject1-object2)
+ - [`group()`](#groupobjects)
## `createText(text, x, y, font-size)`
@@ -38,6 +54,9 @@ let myText = createText('Cat and Dogs');
[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/LVPT38ig-)
+
+ Code
+
```js
function setup() {
createCanvas(400, 400);
@@ -60,6 +79,8 @@ function reel() {
}
```
+
+
| **Animations** | Description |
| :------------- | :------------------------------------------------------------ |
| `write` | Writes the text with a blurry effect at each new character |
@@ -71,17 +92,16 @@ function reel() {
| `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, width, height)`
+## `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 |
-| [width] | `number` px | width of SVG |
-| [height] | `number` px | height of SVG |
+| 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
@@ -115,6 +135,9 @@ let tex = createTeX('\\overrightarrow{F}_{12} = k_e \\frac{q_1 q_2}{r^2}');
[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/1YDfYFeF9)
+
+ Code
+
```js
function setup() {
createCanvas(400, 400);
@@ -137,3 +160,803 @@ async function reel() {
play(tex, 'all-at-once');
}
```
+
+
+
+## `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
+
+```js
+let curve = create2DGraph((t) => 400 + 1500 * cos(2 * t));
+```
+
+| 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 |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/Nl55ATBHk)
+
+
+ Code
+
+```js
+function setup() {
+ createCanvas(400, 400);
+ background(220);
+ scene = new Scene();
+ reel();
+}
+
+function draw() {
+ background(220);
+}
+
+function reel() {
+ let graph1 = create2DGraph(
+ (t) =>
+ 800 * cos(2 * t) + 1000 * sin(4 * t) + 800 * sin(6 * t)
+ );
+ graph1.plot();
+ graph1.position(10, 200);
+ graph1.play();
+
+ let graph2 = create2DGraph((t) => 800 * cos(2 * t));
+ graph2.plot();
+ graph2.position(10, 0);
+ graph2.play();
+
+ let graph3 = create2DGraph((t) => 1000 * sin(4 * t));
+ graph3.plot();
+ graph3.position(10, 50);
+ graph3.play();
+
+ let graph4 = create2DGraph((t) => 800 * sin(6 * t));
+ graph4.plot();
+ graph4.position(10, 100);
+ graph4.play();
+}
+```
+
+
+
+## `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
+
+```js
+let curve = create2DPolarGraph(
+ (t) =>
+ 15 *
+ (pow(Math.E, cos(t)) -
+ 2 * cos(4 * t) -
+ pow(sin(t / 12), 5)),
+ [0, 12 * PI]
+);
+```
+
+| 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 |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/am40f47oTj)
+
+
+ Code
+
+```js
+function setup() {
+ createCanvas(400, 400);
+ background(220);
+ scene = new Scene();
+ reel();
+}
+
+function draw() {
+ background(220);
+}
+
+function reel() {
+ let graph = create2DPolarGraph(
+ (t) =>
+ 15 *
+ (pow(Math.E, cos(t)) -
+ 2 * cos(4 * t) -
+ pow(sin(t / 12), 5)),
+ [0, 12 * PI]
+ );
+ graph.plot();
+ graph.size(400, 400);
+ graph.position(50, 50);
+ graph.play();
+}
+```
+
+
+
+## `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
+
+```js
+let curve = create2DParametricGraph(
+ (t) => 40 * sin(4 * t + QUARTER_PI),
+ (t) => 40 * cos(5 * t)
+);
+```
+
+| 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 |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/_CHFblWtj)
+
+
+ Code
+
+```js
+let button;
+let A = 40;
+let B = 40;
+let a = 3;
+let b = 2;
+let d = Math.PI / 4;
+
+function setup() {
+ createCanvas(400, 400);
+ background(0);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function reel() {
+ let curve1 = create2DParametricGraph(
+ (t) => A * sin(a * t + d),
+ (t) => B * cos(b * t)
+ );
+
+ curve1.plot();
+ curve1.stroke('blue');
+ curve1.position(50, 50);
+ a = 5;
+ b = 4;
+ d = PI / 8;
+
+ let curve2 = create2DParametricGraph(
+ (t) => A * sin(a * t + d),
+ (t) => B * cos(b * t)
+ );
+ curve2.stroke('blue');
+ // curve2.plot();
+ curve2.size(400, 400);
+ curve2.position(50, 150);
+ curve1.transform(curve2, 0, 10);
+}
+
+```
+
+
+
+## `createControls()`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+createControls();
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); // sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 * i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `Scene()`
+
+**Description**
+A class to describe a `Scene`. A scene contains all of the objects (such as MObjects and GObjects) created by p5.teach. All the objects exist inside a div element of the `sceneContainer` class.
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+scene = new Scene();
+```
+
+| Method | Description |
+| :------------------ | :------------------------------------------------- |
+| remove() | removes `sceneContainer` |
+| delay(timeDuration) | provide async delay of `timeDuration` milliseconds |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+}
+```
+
+
+
+## `clock()`
+
+**Description**
+`clock()` returns the current time of the p5.teach animation timeline(anime.js). It is used to synchronise p5.js elements with p5.teach animation timeline.
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+clock();
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); // sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 * i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `addDuration(timeDuration)`
+
+**Description**
+`addDuration(timeDuration)` adds `timeDuration` to the animation timeline.
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+addDuration(timeDuration);
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); // sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `.add()`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+add();
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); // sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `.remove()`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+remove();
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+
+function draw() {
+ background(220);
+ t = clock(); // sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `.play(animationType)`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+.play(animationType)
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); //sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `transform(object1, object2)`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+transform(object1, object2);
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); //sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
+
+## `group([objects])`
+
+**Parameters**
+
+| Parameter | Type | Description |
+| :-------- | :--- | :---------- |
+| | | |
+
+[ ] : optional arguments
+
+```js
+group([objects]);
+```
+
+| Method | Description |
+| :----- | :---------- |
+| | |
+
+**Example**
+
+[🔗example sketch](https://editor.p5js.org/radium.scientist/sketches/PpfDceZsi)
+
+
+ Code
+
+```js
+let t = 0;
+let i = 0;
+let MAGENTA50 = '#dc267f';
+
+function setup() {
+ createCanvas(400, 400);
+ scene = new Scene();
+ createControls();
+ reel();
+}
+
+function draw() {
+ background(220);
+ t = clock(); //sets t = time of animation timeline
+
+ if (t < 1000) i = t;
+
+ fill(255, 0, 0);
+
+ rect(30 + 0.25 \* i, 20, 75, 10);
+}
+
+function reel() {
+ let title = createText('Lorentz Transformation', 30, 75, 35);
+ title.fill('red');
+ title.play('growFromCenter', 1, 4);
+ let equation = createTeX(
+ '\\gamma = \\dfrac{1}{\\sqrt{1 - \\frac{v^2}{c^2}}}'
+ );
+ equation.position(45, 175);
+ equation.size(50);
+ equation.stroke(MAGENTA50);
+ equation.strokeWidth(20);
+ equation.fill(MAGENTA50);
+ equation.play('createFill', 1, 6);
+}
+```
+
+
diff --git a/assets/examples/TeX.html b/assets/examples/TeX.html
new file mode 100644
index 0000000..ffe384e
--- /dev/null
+++ b/assets/examples/TeX.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/p5-astrik-teach.png b/assets/p5-astrik-teach.png
new file mode 100644
index 0000000..18f9afa
Binary files /dev/null and b/assets/p5-astrik-teach.png differ
diff --git a/assets/p5-teach-logo.png b/assets/p5-teach-logo.png
new file mode 100644
index 0000000..76fff28
Binary files /dev/null and b/assets/p5-teach-logo.png differ
diff --git a/dist/index.html b/dist/index.html
index 8314824..01985f2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,9 +1,13 @@
-
+
+
+
-
+
+
+
-
-
\ No newline at end of file
+
+
diff --git a/dist/p5.teach.js b/dist/p5.teach.js
index 7e658c4..e7f60d1 100644
--- a/dist/p5.teach.js
+++ b/dist/p5.teach.js
@@ -1,605 +1,47471 @@
-parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;ci.length}}}},t.prototype.add=function(i,e){void 0===e&&(e=t.DEFAULTPRIORITY);var r=this.items.length;do{r--}while(r>=0&&e=0&&this.items[i].item!==t);i>=0&&this.items.splice(i,1)},t.DEFAULTPRIORITY=5,t}();exports.PrioritizedList=t;
-},{}],"GAK3":[function(require,module,exports) {
-"use strict";var t=this&&this.__extends||function(){var t=function(r,e){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,r){t.__proto__=r}||function(t,r){for(var e in r)Object.prototype.hasOwnProperty.call(r,e)&&(t[e]=r[e])})(r,e)};return function(r,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=r}t(r,e),r.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}}(),r=this&&this.__values||function(t){var r="function"==typeof Symbol&&Symbol.iterator,e=r&&t[r],n=0;if(e)return e.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")};Object.defineProperty(exports,"__esModule",{value:!0}),exports.HandlerList=void 0;var e=require("../util/PrioritizedList.js"),n=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return t(n,e),n.prototype.register=function(t){return this.add(t,t.priority)},n.prototype.unregister=function(t){this.remove(t)},n.prototype.handlesDocument=function(t){var e,n;try{for(var o=r(this),i=o.next();!i.done;i=o.next()){var u=i.value.item;if(u.handlesDocument(t))return u}}catch(l){e={error:l}}finally{try{i&&!i.done&&(n=o.return)&&n.call(o)}finally{if(e)throw e.error}}throw new Error("Can't find handler for document")},n.prototype.document=function(t,r){return void 0===r&&(r=null),this.handlesDocument(t).create(t,r)},n}(e.PrioritizedList);exports.HandlerList=n;
-},{"../util/PrioritizedList.js":"oqxq"}],"L9Lo":[function(require,module,exports) {
-"use strict";function r(r){return new Promise(function t(e,n){try{e(r())}catch(o){o.retry&&o.retry instanceof Promise?o.retry.then(function(){return t(e,n)}).catch(function(r){return n(r)}):o.restart&&o.restart.isCallback?MathJax.Callback.After(function(){return t(e,n)},o.restart):n(o)}})}function t(r){var t=new Error("MathJax retry");throw t.retry=r,t}Object.defineProperty(exports,"__esModule",{value:!0}),exports.retryAfter=exports.handleRetriesFor=void 0,exports.handleRetriesFor=r,exports.retryAfter=t;
-},{}],"aZeM":[function(require,module,exports) {
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mathjax=void 0;var e=require("./core/HandlerList.js"),r=require("./util/Retries.js");exports.mathjax={version:"3.2.0",handlers:new e.HandlerList,document:function(e,r){return exports.mathjax.handlers.document(e,r)},handleRetriesFor:r.handleRetriesFor,retryAfter:r.retryAfter,asyncLoad:null};
-},{"./core/HandlerList.js":"GAK3","./util/Retries.js":"L9Lo"}],"K1GY":[function(require,module,exports) {
-"use strict";var r=this&&this.__values||function(r){var t="function"==typeof Symbol&&Symbol.iterator,e=t&&r[t],o=0;if(e)return e.call(r);if(r&&"number"==typeof r.length)return{next:function(){return r&&o>=r.length&&(r=void 0),{value:r&&r[o++],done:!r}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")},t=this&&this.__read||function(r,t){var e="function"==typeof Symbol&&r[Symbol.iterator];if(!e)return r;var o,n,a=e.call(r),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(s){n={error:s}}finally{try{o&&!o.done&&(e=a.return)&&e.call(a)}finally{if(n)throw n.error}}return i},e=this&&this.__spreadArray||function(r,t){for(var e=0,o=t.length,n=r.length;e=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")},e=this&&this.__read||function(t,r){var e="function"==typeof Symbol&&t[Symbol.iterator];if(!e)return t;var n,o,i=e.call(t),u=[];try{for(;(void 0===r||r-- >0)&&!(n=i.next()).done;)u.push(n.value)}catch(a){o={error:a}}finally{try{n&&!n.done&&(e=i.return)&&e.call(i)}finally{if(o)throw o.error}}return u},n=this&&this.__spreadArray||function(t,r){for(var e=0,n=r.length,o=t.length;e0)&&!(n=i.next()).done;)s.push(n.value)}catch(u){o={error:u}}finally{try{n&&!n.done&&(e=i.return)&&e.call(i)}finally{if(o)throw o.error}}return s},r=this&&this.__spreadArray||function(t,r){for(var e=0,n=r.length,o=t.length;e=e&&this.state(e-1),t.renderActions.renderMath(this,t,e)},t.prototype.convert=function(t,e){void 0===e&&(e=exports.STATE.LAST),t.renderActions.renderConvert(this,t,e)},t.prototype.compile=function(t){this.state()=exports.STATE.INSERTED&&this.removeFromDocument(e),t=exports.STATE.TYPESET&&(this.outputData={}),t=exports.STATE.COMPILED&&(this.inputData={}),this._state=t),this._state},t.prototype.reset=function(t){void 0===t&&(t=!1),this.state(exports.STATE.UNPROCESSED,t)},t}();function o(t,e){if(t in exports.STATE)throw Error("State "+t+" already exists");exports.STATE[t]=e}exports.AbstractMathItem=e,exports.STATE={UNPROCESSED:0,FINDMATH:10,COMPILED:20,CONVERT:100,METRICS:110,RERENDER:125,TYPESET:150,INSERTED:200,LAST:1e4},exports.newState=o;
-},{}],"xr3O":[function(require,module,exports) {
-"use strict";var t=this&&this.__extends||function(){var t=function(e,n){return(t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(e,n)};return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),e=this&&this.__read||function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,s,i=n.call(t),o=[];try{for(;(void 0===e||e-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(a){s={error:a}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(s)throw s.error}}return o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FindTeX=void 0;var n=require("../../core/FindMath.js"),r=require("../../util/string.js"),s=require("../../core/MathItem.js"),i=function(n){function i(t){var e=n.call(this,t)||this;return e.getPatterns(),e}return t(i,n),i.prototype.getPatterns=function(){var t=this,e=this.options,n=[],s=[],i=[];this.end={},this.env=this.sub=0;var o=1;e.inlineMath.forEach(function(e){return t.addPattern(n,e,!1)}),e.displayMath.forEach(function(e){return t.addPattern(n,e,!0)}),n.length&&s.push(n.sort(r.sortLength).join("|")),e.processEnvironments&&(s.push("\\\\begin\\s*\\{([^}]*)\\}"),this.env=o,o++),e.processEscapes&&i.push("\\\\([\\\\$])"),e.processRefs&&i.push("(\\\\(?:eq)?ref\\s*\\{[^}]*\\})"),i.length&&(s.push("("+i.join("|")+")"),this.sub=o),this.start=new RegExp(s.join("|"),"g"),this.hasPatterns=s.length>0},i.prototype.addPattern=function(t,n,s){var i=e(n,2),o=i[0],a=i[1];t.push(r.quotePattern(o)),this.end[o]=[a,s,this.endPattern(a)]},i.prototype.endPattern=function(t,e){return new RegExp((e||r.quotePattern(t))+"|\\\\(?:[a-zA-Z]|.)|[{}]","g")},i.prototype.findEnd=function(t,n,r,i){for(var o,a=e(i,3),h=a[0],u=a[1],p=a[2],c=p.lastIndex=r.index+r[0].length,d=0;o=p.exec(t);){if((o[1]||o[0])===h&&0===d)return s.protoItem(r[0],t.substr(c,o.index-c),o[0],n,r.index,o.index+o[0].length,u);"{"===o[0]?d++:"}"===o[0]&&d&&d--}return null},i.prototype.findMathInString=function(t,e,n){var i,o;for(this.start.lastIndex=0;i=this.start.exec(n);){if(void 0!==i[this.env]&&this.env){var a="\\\\end\\s*(\\{"+r.quotePattern(i[this.env])+"\\})";(o=this.findEnd(n,e,i,["{"+i[this.env]+"}",!0,this.endPattern(null,a)]))&&(o.math=o.open+o.math+o.close,o.open=o.close="")}else if(void 0!==i[this.sub]&&this.sub){var h=i[this.sub];a=i.index+i[this.sub].length;o=2===h.length?s.protoItem("",h.substr(1),"",e,i.index,a):s.protoItem("",h,"",e,i.index,a,!1)}else o=this.findEnd(n,e,i,this.end[i[0]]);o&&(t.push(o),this.start.lastIndex=o.end.n)}},i.prototype.findMath=function(t){var e=[];if(this.hasPatterns)for(var n=0,r=t.length;n numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+ // Save the require from previous bundle to this closure if any
+ var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+ var nodeRequire = typeof require === 'function' && require;
+
+ function newRequire(name, jumped) {
+ if (!cache[name]) {
+ if (!modules[name]) {
+ // if we cannot find the module within our internal map or
+ // cache jump to the current global require ie. the last bundle
+ // that was added to the page.
+ var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+ if (!jumped && currentRequire) {
+ return currentRequire(name, true);
+ }
+
+ // If there are other bundles on this page the require from the
+ // previous one is saved to 'previousRequire'. Repeat this as
+ // many times as there are bundles until the module is found or
+ // we exhaust the require chain.
+ if (previousRequire) {
+ return previousRequire(name, true);
+ }
+
+ // Try the node require function if it exists.
+ if (nodeRequire && typeof name === 'string') {
+ return nodeRequire(name);
+ }
+
+ var err = new Error('Cannot find module \'' + name + '\'');
+ err.code = 'MODULE_NOT_FOUND';
+ throw err;
+ }
+
+ localRequire.resolve = resolve;
+ localRequire.cache = {};
+
+ var module = cache[name] = new newRequire.Module(name);
+
+ modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+ }
+
+ return cache[name].exports;
+
+ function localRequire(x){
+ return newRequire(localRequire.resolve(x));
+ }
+
+ function resolve(x){
+ return modules[name][1][x] || x;
+ }
+ }
+
+ function Module(moduleName) {
+ this.id = moduleName;
+ this.bundle = newRequire;
+ this.exports = {};
+ }
+
+ newRequire.isParcelRequire = true;
+ newRequire.Module = Module;
+ newRequire.modules = modules;
+ newRequire.cache = cache;
+ newRequire.parent = previousRequire;
+ newRequire.register = function (id, exports) {
+ modules[id] = [function (require, module) {
+ module.exports = exports;
+ }, {}];
+ };
+
+ var error;
+ for (var i = 0; i < entry.length; i++) {
+ try {
+ newRequire(entry[i]);
+ } catch (e) {
+ // Save first error but execute all entries
+ if (!error) {
+ error = e;
+ }
+ }
+ }
+
+ if (entry.length) {
+ // Expose entry point to Node, AMD or browser globals
+ // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+ var mainExports = newRequire(entry[entry.length - 1]);
+
+ // CommonJS
+ if (typeof exports === "object" && typeof module !== "undefined") {
+ module.exports = mainExports;
+
+ // RequireJS
+ } else if (typeof define === "function" && define.amd) {
+ define(function () {
+ return mainExports;
+ });
+
+ //
+
+
+
+
+
+
+
+
+
+
+
+
+ - Preparing search index...
+ - The search index is not available
+
+
p5.teach.js
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Constructors
+
+
+ constructor
+
+ - new GObject(x?: number, y?: number, svgWidth?: number, svgHeight?: number): GObject
+
+
+ -
+
+
Parameters
+
+ -
+
x: number = 10
+
+ -
+
y: number = 10
+
+ -
+
svgWidth: number = 300
+
+ -
+
svgHeight: number = 300
+
+
+
+
+
+
+
+
+ Properties
+
+
+ graphContainer
+ graphContainer: Element
+
+
+
+
+ graphObject
+ graphObject: SVGSVGElement
+
+
+
+
+ linePath
+ linePath: SVGPathElement
+
+
+
+
+ pathData
+ pathData: string
+
+
+
+
+ svgHeight
+ svgHeight: number
+
+
+
+
+ svgWidth
+ svgWidth: number
+
+
+
+
+
+
+ Methods
+
+
+ moveTo
+
+ - moveTo(newX: any, newY: any, startTime: any, endTime: any): void
+
+
+ -
+
+
Parameters
+
+ -
+
newX: any
+
+ -
+
newY: any
+
+ -
+
startTime: any
+
+ -
+
endTime: any
+
+
+ Returns void
+
+
+
+
+
+
+
+
+
+
+
+
+
+