› › ›

Processing.js

es15es15
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

  • GoToLoopGoToLoop
    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! :-&

  • es15es15
    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...

  • GoToLoopGoToLoop

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

  • es15es15
    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

  • es15es15
    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!

  • GoToLoopGoToLoop

    It works when I pasted it @ OpenProcessing.org:

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

  • es15es15

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

  • PhiLhoPhiLho

    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.

  • es15es15

    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!

  • PhiLhoPhiLho

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

  • es15es15

    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.