p5LearnableProgramming

p5LearnableProgramming is an experiment and an attempt at showing how code runs into a typical p5.js program, showing how instructions are intepreted in addition to show program state. It was written with p5.js itself.

You can try a few examples here :

• Line command
• Circle command
• Rect command
• Triangle command
• Arc command
• For loop structure with circles
• For loop structure with arcs
• Imbricated For loops

References

• Bret Victor — Learnable Programming
  Designing a programming system for understanding programs
• p5.js
  p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!
• 3blue1brown
  3blue1brown, or 3b1b for short, is primarily a YouTube channel about discovery and creativity in math.

Ressources

• esprima.js
  Esprima is a high performance, standard-compliant ECMAScript parser written in ECMAScript (also popularly known as JavaScript).
• anime.js
  Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
• Relief-SingleLine
  Relief SingleLine is a versatile sans serif “single-line” font with open paths oriented towards CNC (Computer Numerical Control) engraving and fab labs environments.

Ideas, TODOs

• parsing code into html. I was unable to "extract" the parser of the online editor which would be ideal. For the moment I used esprima.js parser and some custom code, though most of the examples were hand written (and it's a very tedious task).
• implement the parsing of
  • IF , WHILE , FUNCTION structures
• implement play / pause functionnalities.
• visualize program state variables : background color, fill color , stroke color, frameCount, ...
• implement more functions from the p5js library. Here are the implement ones 👉 https://github.com/v3ga/p5LearnableProgramming/blob/master/p5CommandFactory.js
• Error handling would be awesome.