🧭 Tech Tools for Creative Education

Making Explanable Explanations with Tech

Introduction

This is my exploration of diverse tools to help explain things better. I will look at :

1. Idyll Language: https://idyll-lang.org
2. Observable JavaScript: https://observablehq.com/
3. Kinetic Graphs: https://kineticgraphs.org/
4. Apparatus: http://aprt.us/
5. Joy.js: http://ncase.me/joy/
6. Tangle: http://worrydream.com/Tangle/
7. g9: http://omrelli.ug/g9/gallery/
8. Loopy: http://ncase.me/loopy/
9. All Explorable Tools: https://explorabl.es/tools/
10. APL: https://tryapl.org
11. p5.js: https://p5.js.org
12. Math in Motion. https://math-in-motion.github.io/early-demo/
13. Reanimate: Build declarative animations with SVG and Haskell https://reanimate.github.io
14. https://animejs.com
15. p5.teach.js. https://two-ticks.github.io/p5.teach.js/. Includes anime.js in a p5.js library.

Abstract and Course Contents

The intent of this course is to provide a brief quick introduction to several different tools that help to create interactive diagrams, web pages, scrollies to explain ideas and concepts better.

Hopefully each module will also contain a simple but complete process on tools and how to install, integrate, and use them in a non-intimidating way.

Since I am used to R + RStudio + Hugo/Quarto + Github + Netlify workflow, I will try my best to see if I can use any of these tools in that workflow. The best case would be:

• Simply invoke the specific tool in an RMarkdown or Quarto document. Today Observable is easily doable; Idyll also seems to be possible.
• Pass data and variables seamlessly between multiple modules
• They must not clash, these tools and give me hell like with htmlwidgets in R which was a miserable experience up to now. (Though it seems to be changing with Quarto..hmm, time to revisit)
• Another very promising workflow is to simply use p5.js. This allows inclusion of a huge collection of teaching oriented libraries, and p5.js sketches are easily embedded in Quarto. (This may end up being my default workflow, and will allow me to keep R things and js things separate!)

References

1. https://michaelnielsen.org/reinventing_explanation/
2. https://distill.pub/
3. Bret Victor http://worrydream.com/
4. Naval Ravikant. Good Explanations are Acts of Creativity. https://nav.al/explanations 5.Aditya Siddheshwarp5.teach: Teaching Math through Animations and Simulations. https://medium.com/processing-foundation/p5-teach-teaching-math-through-animations-and-simulations-64b6159fef85