How to create viable image based Processing programs that load fast and work on web?

mnoble

Hello Processing Forum,

I am a very beginning level Processing art teacher. My students are about to produce a series of interactive info-graphics which are very image heavy. Their design process will start in Photoshop and once their layers are ready then they will import them into Processing to add interactivity. My questions are:

1. Are 70 dpi .PNGs the best files for importing layers with transparencies into Processing? Is there a better way?

2. How many images can be imported before Processing designs start to bog/slow down?

3. What would be the most successful strategy to convert the Processing sketches so that they could be hosted online?

4. Is it possible to convert them into apps and easily open them on a phone?

GoToLoop

1 & 2:

No matter the format, all loaded images become individual pixels in Processing wrapped as PImage:
http://ProcessingJS.org/reference/PImage/

Therefore, the higher the image resolution, the bigger chunk of memory it grabs.

3:

Default mode in Processing is called "Java Mode". And it is compiled as a Java executable.
We can install "JavaScript Mode" in order to transpile Java syntax to JS syntax so it can be run online.
Such sketches are considered cross-mode if they can be compiled by both modes.

However, successful transpilation isn't perfect. At minimum we need to stick to Processing's API:
http://ProcessingJS.org/reference/

You can also debug whether the sketch was successfully transpiled as JS in these sites:
http://ProcessingJS.org/tools/processing-helper.html
http://www.OpenProcessing.org/sketch/create
http://studio.SketchPad.cc/

4:

Dunno. But if a sketch is running online inside a browser, I guess it's good enough? ;;)

mnoble

Thank you so much GoToLoop.

With respect to installing "JavaScript Mode" --is this something that can be done after the sketches are written in Processing? Is this just a translation of syntax that has to be done manually? Or, does the transpile run for me and then I just debug?

GoToLoop

• JavaScript Mode transpiles a sketch written in Java Mode to JS. Sure you can use it at any time!
• As you may know, Java Mode is a Java program which uses the Processing library PApplet:
  https://Processing.org/reference/
• And JS Mode is a JS program that uses ProcessingJS (PJS) library:
  http://ProcessingJS.org/reference/
• There's also the new p5.js library, but it can't transpile Java syntax to JS: http://p5js.org/reference/

mnoble

Thanks again GoToLoop!

blindfish

Is it possible to convert them into apps and easily open them on a phone?

In principle yes, using something like phonegap; though if it runs in the browser I'd question the need for an app...