translating my code from java mode to javascript mode

emvizible

I've coded a fairly elaborate animation in the java mode, and am pleased with having used processing because it was reasonably efficient. My prior experience has been to code for computation or data analysis than animation.

I've hit a brick-wall with attempting to move from Java mode to JavaScript mode. I'm going to try to build up the code again, but so far it appears that in JavaScript mode all the IntList, FloatList and StringList structures are unrecognized. Is this really the case? If so...I would suggest that the reference pages for these structures be updated to indicate that they don't work in JavaScript mode...or...that some further code is required for them to function properly.

I've read the quickstart on using JS mode, and will undoubtedly reread it, as well as read through the forum. Sadly, it appears that using processing in Java mode completely obscures the 'proper' way to use processing with JS mode. I'll try not to whine any more....

Cheers, ~ e.m.

TechWiz777

You can use this:

http://www.gwtproject.org/

While you are at it can you help me with my question, thanks, it's kind of urgent...

GoToLoop

... in JavaScript mode all the IntList, FloatList and StringList structures are unrecognized.

That's very true! Those classes 1st appeared in Processing 2! @-)
However, the Processing.js project framework which JavaScript mode relies on is still @ v1.4.1!
That's pretty much the same period when Processing 1.5.1 reigned!

However, they're functionally similar to ArrayList for Integer, Float & String respectively!
Of course depending on which methods used, some modifications are needed to convert them to ArrayList!

Be aware that JS Mode w/ its processing.js library isn't the only way to get sketches in the web!
There are also CoffeeScript mode and the newest P5.JS project: http://p5js.org

Depending on your Java mode sketch, you might consider fully re-writing it either on CS Mode or P5.JS! @-)
That's why you should post your sketch so we can all have an idea how feasible the JS Mode conversion is! :-?

GoToLoop

Here's Processing.JS's own reference: http://processingjs.org/reference/
You can test-run your code @ http://processingjs.org/tools/processing-helper.html
The "Convert to JS" button shows how the sketch were "transpiled" to JS! (*)

emvizible

Hi, GoToLoop --

Thanks for confirming my sinking suspicions that a major re-write will be needed. My current 'sketch' is nearly 1000 lines, so I'll hold off posting for now.

I'll take a more considered look at my use of these structures and see about recasting as ArrayLists. My client really wants to get this hosted via a website just to share for feedback amongst a 'focus group' of their choosing.

I had not realized that there were other options, as you kindly suggest, as well as the suggestion by TechWiz777. You've provided sufficient feedback to keep me up late tonight ;-)

Cheers, ~ e.m.

TechWiz777

Hey! Anytime, mate!

GoToLoop

Thanks for confirming my sinking suspicions that a major re-write will be needed.

By re-writing I've meant to another language such as JS or CS!
If you had stuck to Processing's API w/o relying to 3rd-party libraries, you're gonna need only some adjustments, like the aforementioned ArrayList, not a complete rewriting! :-B
An extra tip: use Processing v1.5.1 to compile your sketch. If it fails there, it'll probably fail in JS Mode likewise! >-)

My current 'sketch' is nearly 1000 lines, so I'll hold off posting for now.

Of course I'm not asking the whole "behemoth"! For this analysis, most important is the top where we can view whether there is any import and all "global" variables!
setup() is another 1, where we can see their initializations!
After that, some explanations about any existing classes would be nice too! <):)

emvizible

Hi, GoToLoop &c

Thanks for the encouragement. I've been away from this project the past few days but am now ready to begin converting to the use of ArrayLists.

I'll comment here that I do not import any libraries in this sketch. I have relied heavily on the P2 classes as has been discussed. In short, the sketch reads data from two files. One holds financial data that my colleague wants to visualize through applying animation and other viz cues. The other provides dimensional information about the layout of the shapes that indicators will move along to implement the animation. I want my client to be able to fine tune, and thought that an input data file formatted as a spreadsheet would be a more effective way of making changes than asking them to learn processing itself.

I've set virtually all the variables as global at this point -- just a few specialized cases where I pass variables.

I've implemented a lot of user interaction through defining buttons, and also manage the placement of those within the sketch through IntLists. The number of buttons is determined from the content of the data file. Since I want my colleague to be able to alter the number of entries or substitute different versions of the data file, I chose to work with the List classes.

// Variables for managing the input data: financial and structural Table finData, finDataHeaders, trailData; StringList finHeaders, yearID, compID, startStr, endStr, modeID; IntList pathID, arcDirID, pathArc; FloatList radiusID, startID, endID;

I also experimented with a FloatDict, but recognized that it is not at all an essential element of the sketch.

Here's selected lines from setup().

