JSFiddle - React, Tailwind, and code Playground

by PhiLho

HTML

<script type="application/processing">

void setup()
{
  HashMap<String, Boolean> hashSet = new HashMap<String, Boolean>();
  hashSet.put("One", true);
  hashSet.put("Two", true);
  hashSet.put("One", true);
  hashSet.put("Three", true);
  
  for (String k : hashSet.keySet())
  {
    println(k);
  }  
}

</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);