two-ticks / p5.teach.js

A beginner friendly math animation library for p5.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.

Get Started

Documentation

• TypeDoc Documentation
• API Reference
• Example Sketches

Setting up the development environment

1. Yarn should be preinstalled
2. Run yarn install for installing the dependencies
3. Run yarn dev for running the dev environment
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
2. Run yarn test for running tests
3. Tests are in src/test

Formatting the code

1. Before submitting PR, run yarn prettier to format the code

Build

1. Run yarn build to export the final js file
2. Final js file is exported as dist/p5.teach.js

p5.teach.js's Issues

instance mode

Currently p5.teach doesn't support p5 instance mode. How can we go forward to add support p5 instance mode?

I tried this but it is not working.

p5.prototype.creatText =  function createText(...args: any[])

What changes to environment should I make ?

branch : develop-instance

TypeDocs broken logo

The broken logo "assets/p5-astrik-teach.png" is visible on the docs page:

https://two-ticks.github.io/p5.teach.js/docs/index.html

and the bad link line is here:

https://github.com/two-ticks/p5.teach.js/blob/main/docs/index.html#L64

Color palette

@two-ticks I'm trying to use IBM's color blind safe palette for visualizations in my book whenever possible and find myself copying the hex colors to new sketches a lot. What do you think about exporting the following constants?

export const ULTRAMARINE40 = '#648fff';
export const MAGENTA50 = '#dc267f';
export const GOLD20 = '#ffb000';
export const INDIGO50 = '#785ef0';
export const ORANGE40 = '#fe6100';

Plotting API

I think we should make it simple to generate nice plots. @two-ticks just created a SVG grapher, @JithinKS97 previously wrote p5.2DGraph, and I tried to distill mainim's 2D and 3D primitives when I started planning p5.plot.

A few questions come to mind:

• What are the right primitives?
• Canvas, SVG, or both?
• How do we facilitate interactivity?
• What's the plan for 3D surface plots, vector fields, etc.?

Personally, I've wanted to implement the grammar of graphics for p5.js for awhile now but haven't had the occasion. Here is an introductory chapter for visualizing data in R with ggplot2.

writing function implementation

Which syntax we should use to call the animation functions?
We can avoid creating many functions for animations by implementing text animations in some what similar manner to manim

let text1 = addText(text, x, y); // adds text to the scene (not visible on screen)
text1.play(fadeOut, 1);          // play(‘animation-type’, duration)

In the proposal we have following (web-editor example writing)

fadeOut(object, duration) //every animation having unique function

manim has following syntax

        self.play(FadeOut(first_line)) #fadeOut animation 
        self.wait(1)

scene implementation

We can use event triggers for scenes. For example this sketch uses space bar for scene switching https://editor.p5js.org/radium.scientist/sketches/g7oDq0M87

we can use all these possibilities

• event triggered animations (issue #1 )
• event triggered scenes
• can define a driving parameter like time for long scenes where event triggering can be tedious

we can decide how to implement scenes and how to add individual animations to the scene

Arrow function

A function that accepts the same parameters as line and draws an arrow is very useful. In math and physics, there are a lot of places where this can come handy.

arrow(x1, y1, x2, y2) will be the function

API for shapes and SVG effects

pull request #20

GObject can deal with 2D, polar and parametric plots, but lacks primary shapes such as lines, rectangles and ellipses. p5.js shapes are difficult to animate and would be slow. SVGs can be easily animated.

What should be the syntax to add rectangle, circle, lines and arrows to graphs (or outside the graph) ?

Do we even need SVG shapes?

• one of the problem I noticed is SVG elements hide the canvas elements there for if you need to add some shape over the graph it would not be possible with p5.js shapes

Example APIs :

graph.rect(x, y, width, height) //this would work but how to remove this object or reference it

testing

I want to test whether add method is called or not. I have tried these ways but all are giving the same error.

it('add should be called', () => {
  const tex = createTeX('2^2');
  const spy = jest.spyOn(tex, 'add');
  tex.add();
  expect(spy).toHaveBeenCalled();
  //expect(tex.position()).toEqual([10, 20]);
});

it('add should be called', () => {
  const tex = createTeX('2^2');
  const element = createDiv();
  global.createDiv = function(html){return element}
  const spy = jest.spyOn(tex, 'add');
  tex.add();
  expect(spy).toHaveBeenCalled();
  //expect(tex.position()).toEqual([10, 20]);
});

other working tests in commit : 0ed4891