While super impressed with the processing language, I am also very excited that processingjs has ported processing to the HTML canvas object thus eliminating the Java applet/plugin requirement. And if that is not enough…the processingjs syntax looks just like that of Java (calling all Java developers)!

So as my first simple example of processingjs, I have created a Sine wave generator.
Many thanks to both processing/js teams.

* Please use the Firefox or Google Chrome browser if you are unable to view the above graphic


// Global variables
int radius = 60.0;
int X, Y;
int count = 0;
ArrayList points;

class Point {
  float x, y; // X-coordinate, y-coordinate
  // Constructor
  Point(int xpos, int ypos) {
    x = xpos;
    y = ypos;
  }
}

// Setup the Processing Canvas
void setup(){
  size( 500, 203 );
  strokeWeight( 2 );
  frameRate( 45 );
  X = 35;
  Y = 97;
  points = new ArrayList();
  points.add(new Point(X,Y));

}

// Main draw loop
void draw(){
  var xfac=X+radius/2*cos(frameCount*PI/180);
  var yfac=Y+radius/2*sin(frameCount*PI/180);
  background(255,255,255); 

  // Set fill-color
  fill( count, yfac, yfac );
  stroke(40);

  if(count<359){
      count++;
  }else{
     count = 0;
     points = new ArrayList();
  }

  //main circle
  ellipse( X, Y, radius, radius );
  //perimeter circle
  ellipse( xfac ,yfac, 5, 5 );
  //draw point
   points.add(new Point(100+count,yfac));
   //drawing line
  line(xfac ,yfac,100+count,yfac);
  //line from center to perimeter of circle
  line(X ,Y,xfac ,yfac);
  //graph lines
  stroke(200);
  line(X+65 ,Y,460,Y);
  line(X+65 ,Y+30,460,Y+30);
  line(X+65 ,Y-30,460,Y-30);

  //sin wave
  stroke(40);

  for (int i = points.size()-1; i >= 0; i--) {
     Point ball = (Point) points.get(i);
     point(ball.x,ball.y);
   }

}