JSFiddle - React, Tailwind, and code Playground

Processing.js

by schrodingers

HTML

<canvas></canvas>

CSS

</style> <script type="text/javascript"> window.addEventListener('load', function() {
  var scripts=document.body.getElementsByTagName('script');
  var canvases=document.body.getElementsByTagName('canvas');
  new Processing(canvases[0], scripts[0].text);
}

, false);
// Here prevent javascript in body from throwing error </script> <style>

JavaScript

/*
 title: // 
 date: 2015-12-24
 */


void setup() {
  size(500, 500);
  //colorMode(HSB);
//  pts = new ArrayList <Part>();
  
}

void draw() {
  translate(width / 2, height / 2);
  
  beginShape();
  vertex();
  endShape();
  for (int j = 0; j < 50; j++) {     
    for (int i = 0; i < 50 - j; i++) {        
      fill(0, 150, 225);      
      stroke(0, 150, 225);      
      arc(i*20+10, j*20+10,5, 15,0, PI);       
      
      
      
            
      
      
//      triangle(0 + 15 * i + j * 30, 0 + 25 * i, 30 + 15 * i + 30 * j, 0 + 25 * i, 15 + 15 * i + 30 * j, 25 + 25 * i);       

 
    }
  }
}




// Utilities functions
void keyPressed() {
  if (key == 's' || key == 'S') {
    saveFrame("out/pic-##.png");
    println("Picture saved as " + "pic-" + frameCount + ".png");
  }
}