two-ticks / p5-teach.js

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.

p5-teach.js

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.

TODO

• text effects
• Create(object)
• scene config ⚙️
• morph port from https://p5js.org/examples/motion-morph.html

TL;DR

• https://two-ticks.github.io/p5-teach.js/
• https://two-ticks.github.io/p5-teach.js/sandbox/in-browser-animation/
• https://two-ticks.github.io/p5-teach.js/sandbox/ft-example/
• hardcoded : https://two-ticks.github.io/p5-teach.js/sandbox/effects/ transfer to p5-teach.js
• https://two-ticks.github.io/p5-teach.js/sandbox/threeJS-projects/examples/3d-text.html

API

Function	Description
write(object)	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.

Useful links

• TDD p5.js

p5-teach.js's Issues

Development tools

Module bundlers can be helpful when projects grow beyond a single file. webpack works well and plays nicely with the TypeScript compiler.

discussion about features and implementation

p5-teach.js aims at improving accessibility for teachers. I discussed this with Dr. Ruben, Senior Instructor
Mechanical Engineering. I also discussed with other creators.
Teacher in the discussion is someone who teaches at any level (not to be confused with profession). Teacher can be a professor or someone who build animation videos for YouTube or other plateform

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 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 use software which is very tough to learn, as it will take some time and 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 documentation and examples for its functions

I would love to discuss implementations and other details.