JSFiddle - React, Tailwind, and code Playground

by PhiLho

HTML

<script type="application/processing">

void fi() { println("Doom"); }

int fi = 666; // Doomed!

void setup()
{
  size(400, 400);

  println("fi: " + fi);    
  int v = 2 / 3;
  println("Integer division: " + v);
  println("One parameter call: " + f(5));
  println("Two parameters call: " + f(5, 5));
  fi(); // Type error: fi is not a function
}

void draw()
{
  background(200);
  ellipse(width / 2, height / 2, width / 4, height / 4);
}
    
int f(int x) { return x * 2; }
int f(int x, int y) { return x * y; }

</script>

<canvas width="400px" height="400px"></canvas>

JavaScript

/*
 * This code searches for all the <script type="application/processing" target="canvasid">
 * in your page and loads each script in the target canvas with the proper id.
 * It is useful to smooth the process of adding Processing code in your page and starting
 * the Processing.js engine.
 */
window.addEventListener("load", function() 
{
    var scripts, i, src, canvas;
    scripts = document.getElementsByTagName("script")
    
    for (i = 0; i < scripts.length; i++) 
    {
        if (scripts[i].type == "application/processing") 
        {
            src = scripts[i].src;
            canvas = scripts[i].nextSibling;
            
            if (src && src.indexOf("#")) 
            {
                canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
            } 
            else
            {
                while (canvas && canvas.nodeName.toUpperCase() != "CANVAS")
                {
                    canvas = canvas.nextSibling;
                }
            }
            
            if (canvas) {
                Processing(canvas, scripts[i].textContent);
            }
        }
    }
}, false);