Processing in JS panel

by Artur Maizelev

HTML

<p>Your mission is to increase the radius on mousewheel up and decrease it on mousewheel down.</p>
<canvas width="400px" height="400px"></canvas>

CSS

* {
  padding: 20px;
}

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

// Global variables
 float radius = 20.0;
 int X, Y;
 int nX, nY;
 int delay = 10;

 // Setup the Processing Canvas
 void setup() {
   size(400, 400);
   strokeWeight(4);
   frameRate(15);
   X = width / 2;
   Y = width / 2;
   nX = X;
   nY = Y;
 }

 // Main draw loop
 void draw() {


   // Track  circle to new destination
   X += (nX - X) / delay;
   Y += (nY - Y) / delay;

   // Fill  canvas grey
   background(100);

   // Set  fill-color to blue
   fill(0, 121, 184);

   // Set  stroke-color white
   stroke(255);

   // Draw  circle
   ellipse(X, Y, radius, radius);
 }

 // Set circle's next destination
 void mouseMoved() {
   nX = mouseX;
   nY = mouseY;
 }

 void mouseScrolled() {
   radius = radius + sin(frameCount / 16);
   println(mouseScroll);
 }