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

edited January 2016 in JavaScript Mode

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?

Answers

  • edited January 2016

    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? ;;)

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

  • edited January 2016 Answer ✓
  • Thanks again GoToLoop!

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

Sign In or Register to comment.