why doesn't my sketch run in javascript mode?

scott_me

the following fails to run when switched to javascript. i've tried reading the documentation for javascript but it brings no clarity.

int num=100;
int diameter=10;
int limit=20;
float step=0.01;


PVector[] positions=new PVector[num];
float [] lookup=new float[num];

void setup() {
  size(1000, 1000);
  colorMode(HSB, 360, 100, 100);
  background(0);

  for (int i=0; i<num; i++) {
    float x=random(0, width);
    float y=random(0, height);
    positions[i]= new PVector();
    positions[i].set(x, y);
  }
  makeTable(lookup);
}

void draw() {
  background(0);

  for (int m=0; m<num; m++) {

    float ex=positions[m].x;
    float wy=positions[m].y;
    float h=m*360/num;
    noStroke();
    fill(h, 100, 100);
    ellipse(ex, wy, diameter, diameter);

  }

  move(positions, lookup);

}

void move(PVector[] places, float[]table) {
  for (int q=0; q<places.length; q++) {

    int next=q+1;
    if (next==places.length) {
      next=0;
    }

    PVector v=new PVector();
    v=PVector.sub(places[next], places[q]);

    float adjust=(v.mag()-limit)/v.mag();

    v.mult(adjust);
    v.mult(step);

    PVector v2=new PVector();
    v.normalize(v2);

    float multiplier=table[q];

    PVector v3=new PVector();
    v3.x=v2.y*multiplier;
    v3.y=-v2.x*multiplier;
    v.add(v3);

    places[q].add(v);
    places[q].x=constrain(places[q].x, 0.01*width, 0.99*width);
    places[q].y=constrain(places[q].y, 0.01*height, 0.99*height);
  }
}

void makeTable(float[] calculations) {

  for (int r=0; r<calculations.length; r++) {
    float angle=TWO_PI*float(r)/num;
    float a=sin(angle);

    calculations[r]=0.1*a;
  }
}

scott_me

i am using processing 2.1.1 with Windows 7

TechWiz777

If it doesn't run, try downloading a new mode for it. Most likely, if it doesn't run it could be because you are using a coding language unknown to JavaScript, and that could cause that. Try downloading the JavaScript mode or try to change some parts of the code. For clarity, just see what terms you used that could also be said as something else.

Good luck, TechWiz777

scott_me

i don't understand. how could i download a new mode for it? what would "a coding language unknown to JavaScript " be? i'm using processing! i have downloaded the JavaScript mode. as for trying to change some parts, which parts? change to what? i'm afraid this answer leaves me just as much in the dark as i was before.

TechWiz777

Calm down. What I mean is that some of the variables you used probably aren't compatible for this language. I think if you switched from something else to JavaScript, some language that worked in the other mode you were using might not work in processing. I know how you feel when you want answers but people don't understand your question. I'm trying to give possible solutions though :) ! What are:

[q] And [r] ?

Those are the only two things that I don't really know what they are... Could possible be the problem?

scott_me

i understand you are trying to help. unfortunately... i don't know what you mean by "some language that worked in the other mode you were using might not work in processing". the only language i have used is processing. i wanted to upload my sketch to openprocessing. its a shock to discover i need to learn i-don't-know-how-much of a new language in order to do that.

"q" and "r" are incrementing variables in "for" loops. places[q] and calculations[r] are local arrays.

i have read the Quick Start page at http://processingjs.org/ but i'm not sure its hints are helpful. is there another online resource that may be more helpful, and suited for beginners? i can do the work of debugging this the way i debug my processing sketches, but i could use more documentation on the challenge of converting java to javascript. otherwise, it could be grind.

TechWiz777

Hey, you're awesome, really. You taught me something I did not know. Ohh!!!! Hold it. From java to JavaScript? Well that's not to hard at all? Here's a link to get you started:

http://www.gwtproject.org/

It will help convert java to JavaScript. Hope it helped, TechWiz777

scott_me

i did mean convert processing to javascript. however, gwt might help.

i think i need to go to bed. however, i wouldn't mind if another pair of eyeballs looked at my code to see where i might be going wrong.

TechWiz777

Yeah me too. Man sorry I can't help you there. I'm not to experienced and I don't want to mess up your code.

scott_me

thanks for trying to help.

quark

To solve this problem change line 19 to

positions[i].set(x, y, 0);

and line 53 to

float adjust=(v.mag()-limit)/(v.mag() + 1e12);

