Discussion and Review of Proposal - Addon Library Development - p5-teach.js

Summer of Code
1

Hi everyone! I am Aditya Siddheshwar. I am interested in building an addon library for teaching. This project would involve developing tools for teaching through p5.js, adding functions to animate shapes and exporting the animation in different formats (mp4 or webm). Main focus is to introduce a simple, easy to use library to animate and make scenes. This will also take advantage of p5.js core library - p5.sound.js for sound effects.

Overview

  • Scenes and transitions
  • Transform functions
  • Export output into GIF or MP4 (related issue: #5118)
  • TeX editor for exporting maths symbols as SVG, PNG or PDF
  • Create a player that can tell progress from 0% to 100% over time and control the scene
  • play(), pause() and stop()
  • Typing effects
  • fadeIn, fadeOut, blink, wipeIn, wipeOut, zoomIn, zoomOut, flip, flipX and flipY

I tried this for TeX animations :

580×581 

let currentIndex = 0;
let tex;
let katexScript = "\\Huge F , = ,\\Huge G, \\frac{m_{1}\\cdot{m_{2}}}{r^{2}}, \n";
let parts = katexScript.split(",");
let content = "";

function setup() {
  createCanvas(400, 400);
  frameRate(4);
  tex = createP();
  tex.position(width / 5, height / 3);
}

function draw() {
  background(50);
  fill(255);
  textSize(144);
  textAlign(CENTER, CENTER);
  content += parts[currentIndex];

  katex.render(content, tex.elt);
  currentIndex++;

  if (currentIndex >= parts.length) {
    currentIndex = 0;
    content = '';
  }
}

But we can aim for animations similar to manim:

830×449

TeX editor:
I tried implementing using KaTeX [ here] . We can add buttons and methods to export in future.

1600×663

I think this project can provide tools for teachers. I would would love to hear your thoughts on this project, discuss implementation and draft proposal.

link to proposal

@micuat @lmccart @mcintyre @saberkhan @jeremydouglass @Jithin

4 Likes
2

References :

3

Very happy to see this idea of proposal. Let me share my thoughts on this.

Since the manim library is already open source, if we are going to develop something in addition to it, it should offer some clear advantages over the already existing library to make our efforts worth it.

One main advantage will be to reduce the entry barrier to creating animated video lessons. This would go very well with p5.js motto of making coding accessible to everyone.

Some other advantages that I can see are -

  1. The library will be a great help for those who are more comfortable with javascript and p5 ecosystem as manim is in python.

  2. I think the manim library setup in local is a little difficult for beginners (Accoding to my knowledge, please correct me if I’m wrong. We should make this library as easy as creating a sketch in p5).

Also, there is already a library called manim.js. Please go through it.

I haven’t used it, but what are the additional values that we are going to create by our work? Or should we make use of this library and develop on top of it?

One great way to approach the project would be to think of a sample topic that we can create? And think of all the tools that we will need to create a tutorial video on this topic using what we have developed.

Also I have developed a tool called dynamic learning which aims at creating and organizing lessons that make use of interactive visualizations created in p5.js.

https://youtu.be/e_S6YTchKdA This is a sample lesson.

It would be good if we can develop something so that all these tools together will help teachers to very easily create animated video lessons.

At the end, the tangible result is a video lesson that beautifully presents a stem topic.

All the best.

2 Likes
4

Thanks for your reply. I have seen dynamic learning and my idea is similar to this issue (Linear Algebra · Issue #1 · dynamic-learning/simulation-library-ideas · GitHub). As you mentioned it is very difficult to setup manim and it requires many dependencies, therefore, a p5.js library can be very useful for beginners and people having fewer resources on the computer. Manim.js provides similar functionality as manim and is also small in size, but it doesn’t provide an export feature (though we can use ccapture.js). Also, manim.js lacks documentation which again makes it tough for use for a beginner. Manim.js is mainly focused on animations for algorithms and linear algebra. We can develop similar a similar library that provides more features such as scenes, transitions, and exporting the animation (which also solves #5118).

5

Have you started any work. Do you have any repo? If you have may be we can create a thread where we can discuss about the features that we can start with.

@StriveMath

1 Like
6

I have made p5-teach.js repo. I have started working on KaTeX editor but I will need more help in case of development of library.

7

I love these ideas @two.ticks! Do you have a draft proposal that we could review?

It may be helpful to reach out to other teachers you think would benefit from your proposed library. Can you address specific pain points they’ve identified in their teaching practices? For example, I can see obvious use cases for a clean API to manage transitions between states/scenes in a sketch. But I already have a million options for recording my screen.

@Jithin brings up some important considerations about integrating and/or extending existing libraries. We mention a few in the Linear Algebra issue you referenced, and there may be some useful building blocks already listed on the p5.js libraries page. Coincidentally, I just finished teaching vectors and matrices with p5 and am ready to revisit developing Linear Algebra lessons.

3 Likes
8

Thanks, @mcintyre for the advice to reach out to other teachers. I followed your suggestion and discussed the idea with Dr. Ruben, Senior Instructor
Mechanical Engineering. I also discussed with other creators in the field of maths animation.

Problems

  • The main problem for STEM teachers is installation and setup
  • They use MATLAB for visualizations and it is not easy to learn a new language considering their time constraints
  • They don’t have access to proper documentation for the animation engine for mathematics
  • They need transition and scenes but during installation and setup of animation engine (like manim), they get demotivated and get back to MATLAB
  • Visualizations they are using are not pretty
  • STEM teachers need LaTeX for work but it is not flexible. For example, they want to label graphs with maths symbols but it is not easy to do so
  • All STEM teachers are not coders. They don’t want to use software that is very tough to learn, as it will take some time and a learning curve to get familiar

Summary

  • It should be easy to setup and must have ready-to-use examples
  • It should not be tough for a non-coder to learn
  • It should be pretty and support transitions
  • It should have proper documentation and examples for its functions

link to proposal

1 Like
9

Cool! I just left some feedback and will share one of the comments here.

The problems you’ve identified seem specific to college/university STEM professors, so I think it’s worth specifying that this your intended user group.

You may also want to present a clear vision for how bringing these people into the fold can benefit the broader Processing community. What will artists, designers, educators, and beginners gain by working together with domain experts from STEM fields?

2 Likes
10

Hello @two.ticks Have left my comments and thoughts in the proposal.

1 Like
12

I have build this for example link for in-browser animations (progress bar and play pause buttons) .I would like to know your thoughts on this.

1 Like
13

@two.ticks This is cool. If we are going to introduce a play/pause button feature into the library. We should be able to do that for any sketch right? I think that would be quite difficult.

1 Like
14

@two.ticks Compared to manim. One of the greatest advantages the javascript environment has is the ability to add interactivity. And it should not be just limited to adding a progress bar.

I think our goal should be to develop a tool that will help to create something like the interactive video (A minimal version) of quaternions developed by Ben Eater along with 3 Blue one brown.

So the tool won’t be just an animation tool. But a tool that helps us to create interactive presentations.

1 Like
15

I am thinking about the same. I am thinking about using three.js or WebGL (p5) but it can make interactions slower.

16

Tomorrow is last date for submission of final draft. I have updated the proposal according to your suggestions please take a look. Thanks for helping me with your suggestions. @Jithin @mcintyre

2 Likes
17

p5-teach.js

Project Abstract

This project would involve developing tools for teaching STEM through p5.js, adding functions to animate shapes, and animating maths symbols. The main focus is to introduce a simple, easy-to-use library to animate repetitive methods. It would provide educators tools to make interactive animated sketches that can support learning in the remote environment. It will take advantage of the p5.js core library - p5.sound.js for sound effects and KaTeX for rendering symbols.

Project Description

Overview

  • Scenes and transitions
  • Transform functions
  • TeX editor
  • Create a player that can tell progress from 0% to 100% over time and control the scene
  • play(), pause() and stop()
  • Typing effects
  • fadeIn, fadeOut, blink, wipeIn, wipeOut, zoomIn, zoomOut
  • Sound/Audio support
  • Camera controls (like manim.scene.moving_camera_scene)
  • Feedback from educators
  • Unit tests (using mocha and chai)

Detailed

Why p5-teach.js?

Problems faced by the teachers of high school and professors of STEM:

  • The main problem for STEM teachers is installation and setup.
  • Teachers of high schools use tools such as Desmos and GeoGebra for visualization but can’t be used for explaining derivations involving a lot of math symbols.
  • Professors use MATLAB for visualizations and it is not easy to learn a new language considering their time constraints.
  • They don’t have access to proper documentation for animation engines for mathematics.
  • They need transition and scenes but during installation and setup of animation engine (like manim), they get demotivated and get back to MATLAB
  • The visualizations they are using are not pretty.
  • STEM teachers need LaTeX for work but it is not flexible. For example, they want to label graphs with maths symbols but it is not easy to do so.
  • All STEM teachers are not necessarily good coders. They don’t want to use software that is very tough to learn, as it will take some time and a learning curve to get familiar with.
  • It is not easy to tweak the library because of the complex coding concepts used in the library.

p5-teach.js will try to resolve these problems.

Key-features:

  • Easy to set up and ready-to-use examples
  • Getting started guides and cheat sheets for beginners
  • It would not be tough for beginners to learn
  • It will be pretty and will support transitions
  • Documentation and examples

p5-teach.js will broaden the community by connecting with more people from the STEM field. Bringing people from STEM fields will be a step to follow our commitments towards adding features to p5.js that increase access. We focus on making p5.js available to and approachable for people who are excluded from the p5.js community (intentionally or not) and from similar tools and communities. The community will benefit from the involvement of more STEM teachers and can explore together more art, science, and technology.

The project can be divided into three stages:

  • Development of animation methods, scene control, and tools
  • Adding support for KaTeX and sound in animations
  • Testing and Documentation

crank_shaft.gif

This is an example of animation ported from the manim (python) library into a p5.js sketch. In manim and other animation engines, it is easy to export high-quality video but they are very tedious to set up. Maths require symbols that we usually make from LaTeX tools which are not easy to integrate into animations. The power of p5.js lies in its beginner-friendly nature which will help to solve these issues. We can build a library to solve these problems.

The primary aim is to provide listed tools for teachers who just started with p5.js and javascript

  • Animation through browser
  • TeX editor

Animation through browser

This feature includes animation playing within the browser but also allowing users to interact while the animation is playing, such as a player that can tell progress from 0% to 100% over time and control the scene. We can add sound and speed controls to make the user experience more interactive. Educators can embed their sketches in webpages or can share links to their students to make the distance learning experience more interactive.

Such as

This is an example of animation through the web browser. https://editor.p5js.org/radium.scientist/present/aOz6FS2j_

Typing Effects

Typing effects can be manually produced but are difficult to do for large sentences and will be monotonous. We can inspire from manim and can develop text animations such as the following:

TeX editor

Why TeX editor?

TeX editor is required for rendering KaTeX to the canvas in creative ways so that educators (specifically those who post mathematical problems through the online medium in form of Google quiz, Instagram post, or Twitter) can screenshot (with inbuilt tools such as snipping tool in Windows 10 or open-source tools such as ShareX) and share them online. TeX editor can change the background, font color, load fonts, resize, drag and drop TeX. We can try to build features to export as SVG or PNG by using canvas-latex library that renders KaTeX to canvas and then we can use toDataUrl() methods to create an image to export SVG or PNG from TeX editor, but it can take a lot of time which we can invest on other features this summer.

https://two-ticks.github.io/p5-teach.js/katex-editor/

|726.9866666666667x301

TeX editor is similar to Maths in Motion.

This project is more focused on educators using online mediums to teach. Many educators post on Twitter, Instagram, and YouTube, TeX editor will help them build posts by providing them tools to work with KaTeX easily.

ShareX or OBS Studio can be used to record animations and capture screenshots for posting online (in the future we can add exporting features with help of canvas-latex). We can add examples for recording with the help of CCapture library (this will not be able to record KaTeX elements because KaTeX is added as a DOM element but such libraries record only canvas).

API

Function Description
write()
Writes the text with a blurry effect at each new character.
typeWriter(object)
Write the text with the typing effect.
fadeIn(object, duration)
Make a fade in effect.
fadeOut(object, duration)
Make a fade out effect.
blink(object, duration)
Make a blinking effect.
wipeIn(object, duration)
Make a wipe in effect.
wipeOut(object, duration)
Make a wipe out effect.
zoomIn(object, duration)
Make a zoom in effect.
zoomOut(object, duration)
Make a zoom out effect.
moveAlongPath(object, path) Moves object along the defined path
Transform(object1, object2) Transforms one shape into another by interpolating vertices from one to another. Similar to this example
Shift(x,y) Shifts shape and object by x and y
wait(duration) Waits for the duration specified before playing the next animation. It is helpful in timing the animation.
Create(object)
Creates animation of object building up from scratch.

Additional Features (to be discussed)

  • 3-D shapes and interactions using three.js or p5-WebGL
  • Export as SVG or PNG from TeX editor

Unit Tests

We will use chai for making our test cases and mocha for driving our test cases.

Work done so far

18

Posting this for reference because PDF will not have animated GIFs

2 Likes
19

Hi !

I am really interested into this library ! However I am not really advanced in programming with javascript/html etc… and I am having a hard time understanding how everything work.

For what I understood, I need to include a .js script in the html however I can’t find the .js script in the git repo p5.teach.js

I don’t know yarn, but in the doc it seems that yarn somehow useful.

If you can give me some advice that would be great.

Thanks ! Keep the good work :slight_smile:

3 Likes
20

Hi @maDazza ! Thanks for showing interest. You can directly use examples and also can download them directly from the web editor.
If you want to do it manually, you can find the .js file in p5.teach/dist directory. The latest version (unstable features) is GObject branch. Follow setting up instructions to build the library if you want to customize the library. If any problem arises in setting up or finding any bug please report it in the issue tab or message me.

suggested thread: animating maths

1 Like
21

Great !

Thanks a lot :slight_smile: