supporting java + js 101 (and/or sound/minim wrapper packaging)

edited August 2015 in JavaScript Mode

I'm converting a bunch of old Java Processing applets I made into stuff that runs under Processing.js I used to use mimim quite a bit. I also like using my own "lowlag" audio library (it picks the most responsive strategy depending on browser type, )

I'm able to create a shim that makes the appropriate calls to lowlag for the Minim calls I used to make, but it requires that I use a custom index.html file that loads both lowlag and the shim. So I'm worried if I regenerate the web-export, it will get overwritten.

Is there a general way to tell processing to add specific js files to the generated index.html page? Or is there a better technique in general for keeping stuff running in both java and js modes?

Or general suggestions for this kind of problem. I wouldn't mind making something that conformed to some kind of API for this...




  • edited August 2015 Answer ✓

    Make a backup & modify: \modes\JavaScriptMode\template\template.html

  • Ah, ok, on my Mac that's in ~/Documents/Processing

    Thanks for the info!

    Is there any way to get it to copy the needed .js files? I was kind of hoping it would grab a copy of anything in that folder and shove it into web-export but that doesn't seem to be the case... obviously I could use full URLs rather than local, if I put this stuff on a server, but it would nice to have different options...

  • Got no much experience w/ it. But I believe if we place the ".js" file inside the same folder as the ".pde" sketch, JavaScript Mode will automatically generate an ".html" which loads the ".js" library. Worth a try!

  • It gets closer to a solution... the trouble is the processing editor puts the raw ".js" files in as tabs, and then trying to switch back to Java mode results in the editor opening up a new blank window

  • edited August 2015
    • Java Mode recognizes only ".pde" & ".java" suffixed tab files.
    • JavaScript Mode only ".pde" & ".js" files.
    • And CoffeScript the same as JS Mode plus ".coffee".

    Once we use anything but ".pde" tabs, it's not cross-mode compatible anymore! ^#(^

  • yeah, that's why I'm trying to figure out what the best strategies are for making libraries that ARE cross-mode.

    Personally I think it's a little weird the IDE is so happy to edit .java OR .js file, rather than .pde. And then using that to disable trying to switch is just bad UI. If it wasn't for that, the technique you suggested would totally work

  • edited August 2015
    • Java Mode doesn't understand ".js" files. Neither JS & CS Modes understand ".java" files.
    • Therefore, there's no point for Java Mode to recognize some ".js" or ".coffee" file as an actual tab and vice versa!
    • Unfortunately, Processing got almost nil cross-mode libraries available. :(
    • Actually, Processing Foundation gave up Processing.JS (PJS) framework in favor of p5.js.
    • They expect us now to write directly JavaScript syntax rather than transpile Java to JS.
  • Thanks for your continued thoughts!

    Well, it's kind of weird that "JS" mode tries to understand ".js" files, since they're so different in syntax. (Java mode editing .java made SOME kind of sense I guess, since old Processing was just a subset of Java with APIs) Probably a minor point that doesn't come up so much.

    I remember hearing (a long while back) that there was a conflict about if processing.js should be transpiled or a canvas library. For a while it seemed transpiling was canonically preferred, but I think p5.js has shifted the balance.

    Transpiling was a cool but weird beast! I'm surprised at how well it worked. Most of my old sketches work except for the fact that I used HashSet w/ Iterators a lot... admittedly I don't mind p5.js that much. I do a lot of js work, and if nothing else I like the JSON-style initializers, plus it feels a bit better.

    I wonder what this means for the main site, if eventually they'll shift all the examples to p5? That really was a strength of the old processing site, being able to see so many running examples.

    How do you stay up to date with the Processing Foundation?

    Anyway, I guess I'll be content with a few hacks to let me see my old games and toy sketches runing in browsers, and aim to do more new work in p5.

  • edited August 2015

    ... being able to see so many running examples.

    I've got this mini game I've adapted from Khan Academy for both Processing & p5.js: :D

    We can compare them as see Java & JS diff. OOP approaches! :-bd

  • @kirkjerk said:

    Well, it's kind of weird that "JS" mode tries to understand ".js" files

    If you look at the output it doesn't do anything at all with .js files; it simply loads them in as separate files with the contents untouched. That makes sense: ProcessingJS transpiles the 'Java' code in standard tabs to JS. This should then be able to communicate directly with any JS code in a .js tab without further intervention; since they're then speaking the same language.

    If the issue is that the editor won't allow separate .js and .java tabs can't you simply mirror the structure and contents of a project folder so all .PDE files are in synch and then store the .java and .js files separately in each folder? I'd imagine that's possible to implement using a repository like github and is certainly possible with folder-synching tools.

    In fact I think you'd only have to edit in Java mode in the Processing IDE: make sure the PDE files are in synch in your JS mode web output folder and then just edit the .js file directly in a more suitable IDE (Sublime Text, Atom, Brackets etc.)

    Untested. But it might just work :(|)

  • Yeah, there are a couple different techniques. The easiest thing seems to be just manually hauling the .js files out of the way when I want to toggle back to Java to see if it still works, then putting them back.

    Again, for me the weird bit is making the IDE into a general PDE/js/java editor instead of treating the other files as like external dependencies. I can see arguments either way.

    Thanks for thinking about it a bit tho!

  • Actually, the best technique is to just put the needed ".js" files in data... and because processing (weirdly?) copies the stuff in data to the same folder as the index etc, I don't even have to change the reference in the template index.html to "data/MYNEEDEDJS.js" or whatever

Sign In or Register to comment.