Processing is a language for creating quick sketches, visualizations, and artwork. Because it is all scripted, it can be used for data-driven illustrations as well. While there are Processing kernels for Jupyter (see for instance Calysto-Processing) these require a series of dependencies that we cannot at present install in the Binder service (but if you discover a way, let us know).
First, we configure the notebook to allow us to display the results of Processing as html in the notebook.
import IPython.display
from IPython.display import HTML
This walk through is based on a blog post by Jarrod McClean.
Because we are working in Python (rather than directly in Processing) we wrap the Processing code in a variable between """
. Incidentally, if you are exploring the Processing website and you download any of the demos, Processing code has the .pde
file extension and can be examined in a text editor.
### put the processing code between the block demarcated with """ """
processing_code = """
int i = 0;
void setup() {
size(400, 400);
stroke(0,0,0,100);
colorMode(HSB);
}
void draw() {
i++;
fill(255 * sin(i / 240.0) * sin(i / 240.0), 200, 175, 50);
ellipse(mouseX, mouseY, 50, 50);
}
"""
Next, we create the HTML that will wrap around the processing code, as if it were its own webpage:
### then we create an html_template to wrap it all
html_template = """
<script type="text/javascript" src="processing.min.js"></script>
<script type="text/javascript">
var processingCode = `{}`;
var myCanvas = document.getElementById("canvas1");
var jsCode = Processing.compile(processingCode);
var processingInstance = new Processing(myCanvas, jsCode);
</script>
<canvas id="canvas1"> </canvas>
"""
And now we tell the notebook to display the html!
### when the output box appears, move your mouse pointer over it...
html_code = html_template.format(processing_code)
HTML(html_code)
To try other experiments with processing, go back up to the code block where we defined the processing code and experiment! Why not give some of the processing tutorials a try.
The code below will write the generated html to file if you remove the # marks and run this block. You'll then be able to download the html from the notebook home screen (click the jupyter logo to get there)
f = open( 'processing.html', 'w' )
f.write(html_code)
f.close()