Javascriptの中でProcessingの個別命令を呼び出す

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Processing Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="200" height="200"></canvas>

  <script>
  function sketchProc(processing) {
    processing.setup = function() {
      processing.size(200, 200);
      processing.background(125);
      processing.fill(255,255,255);
      processing.noLoop();
    }

    processing.draw = function() {

for(var i=1 ; i<=400 ; i++) {
    var rand1 = Math.floor( Math.random() * 256 )+1 ;
    var rand2 = Math.floor( Math.random() * 200 )+1 ;
    var rand3 = Math.floor( Math.random() * 199 )+1 ;
    var rand4 = Math.floor( Math.random() * 10 )+10 ;
    processing.fill(128, rand1, 255); // 塗りつぶしの色をランダムに決める
    processing.ellipse(rand2, rand3, rand4, rand4); // ランダムな位置に円を描画
};

processing.fill(255,255,255);
processing.text("Hello World!", 20, 20);
processing.rect(10, 10, 10, 10);
processing.rect(80, 80, 10, 10);
processing.ellipse(50,50, 50, 50);


    }
  }

  var canvas = document.getElementById("canvas");
  var p = new Processing(canvas, sketchProc);


  </script>
</body>
</html>