Consider this code that I used to run the sketch in my last post:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
The first two lines are kind of obvious. They load the necessary p5-libraries into the page.
Line 4 is useful for many sketches that include movement, to start it again at the beginning. The button calls the function “setup” to restart the whole sketch.
The really cool part is line 6 with lines 10 and 11: they create the canvas for the processing sketch in a normal div that is adressed by its id (#p5canvas). This is done with the p5.dom library that is really good documented (this is where I learned how to do this).
I used jQuery to pass the width of the div to the setup function, so that it would fit into the blog regardless of the size of the window.
I really like this.