discussion about features and implementation

[two-ticks]

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.

[JithinKS97]

It would be good if we have a list of very high-level functionalities/features that we are going to develop this summer if the project gets selected.

[two-ticks]

Main Features (We can implement these features in this summer)

• Scenes and transitions
• Transform functions for text and shapes (something like these https://p5js.org/examples/motion-morph.html )
• TeX() function to render TeX elements
• Player that can tell progress from 0% to 100% over time and control the scene. As you have pointed it may be tough for all sketches to have this feature therefore we can discuss or can plan have a FES to warn user. This feature is subjective to the user, they can decide not to use the progress bar. We can take reference from
  • https://eater.net/quaternions/video/doublecover
  • https://ractive-player.org/math/
• Typing effects for text and TeX - fadeIn, fadeOut, blink, wipeIn, wipeOut, zoomIn, zoomOut
• support for sound and also syncing it with 'time' of sketch
• TeX editor
• graphs
• camera controls (like https://docs.manim.community/en/v0.4.0/reference/manim.scene.moving_camera_scene.html#module-manim.scene.moving_camera_scene)

  Extra features (can be implemented after GSoC)

• TeX editor to export as PNG or SVG (if possible we can use https://github.com/CurriculumAssociates/canvas-latex)
• WebGL support for 3-D effects (like https://eater.net/quaternions/video/doublecover)

[JithinKS97]

Great, as I have told you before, may be we can think of selecting a topic and presenting it using this library and it's features.

This way we can think through the eyes of teachers who will be using this library and creating lessons.

Recently, I started learning special theory of relativity and I hope to create an interactive lesson for the same.

Let me do some thinking and come up with how I can use these features to create the presentation and also if some additional things are required.

You can also think about some topics and see how it can be presented using this library.

[two-ticks]

Yes it would be great to present some topic using this library. I am trying to implement some parts of this to see if we can manage scenes and transitions

[JithinKS97]

Wow man, is this developed in p5.js? This is spectacular!!! The thing is we should not just be limiting ourselves to animations. We should utilise the javascript browser environment's power to something like interactive presentations.

[two-ticks]

Sorry this is not build in p5.js. This is animation on wikipedia page of fourier. I am trying to port that example. I was trying to say that I am trying to replicate this in p5js to understand if we can do transitions similar to this.