Using Processing On A Server To Create Images Behind The Scenes

The way I see most people use Processing is for drawing an image directly onto a screen or webpage on the client side. How would one use Processing to create an image without a vis

Solution 1:

I've done this, using Processing in a Servlet to render images on the fly. A problem I found is that Processing isn't thread-safe, so I had to create multiple Processing instances and share them in a queue.

Here's a servlet which renders Mandelbrot fractals, to be used by Google Maps as an overlay:

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.concurrent.LinkedBlockingQueue;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import processing.core.PApplet;

publicclassTileextendsHttpServlet {
    privatestaticfinallongserialVersionUID=1L;
    privatestatic LinkedBlockingQueue<PApplet> pQueue = newLinkedBlockingQueue<PApplet>();

    private PApplet createPApplet() {
        PAppletp=newPApplet();
        p.init();
        p.size(256, 256);
        p.noLoop();
        p.textFont(p.createFont("Monospace", 8, true));
        p.stroke(0x22FFFFFF);
        p.colorMode(PApplet.HSB, 256, 1, 1);
        return p;
    }

    protectedvoiddoGet(HttpServletRequest request,
            HttpServletResponse response)throws ServletException, IOException {
        PApplet p;

        if (pQueue.size() == 0) {
            p = createPApplet();
        } else {
            try {
                p = pQueue.take();
            } catch (InterruptedException e) {
                p = createPApplet();
            }
        }

        intzoom= Integer.parseInt(request.getParameter("z"));
        inttileX= Integer.parseInt(request.getParameter("x"));
        inttileY= Integer.parseInt(request.getParameter("y"));
        inttiles=1 << zoom;

        p.loadPixels();

        finalintN=256;
        //final double inverse_N = 2.0 / 256;finaldoubleinverse_N=2.0 / tiles / 256;
        inty= -1;

        while ((++y) < N) {
            doubleCiv= (double) (y + tileY * 256) * inverse_N - 1.0;
            for (intx=0; x < N; x++) {
                doubleCrv= (double) (x + tileX * 256) * inverse_N - 1.5;

                doubleZrv= Crv;
                doubleZiv= Civ;

                doubleTrv= Crv * Crv;
                doubleTiv= Civ * Civ;

                inti=256;
                do {
                    Ziv = (Zrv * Ziv) + (Zrv * Ziv) + Civ;
                    Zrv = Trv - Tiv + Crv;

                    Trv = Zrv * Zrv;
                    Tiv = Ziv * Ziv;
                } while (((Trv + Tiv) <= 4.0) && (--i > 0));

                if (i == 0) {
                    p.pixels[x + y * N] = 0x00000000;
                } else {
                    p.pixels[x + y * N] = p.color(256 - i,1,1);
                }
            } // end foreach column
        }
        p.updatePixels();

        // render info
        p.fill(0x22000000);
        p.text("X: " + tileX + "\nY: " + tileY + "\nZ: " + zoom, 1, 13);
        p.fill(0x22FFFFFF);
        p.text("X: " + tileX + "\nY: " + tileY + "\nZ: " + zoom, 0, 12);

        p.line(0, 0, 0, 2);
        p.line(0, 0, 2, 0);
        p.line(255, 255, 255, 253);
        p.line(255, 255, 253, 255);

        // done
        p.loadPixels();
        BufferedImageimg=newBufferedImage(256, 256,
                BufferedImage.TYPE_INT_ARGB);
        img.setRGB(0, 0, 256, 256, p.pixels, 0, 256);
        p.draw();

        response.setHeader("Content-Type", "image/png");
        ImageIO.write(img, "PNG", response.getOutputStream());

        try {
            pQueue.put(p);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

}

Solution 2:

Processing was originally written for Java if I remember correctly. It was then ported to Javascript. You could use Java to create the image.

Solution 3:

You could download the java version of Processing here and use that. Processing is not limited to javascript. As Ben mentions, it started as a java program. The homepage also lists implementations in javascript, clojure, ruby, and scala.

How to integrate this into the rest of your web page depends mostly on your web framework.

Solution 4:

You could run a a javascript engine on the server and use processing just like you'd use it in the browser.

Here's how you can install the v8 interpreter:

Running v8 Javascript Engine standalone.

I'm not quite sure if this allows you to access files, but I'm sure there are ways to do this.

Solution 5:

Processing is Java. The javaScript mode, new in 2.0 (beta x) is an integration of processingjs a library that "pre processes" Processing code into javaScript. Actually there is less features and none processing library is compatible. This is from Processing developers about this change in 2.0:

Java Applet support is being removed, starting in 2.0 alpha 7. It simply doesn't make sense to support these anymore, given our priorities, lack of web browser support, ... while browser makers and OS vendors make applets all the more difficult and unappealing is a losing battle ... At the moment, using Processing JS (or Processing 1.5) is instead generally a better option for things that run on the web... (see full text)

There is this article in Processing wiki about how to use PHP to save files to server. Not sure if it can help.

http://wiki.processing.org/w/Saving_files_to_a_web-server