I’ve been playing a bit with generative art recently, and in this domain the Processing language is a popular choice. Processing allows fairly seamless creation of both 2D and 3D images as well as natural interactivity. I had some interest in linking it with Python to make artistic renderings on the fly of work I was already doing in Python, or more specifically, IPython notebooks. Luckily, the growing popularity of using HTML5 as the graphical medium of choice has lead to some nice packages such as Processing.js, which interpret existing Processing code, and render it using the increasingly standard canvas element in HTML5. As IPython notebooks are similarly centered around web output, I thought linking the two might be reasonably straightforward. It took a bit of playing with, as the most obvious solutions did not work, but I finally arrived at a pretty minimal working example which I hope is of use to you as well.
The steps to integrating Processing.js into an IPython notebook locally are as follows.
First, download the processing.min.js file from Here, and place it in the same directory as where you would like your IPython Notebook. No other installation is required. Now import the only IPython function we need, the HTML display function as
from IPython.display import HTML
From here, we define our Processing code as a Python string (I won’t talk about the Processing code itself, but nice tutorials exist for the interested reader).
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);
}
"""
One could use Python code to generate this Processing code on the fly from data if desired as well. With the Processing code in place, we need some template to render it. This is where my tweaking came in, as the most obvious solutions based on Processing.js examples failed to render for me. I found that manually calling the compile function fixed my woes however, and only required one or two additional lines of code. So now we define the following HTML template as a Python string as well, with brackets in place for easy substitution.
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>
"""
Finally, simply render the Processing code using IPython’s HTML function.
html_code = html_template.format(processing_code) HTML(html_code)
If everything went as planned, you should have the following Processing.js element rendered at the end of your IPython notebook. Play around with it by moving your mouse over the top of the canvas.