CCode for Artists - Miles DeCoster

This is a test of Processing-js, a javascript translation of a Processing sketch. Here we draw a bunch of lines and animate their stroke color. The animation plays for 500 frames and then stops.

Processing JS translates a native pde file into javascript. You do not need to change the pde code. Just add processing.js to the page as you would any javascript library with a link in the head of the document. Add the pde file to your site. The Processing file is executed on a HTML canvas element. Get Processing-js now!

    <canvas data-processing-sources="../processing-js-1/example/colors.pde" style="border: 1px solid black;"></canvas>
    

Here is the Processing sketch:


    // drawing some random colors
    
    void setup()
    {
      size(700, 400);
      smooth();
      strokeWeight(2);
      background(125);
      fill(255);
    }
    float offset=126;
    float scaleVal=0;
    void draw(){  
      background(125);
        strokeWeight(2);
        scaleVal++;
        float angleInc = 0.42;
        float angle = 0.0;
        for (int x = -52; x <= width; x += 5) {
          float y = offset + (sin(angle) * scaleVal);
          stroke(y,y/2,random(255));
          line(x, 0, x+50, height);
          angle += angleInc;
        };
        if (frameCount==500) {
          noLoop();
        }
    }
    
    

You can also load a sketch from multiple source files by putting them all in a canvas data-processing-sources attribute string, separated with spaces:

   <canvas ... data-processing-sources="file1.pde file2.pde file3.pde" ...>