ProcessingJS 간단예제 2

ProcessingJS 간단예제 2



<script src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<script data-processing-target="mycanvas" type="text/processing">
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 30 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;
}

// Main draw loop
void draw(){

  radius = radius + sin( frameCount / 4 );

  // 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 mouseClicked(){
  nX = mouseX;
  nY = mouseY;
}
</script>
<canvas id="mycanvas"></canvas>