JSFiddle - React, Tailwind, and code Playground

by rice9650

HTML

<script type="application/processing">

 float x = 0;
 float y = 0;
void setup(){
  size(600,600);
}


void draw(){
  background(0);
  smooth();


 float dx = mouseX-x;
 float dy = mouseY-y;


x += dx*0.05;
y += dy*0.05; 

  
  ellipse(x,y,20,20); 

  
}
 </script>
<canvas width="500px" height="500px"></canvas>

JavaScript

var scripts=document.getElementsByTagName("script");
for(var i=0;i<scripts.length;i++) {
    if(scripts[i].type=="application/processing"){
        var 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){
            new Processing(canvas,scripts[i].text);
        }
    }
}