It appears to be a problem with using PVector in JavaScript mode. PVector has 3 attributes x/y/z and you are just using the first 2. In JavaMode this is not a problem because the z value will be initialised to 0 (zero). In JavaScript mode you are using Javascript and the z value is not being set so it is 'undefined' when you later attempt to calculate the magnitude of the PVector it can't do that so it return NaN (not-a-number) which JavaScript can't handle so your program crashes.

I have modified line 15 because the magnitude of a PVector is >= 0 and if it is zero then the division would make adjust = positive infinity which JavaScript can't handle so I simply add a very, very small number to prevent that.

TechWiz777

Yeah, that's what I meant. Pvector could be unknown to this mode! We solved it!

:)

scott_me

dear quark,

thanks alot for your insights. that does get it going. unfortunately, i'm not out of the woods yet: the program runs for a few seconds and then stalls.

it looks like i need to do some indepth study of javascript. can you suggest an online source of information beyond what's available at http://processingjs.org/. even then, isn't processing's javascript mode is different from processingjs, isn't it?

quark

What do you mean by stalls? - It worked find when I tried it, although eventually it settles done to a steady state where the balls are strung together in colour order forming a necklace. BTW it looks really neat.

isn't processing's javascript mode is different from processingjs, isn't it?

Yes they are different -

AFAIK processingjs is programming in JavaScript. JavaScript mode uses a library of JavaScript methods matching the methods in Processing's JavaMode API. Unfortunately it doesn't always work and the library method does not perform exactly the same way as its Java equivalent and that's what happened with the 2 parameter PVector constructor.

As to some on-line JavaScript reference material someone else would have to help you there since I dislike (sorry I mean hate) developing software using JavaScript.

TechWiz777

Hey Scott.

Try these:

http://blog.blprnt.com/blog/blprnt/tutorial-processing-javascript-and-data-visualization

https://github.com/processing-js/processing-js

http://stackoverflow.com/questions/17028468/can-i-build-a-javascript-mode-version-of-a-processing-sketch-using-the-command

http://processingjs.org

scott_me

dear quark,

thanks for the compliment. however, my sketch is supposed to keep moving (and does so in processing java mode).

posting a sketch to openprocessing has become quite complicated. is there a simpler way of doing this? i'm aware that posting it in java mode doesn't work anymore.

GoToLoop

I've already faced w/ that conversion bug a couple of times already!
When using set() and other PVector's methods passing 2 parameters, the 3rd 1 becomes undefined in JS!
And indeed, normalize() & setMag() got it all wrong when field z is in that state! :|

Anyways, here's a tweaked version already running online via "processing.js" (a.K.a. JS Mode).
Major improvement is the removal of those 3 PVector instantiations (v, v1, v2) within move().
Another 1 is a new color[] array for properly store the already calculated hues. Enjoy: (*)

http://studio.processingtogether.com/sp/pad/export/ro.9NwgKBhS$Gxju/latest

/**
 * Necklace (v2.06)
 * by  scott_me (2014/Aug)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/7294/
 * why-doesnt-my-sketch-run-in-javascript-mode
 *
 * studio.processingtogether.com/sp/pad/export/ro.9NwgKBhS$Gxju/latest
 */

static final int NUM=1<<7, IDX=NUM-1, HUES=1<<7, DIAM=10, RAD=DIAM>>1;
static final float STEP=.01, LIMIT=20.0;

final PVector places[]=new PVector[NUM], vel=new PVector();

static final float[] lookup=new float[NUM];
static final color[] hues=new color[NUM];

void setup() {
  size(1000, 1000, JAVA2D);
  frameRate(60);
  smooth(4);
  noStroke();

  ellipseMode(CENTER);
  colorMode(HSB, HUES, 1, 1);

  for (int i=0; i!=NUM;) {
    places[i]=new PVector(random(width), random(height));
    lookup[i]=sin(TWO_PI/NUM * i)/10.0;
    hues[i]=color((float) HUES/NUM * i++, 1, 1);
  }
}

void draw() {
  background(0);
  PVector pos=places[0];

  for (int i=0; i!=NUM;) {
    display(hues[i], pos);
    move(lookup[i], pos, pos=places[++i&IDX], vel);
  }
}

void keyTyped() {
  for (PVector p: places)
    p.set(random(width), random(height), 0);
}

void mousePressed() {
  if (mouseButton != LEFT)  keyTyped();
}

void display(color wheel, PVector place) {
  fill(wheel);
  ellipse(place.x, place.y, DIAM, DIAM);
}

