Processing.js

edited February 2014 in JavaScript Mode

Hi,

I'm trying to implement the very first example of processing.js embedding a pde file and can't get it working (the 'Using processing' example in this page: http://processingjs.org/learning/). The pde file, html and processing.js files are all saved in the same directory. Anyone has any idea why? (i'm using processing 2.1 and processing.js 1.4.1)

Tagged:

Answers

  • edited February 2014

    Easiest way is use JavaScript Mode to generate the ".html" for us. 8-X
    It also automatically creates a local HTTP server and opens a browser to run it.

    Take notice that w/o a server, mostly only Firefox and its derivatives allow JS scripts and other plugins to run! :-&

  • edited February 2014

    sorry for the stupid question..., but, should I turn processing into JavaScript Mode and then save the file? i also tried with fireFox, and it didn't work...

  • W/o having your actual code, we can't test it either! :-&

  • edited February 2014

    it's the most basic one:

      void setup() {
          size(200, 200);
          stroke(0);
          fill(0);
          noLoop();
        }
    
        void draw() {
          background(#F0F0E0);
          ellipse (width/2, height/2,20,20);
        }
    

    thanks

  • edited February 2014

    I also try to get this code running with processing.js (as an embedded code in the html script. I've simplified it a lot, and still, it's not running... any idea why?

    the entire code is:

     <!DOCTYPE html>
    <html>
      <head>
        <title>Processing.js Example Page</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="processing-1.4.1.js"></script>
    
        <!--
            This is a source-file-less sketch, loaded from inline source code in
            the html header. This only works if the script specifies a data-processing-target
        -->
        <script type="text/processing" data-processing-target="targetcanvas">
          //  Processing.js example sketch
    
    int st;
    
    Creatures creature;
    
    float d;
    
    int maxAge = 80;
    
    //for the streight function
    PVector z =  new PVector(random (-7, 7), random ( -4, 4));
    
    //for the worm function
    PVector y =  new PVector(7, -4);
    PVector rt = new PVector (random (-3, 3), random (-4, 4));
    
    void setup()
    {
      size (400, 400);
      smooth ();
    
      creature = new Creatures (new PVector (width/2, height/2), 10.0);
    }
    
    
    void draw()
    {
      frameRate (20);
      background (255);
    
      creature.runCreature ();
    }
    
    
    class Creatures {
      PVector loc;
      PVector vel;
      color col;
    
      float scalar;
    
      int straight = 0;
    
      PVector acc;
      float speed;
      float sz;
      int intsz;
      PVector[ ] tail;
    
      float s;
    
      float age;
    
      float maxforce;    // Maximum steering force
      float MAXspeed; 
      float r;
    
    
      float speedtrgt;
      float sztrgt;
      //for the worm function
      float counter1 = 0, rot;
    
      float collisionHueB;
      float collisionHueG;
      float collisionHueR;
    
      float bright1;
      float bright2;
      float bright3;
    
      Creatures(PVector _loc, float _sz) {
    
        vel = new PVector(random(-1, 1), random(-1, 1));
        acc = new PVector(0, 0);
        loc = _loc.get();
    
        MAXspeed = 2.0;
        maxforce = 0.05;
        sz = _sz;
        r = 2.0;
        intsz = (int) sz;
        scalar = _sz/100.0;
    
        age=0;
    
        speedtrgt =random(-5.0, 5.0);
      }
    
      void display ()
      {
        fill (255, 0, 0);
        ellipse (loc.x, loc.y, sz, sz);
      }
    
    
      void runCreature ()
      {
        displayCreature();
    
        update();
        frame ();
      }
    
    
      void displayCreature() {
        for (int z = 0; z < intsz; z++) {
          fill (255, 0, 0);
          noStroke();
          ellipse (loc.x, loc.y, sz, sz);
        }
      }
    
      void frame() {
        if (loc.x >width) {
          loc.x=width;
          vel.x *=-0.5;
        }
        if (loc.y > height) {
          loc.y=height;
          vel.y *=-0.5;
        }
        if (loc.y < 0) {
          loc.y=0;
          vel.y *=-0.5;
        }
        if (loc.x < 0) {
          loc.x=0;
          vel.x *=-0.5;
        }
      }
    
    
      // Method to update location
      void update() {
        // Update velocity
        vel.add(acc);
        // Limit speed
        vel.limit(MAXspeed);
        loc.add(vel);
        // Reset accelertion to 0 each cycle
        acc.mult(0);
      }
    
    
      PVector r(float range) {
        PVector r = new PVector(random(range / -2, range / 2), random(range / -2, range / 2));
        return r;
      }
    
    
      void worm(int SW, PVector dir) {
        noFill ();
        stroke (3);
        counter1 = counter1 +1 ;
        rot = sin(counter1) * SW;
        PVector z = new PVector(acc.x * cos(rot) - acc.y * sin(rot), acc.x * sin(rot) + acc.y * cos(rot), 0);
        acc.set(dir);
        acc.add(z);
        vel.add(acc);
        vel.limit(MAXspeed);
        loc.add(vel);
        frame();
      }
    }
    
    
        </script>
      </head>
    
    
      <body>
    
    
        <script type="text/processing">
    
    
        </script>
    
        <canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
      </body>
    
    </html>
    

    thanks!

  • It works when I pasted it @ OpenProcessing.org:

    http://www.openprocessing.org/sketch/create

  • So.., any idea why i can't get it working not in openProcessing?...

  • How did you try? Some browsers refuse to run JavaScript in HTML when loading from the filesystem (file:// scheme). You need to upload the file to a server, or to change settings in your browser.

  • Thanks PhiLho. I also tried to embed the code into the html, and couldn't get it working... Any idea why?

    <!DOCTYPE html>
    <html>
      <head>
        <title>Processing.js Example Page</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="processing-1.4.1.js"></script>
    
        <!--
            This is a source-file-less sketch, loaded from inline source code in
            the html header. This only works if the script specifies a data-processing-target
        -->
        <script type="text/processing" data-processing-target="targetcanvas">
          //  Processing.js example sketch
    
    int st;
    
    Creatures creature;
    
    float d;
    
    int maxAge = 80;
    
    //for the streight function
    PVector z =  new PVector(random (-7, 7), random ( -4, 4));
    
    //for the worm function
    PVector y =  new PVector(7, -4);
    PVector rt = new PVector (random (-3, 3), random (-4, 4));
    
    void setup()
    {
      size (400, 400);
      smooth ();
    
      creature = new Creatures (new PVector (width/2, height/2), 10.0);
    }
    
    
    void draw()
    {
      frameRate (20);
      background (255);
    
      creature.runCreature ();
    }
    
    
    class Creatures {
      PVector loc;
      PVector vel;
      color col;
    
      float scalar;
    
      int straight = 0;
    
      PVector acc;
      float speed;
      float sz;
      int intsz;
      PVector[ ] tail;
    
      float s;
    
      float age;
    
      float maxforce;    // Maximum steering force
      float MAXspeed; 
      float r;
    
    
      float speedtrgt;
      float sztrgt;
      //for the worm function
      float counter1 = 0, rot;
    
      float collisionHueB;
      float collisionHueG;
      float collisionHueR;
    
      float bright1;
      float bright2;
      float bright3;
    
      Creatures(PVector _loc, float _sz) {
    
        vel = new PVector(random(-1, 1), random(-1, 1));
        acc = new PVector(0, 0);
        loc = _loc.get();
    
        MAXspeed = 2.0;
        maxforce = 0.05;
        sz = _sz;
        r = 2.0;
        intsz = (int) sz;
        scalar = _sz/100.0;
    
        age=0;
    
        speedtrgt =random(-5.0, 5.0);
      }
    
      void display ()
      {
        fill (255, 0, 0);
        ellipse (loc.x, loc.y, sz, sz);
      }
    
    
      void runCreature ()
      {
        displayCreature();
    
        update();
        frame ();
      }
    
    
      void displayCreature() {
        for (int z = 0; z < intsz; z++) {
          fill (255, 0, 0);
          noStroke();
          ellipse (loc.x, loc.y, sz, sz);
        }
      }
    
      void frame() {
        if (loc.x >width) {
          loc.x=width;
          vel.x *=-0.5;
        }
        if (loc.y > height) {
          loc.y=height;
          vel.y *=-0.5;
        }
        if (loc.y < 0) {
          loc.y=0;
          vel.y *=-0.5;
        }
        if (loc.x < 0) {
          loc.x=0;
          vel.x *=-0.5;
        }
      }
    
    
      // Method to update location
      void update() {
        // Update velocity
        vel.add(acc);
        // Limit speed
        vel.limit(MAXspeed);
        loc.add(vel);
        // Reset accelertion to 0 each cycle
        acc.mult(0);
      }
    
    
      PVector r(float range) {
        PVector r = new PVector(random(range / -2, range / 2), random(range / -2, range / 2));
        return r;
      }
    
    
      void worm(int SW, PVector dir) {
        noFill ();
        stroke (3);
        counter1 = counter1 +1 ;
        rot = sin(counter1) * SW;
        PVector z = new PVector(acc.x * cos(rot) - acc.y * sin(rot), acc.x * sin(rot) + acc.y * cos(rot), 0);
        acc.set(dir);
        acc.add(z);
        vel.add(acc);
        vel.limit(MAXspeed);
        loc.add(vel);
        frame();
      }
    }
    
    
        </script>
      </head>
    
    
      <body>
    
    
        <script type="text/processing">
    
    
        </script>
    
        <canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
      </body>
    
    </html>
    

    Many thanks!

  • Again, how do you try to open this HTML file?

  • with googleChrome / fireFox browser, loading it from a file system. The example code is working for me that way, so I assume the problem is with the specific code.

Sign In or Register to comment.