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);
    float offset=126;
    float scaleVal=0;
    void draw(){  
        float angleInc = 0.42;
        float angle = 0.0;
        for (int x = -52; x <= width; x += 5) {
          float y = offset + (sin(angle) * scaleVal);
          line(x, 0, x+50, height);
          angle += angleInc;
        if (frameCount==500) {

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" ...>