void move(float t, PVector p, PVector n, PVector v) {
  v.set(n);
  v.sub(p);

  float len=v.mag(), adjust=(len-LIMIT)/len;

  v.mult(adjust*STEP);
  p.add(v);

  v.normalize();
  p.add(v.y*t, -v.x*t, 0);

  p.x=constrain(p.x, RAD, width  - RAD-1);
  p.y=constrain(p.y, RAD, height - RAD-1);
}

GoToLoop

CoffeeScript version for Necklace:

###
 * Necklace (v2.06.1)
 * by  scott_me (2014/Aug)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/7294/
 * why-doesnt-my-sketch-run-in-javascript-mode
 *
 * studio.processingtogether.com/sp/pad/export/ro.9NwgKBhS$Gxju/latest
###


`const NUM=1<<7, IDX=NUM-1, HUES=1<<7, DIAM=10, RAD=DIAM>>1`
`const STEP=.01, LIMIT=20.0`

`const places=Array(NUM)`
`const lookup=new Float32Array(NUM)`
`const hues=new Uint32Array(NUM)`
`const vel=Object.seal(new Processing.prototype.PVector)`


setup: ->

  size 1000, 1000, JAVA2D; frameRate 60; do smooth; do noStroke
  ellipseMode CENTER; colorMode HSB, HUES, 1, 1;

  i=0; while i^NUM

    places[i]=Object.seal new PVector random(width), random(height)
    lookup[i]=.1 * sin TWO_PI/NUM*i
    hues[i]=color HUES/NUM*i++, 1, 1


  Object.freeze places


draw: ->

  background 0

  pos=places[0]; i=0; while i^NUM

    display hues[i], pos
    move  lookup[i], pos, pos=places[++i&IDX], vel


  return


keyTyped: ->

  places[p].set random(width), random(height), 0  for p of places
  return


mousePressed: ->@mouseButton^LEFT and do keyTyped


display = (wheel, place) ->

  fill wheel; ellipse place.x, place.y, DIAM, DIAM


move = (t, p, n, v = new PVector) ->

  v.set n; v.sub p

  len=do v.mag; adjust=(len-LIMIT)/len
  v.mult adjust*STEP; p.add v

  do v.normalize; p.add v.y*t, -v.x*t, 0

  p.x=constrain p.x, RAD, width  - RAD-1
  p.y=constrain p.y, RAD, height - RAD-1

GoToLoop

And to finish up the Processing modes' parade, brand new P5.JS version too: http://p5js.org/ B-)

/**
 * Necklace (v2.06.2)
 * by  scott_me (2014/Aug)
 * mod GoToLoop
 *
 * forum.processing.org/two/discussion/7294/
 * why-doesnt-my-sketch-run-in-javascript-mode
 *
 * studio.processingtogether.com/sp/pad/export/ro.9NwgKBhS$Gxju/latest
 */

const NUM=1<<7, IDX=NUM-1, HUES=1<<7, DIAM=10, RAD=DIAM>>1;
const STEP=.01, LIMIT=20.0;

const places=Array(NUM);
const lookup=new Float32Array(NUM);
const hues=new Uint8Array(NUM);
const vel=Object.seal(createVector());

function setup() {
  Object.freeze(createCanvas(1000, 1000));

  frameRate(60).smooth().noStroke();
  ellipseMode(CENTER).colorMode(HSB, HUES, 1, 1);

  for (var i=0; i^NUM;) {
    places[i]=Object.seal(createVector(random(width), random(height)));
    lookup[i]=sin(TAU/NUM * i)/10.0;
    hues[i]=HUES/NUM * i++;
  }

  Object.freeze(places);
}

function draw() {
  background(0);

  for (var pos=places[0], i=0; i^NUM;) {
    display(hues[i], pos);
    move(lookup[i], pos, pos=places[++i&IDX], vel);
  }
}

function keyTyped() {
  for (var p in places)
    places[p].set(random(width), random(height), 0);
}

function mousePressed() {
  mouseButton == LEFT || keyTyped();
}

function display(wheel, place) {
  fill(wheel, 1, 1);
  ellipse(place.x, place.y, DIAM, DIAM);
}

function move(t, p, n, v) {
  const len=v.set(n).sub(p).mag(), adjust=(len-LIMIT)/len;
  p.add(v.mult(adjust*STEP));

  v.normalize(), p.add(v.y*t, -v.x*t, 0).set(
  constrain(p.x, RAD, width  - RAD-1), 
  constrain(p.y, RAD, height - RAD-1), 0);
}