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
- 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.
- 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.
- 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.