idyll-lang/idyll

P5JS Support

Open

#541 opened on Jul 1, 2019

View on GitHub
 (14 comments) (2 reactions) (0 assignees)JavaScript (1,977 stars) (97 forks)batch import
ComponentsFeature Requesthelp wanted

Description

Is your feature request related to a problem? Please describe. I'd like to support a streamlined workflow for embedding Processing/P5 sketches in idyll documents.

Describe the solution you'd like Ideally it would look something like this:

Normal text

```exec:p5
function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}
```

... more normal text. 

There is some initial support for this type of workflow in this plugin: https://github.com/idyll-lang/idyll-plugin-runscripts/, but it currently just supports R code and is at the "proof of concept" level. We can extend or fork that to build a similar Processing workflow.

This plugin will need to do some code generation to spit out a component that automatically imports the P5 library, enables reactivity via idyll variables, etc, which I can discuss in more detail, but I think the first step is to get the code sample described above working.

See also https://github.com/idyll-lang/idyll/issues/117 for some early work on this front. At the time that component was made the idyll plugin system didn't exist, so hopefully we have all the tools needed to make a really streamlined P5 experience.

/cc @amitbadala

Contributor guide