Processing code directly in your web page with shortcode is using this technique :
http://processingjs.org/articles/jsQuickStart.html#processingcodeinwebpage
and adding prismjs (
http://www.prismjs.com) for highlight the code
add processing code in your post
Just add shortcode
- [p5js code canvas][/p5js] to show the code and the result
- [p5js code][/p5js] to show the code
- [p5js canvas][/p5js] to show the result of the code
example
[p5js code canvas]
- // Processing code
- void setup() {
- size(200, 200);
- background(100);
- stroke(255);
- ellipse(50, 50, 25, 25);
- println("hello web!");
- }
[/p5js]
- Install (download https://github.com/benoitwimart/p5js/archive/master.zip,
unzip, copy in wordress/wp-content/plugins
or send .zip on plugin page http://yoursite.com/...wp-admin/plugin-install.php?tab=upload
- Activate at page http://yoursite.com/.../wp-admin/plugins.php
- Add shortcode like [p5js code canvas]void setup(){/ your code and more here /}[/p5js]
tips : p5js button is available in the wp html editor tab
= 1.4.7 = is Processingjs Version
= 1.4.7.1 = remove filter bug
= 1.4.7.2 = remove bug, add keyword, add button show/hide