JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<script type="application/processing">
 /* 
   PROCESSINGJS.COM  - BASIC EXAMPLE
   Delayed Mouse  Tracking  
   MIT License -  Hyper-Metrix.com/F1LT3R
   Native  Processing compatible 
 */  
 
 // Global variables
 float radius = 50.0;
 int X, Y;
 int nX, nY;
 int delay = 15;
 PFont f;
    
 float fps = 1000;
    
 float g = 2;
 float v = 0;
 float scale = 0.1;
 float flex = 0;
 
 // Setup the Processing Canvas
 void setup(){
   size( 200, 800 );
   strokeWeight( 0 );
    //frameRate( fps );
   X = width / 2;
   Y = radius;
   nX = X;
   nY = Y;  
   f = createFont("Arial", 16, true);
 }
 
 // Main draw loop
 void draw(){
   // Fill  canvas grey
   background( 0,128,255 );
    
    float dt = 1000/fps;
    v += g * dt * scale;
    Y += 0.5 * v * dt; 
    

    if (Y > height - radius) 
    {
        v = -v * 1.000001;
        Y = height - radius;
    //flex = 15;
    }
    
    
    flex = 15* sin(PI/360 * frameCount);
    
   // Set  fill-color to blue
   fill( 0, 121, 184 );
   
   // Set  stroke-color white
   stroke(255); 
   
   // Draw  circle
   ellipse( X, Y, radius + flex, radius - flex );                   
 }
 
 
 // Set circle's next destination
 void mouseMoved(){
   nX = mouseX;
   nY = mouseY;  
 }
 </script>
<canvas width="200px" height="800px"></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);
        }
    }
}