void setup() {

// validate the dimensional calcs // float fTest = 1 - (tDimFracX + bDimFrac); // print(fTest," is fTest for ",tDimFracX,bDimFrac,"\n"); size(600,400); frameRate(1); // smooth(); background(0, 0, 125);

// Instantiate the variables needed to make sense of the financial and trail data yearID = new StringList(); compID = new StringList(); modeID = new StringList(); pathID = new IntList(); pathArc = new IntList(); radiusID = new FloatList(); arcDirID = new IntList(); startID = new FloatList(); endID = new FloatList();

// Financial data input occurs in evalData(), found on the functions tab trailData = loadTable("trailData.csv","csv, header"); // inputs to draw trail evalTrailData(); //println(yearID); evalData(); spaces = new FloatDict(); setSpaces();

Thanks again ~

GoToLoop

Please, when posting code in the forum, highlight it and hit CTRL+K! L-)
The way it is now is unreadable! :-&

emvizible

Let me try again (sorry for not properly reading the newbie notes)

<< copied>> Hi, GoToLoop &c

Thanks for the encouragement. I've been away from this project the past few days but am now ready to begin converting to the use of ArrayLists.

I'll comment here that I do not import any libraries in this sketch. I have relied heavily on the P2 classes as has been discussed. In short, the sketch reads data from two files. One holds financial data that my colleague wants to visualize through applying animation and other viz cues. The other provides dimensional information about the layout of the shapes that indicators will move along to implement the animation. I want my client to be able to fine tune, and thought that an input data file formatted as a spreadsheet would be a more effective way of making changes than asking them to learn processing itself.

I've set virtually all the variables as global at this point -- just a few specialized cases where I pass variables.

I've implemented a lot of user interaction through defining buttons, and also manage the placement of those within the sketch through IntLists. The number of buttons is determined from the content of the data file. Since I want my colleague to be able to alter the number of entries or substitute different versions of the data file, I chose to work with the List classes.

I also experimented with a FloatDict, but recognized that it is not at all an essential element of the sketch.

// Variables for managing the input data: financial and structural Table finData, finDataHeaders, trailData; StringList finHeaders, yearID, compID, startStr, endStr, modeID; IntList pathID, arcDirID, pathArc; FloatList radiusID, startID, endID;

Here's selected lines from setup().

void setup() {
        size(600,400); 
        frameRate(1);  
       background(0, 0, 125);

  // Instantiate the variables needed to make sense of the financial and trail data        
        yearID = new StringList(); 
        compID = new StringList(); 
        modeID = new StringList(); 
        pathID = new IntList(); 
        pathArc = new IntList(); 
        radiusID = new FloatList(); 
        arcDirID = new IntList(); 
        startID = new FloatList(); 
        endID = new FloatList();

  // Financial data input occurs in evalData(), found on the functions tab 
        trailData = loadTable("trailData.csv","csv, header"); 
        // inputs to draw trail 
        evalTrailData(); 
        //println(yearID); 
        evalData(); 
        spaces = new FloatDict(); 
        setSpaces();

Thanks again ~

GoToLoop

Corresponding data containers:

• IntList : ArrayList<Integer>
• FloatList : ArrayList<Float>
• StringList : ArrayList<String>

And replace all their append() methods w/ add() too!
Road block is Table class. Again, Processing 2+ exclusive! :-S
processing.org/reference/Table.html

The old Processing 1.5.1 way of dealing w/ CSV and the like was loadStrings() + split():

• processing.org/reference/loadStrings_.html
• processing.org/reference/split_.html

And create a custom class in order to store the loaded & parsed data! *-:)
Haven't I already told you that a sketch should run in Processing 1.5.1 in order to have a real chance on JS Mode?

Another path is re-write your code in P5.JS, which already got the Table class:
p5js.org/reference/#/p5.Table

And JS's arrays can replace all those lists above and more! :-bd

emvizible

Wow...the balance may have just swung towards moving away from Processing 2+

I appreciate your comment about using only Processing < 2 to create for javascript mode -- and it causes me to question why I thought js mode was just a simple optional development mode. The processing.org home page does not promote js with processing. But somewhere in my learning of processing, the idea of using js mode from within Processing2 took root, and it has been hard to shake.

So I will now more deeply consider moving away from the 'band-aid' approach to incrementally re-writing my code back to P1.5.1, and take a more forward-looking approach through P5.ps and javascript itself.

Many thanks, GoToLoop!

GoToLoop

Your current project seems very viable to JS Mode compatibility since you've avoided 3rd-party imports.
But for next web projects, it's much easier to go P5.JS route rather than counting on cross Java-JS. Good luck! %%-

emvizible

Thanks for providing perspective -- this project has been useful at expanding my appreciation of the ecosystem, whether I'm ready for that or not!