Output-directed p5.js exploration
Background
The p5.js API is a powerful creative coding and visualization tool; however, it introduces unfamiliar abstractions that artists learning how to code may find hard to use.
The p5.js web editor interface
Manual artists often obtain fluency with mediums through direct material engagement and continuous feedback from the medium they are working with; when using p5.js, the tedious process of figuring out suitable API calls and appropriate syntax obstructs decision-making and learning because the unfamiliarity of APIs prevent “direct” interactions.
How an artist using a direct-manipulation drawing software might draw an apple
How an artist using p5.js might draw an apple
Hypothesis
Because Processing, the language p5 is based on, is a language that mostly outputs images, we hypothesized that programmers could more easily learn the possibility space and logic of the language when shown how relevant functions could be inserted into their existing program.
Left: low-fi prototype, Right: mid-fi proposed interface
In the above interface, when a user clicks on a function call, two things will be generated:
In the first row, examples of different parameter values for each parameter of the function
In subsequent rows, examples of function calls that, when inserted, will change the visual output of the overall code.
Implementation
A large part of this interface has been writing the functionality for determining which functions are valid to be inserted below/above the function that a user has clicked. To come up with a rigorous system, we have determined a Typescript type system, utilizing common PL strategies to make the process structured and comprehensive.
Left: Types of shape primitives supported by p5 API, Right: logic brainstorms
Initial function brainstorms
Finalized Type system