The physics diagram language

The physics diagram language(pdl), based on p5js, renders interactive diagrams in JavaScript on an HTML5 canvas. It is a physics language for developing static and interactive diagrams on the web.

Expressing physics diagrammatically on a web page with the fruitful precision required in order to best support learning tends to be seen as a demanding technical task for technical illustrators. Few teachers or authors develop the necessary familiarity with illustration software in order to generate their own diagrams. This tends to lead to diagrammatic representation becoming a second-class citizen in communicating physics to young people.

A second issue is that such diagrams often combine technical conventions, textual and diagrammatic, that act as tripwires for the authors, and perhaps even more so for any non-PER aware technical illustrators or animators brought in as external resources to execute the diagrams.

A third issue is one of maintainability, especially with respect to textual elements. Whereas many high-end illustration packages do have hierarchical symbol sets, which allow a change to be propagated though a set of diagrams, they do not do so well when faced with similar tasks based on technical text.

A code-based approach, supported by an intelligently configured text processor could help.

pdl is a set of primitives are designed to match the construction of diagrams to the thinking patterns of teachers of physics (Think “force with magnitude and rotation”, rather then “that arrow, with the right style of head, of the right length, varying the length stem but not the head of the arrow, and other graphic details).

There are elements to allow for interaction such as sliders, dividers, buttons and checkboxes, as well as the ability to work in the three dimensional space and two separately engineered implementations of an infinite canvas.

An introduction

The manual

live & adaptable examples

The source code on Github