ProcessingJs

Component wrapping processing.js javascript library.

Processing.js is an javascript library that can be used to produce images and animations to the web without using Flash or Java Applet. HTML5 Canvas support is required for the browser.

This component wraps processing.js library. Supports most of the functions out of the box. You can write Processing sketches either with Processing Visualization Language or with Java.

Sample code

public class ApplicationTest extends Application implements MousePressListener {

    private String code = "void setup() { size(300, 300); }"
        + "void draw() { ellipse(0,0,width,height); }";
    
    private Label label;

    @Override
    public void init() {
        Window main = new Window();
        setMainWindow(main);

        Panel panel = new Panel("Testing Processing component");
        
        Processing p = new Processing();
        p.setUseProcessingCode(true);
        p.setCode(this.code);
        p.addListener((MousePressListener) this);
        
        this.label = new Label();

        panel.addComponent(p);
        panel.addComponent(label);

        main.addComponent(panel);
    }

    @Override
    public void mousePress(MousePressEvent event) {
        this.label.setValue("Mouse clicked at: " + event.getX() + ", " + event.getY());
    }
}

Processing pro = new Processing();

CustomProcessingCodeExtension codeExtension = new CustomProcessingCodeExtension();
codeExtension.extend(pro);

// Set active sketch. Here we use a class name as a identifier.
// In the end, the connector will decide the correct client-side class with this identifier.
codeExtension.setProcessingJavaCodeClass(ProcessingCodeImplTest.class
                .getName());

package org.vaadin.tltv.vprocjs.gwt.client.ui.test;

import org.vaadin.tltv.vprocjs.gwt.client.ui.ProcessingCodeBase;

public class ProcessingCodeImplTest extends ProcessingCodeBase {

    double radius = 50.0f;
    int X, Y;
    int nX, nY;
    int delay = 16;

    @Override
    public void setup() {
        pro.size(200, 200);
        pro.strokeWeight(10);
        pro.frameRate(15);
        X = pro.getWidth() / 2;
        Y = pro.getWidth() / 2;
        nX = X;
        nY = Y;
    }

    @Override
    public void draw() {
        radius = radius + pro.sin(pro.getFrameCount() / 4);
        X += (nX - X) / delay;
        Y += (nY - Y) / delay;
        pro.background(100);
        pro.fill(0, 121, 184);
        pro.stroke(255);
        pro.ellipse(X, Y, radius, radius);
    }

    @Override
    public void mouseMoved() {
        nX = pro.getMouseX();
        nY = pro.getMouseY(); 
    }
}

package org.vaadin.tltv.vprocjs.gwt.client.ui.test;

import org.vaadin.tltv.vprocjs.gwt.client.ui.ProcessingCode;
import org.vaadin.tltv.vprocjs.gwt.client.ui.ProcessingCodeConnector;
import org.vaadin.tltv.vprocjs.test.server.CustomProcessingCodeExtension;

import com.vaadin.shared.ui.Connect;

@Connect(CustomProcessingCodeExtension.class)
public class CustomProcessingCodeConnector extends ProcessingCodeConnector {

    @Override
    public ProcessingCode getProcessingJavaCode(String codeClass) {
        if (ProcessingCodeImplTest.class.getName().equals(codeClass)) {
            return new ProcessingCodeImplTest();

        } else if (ProcessingJavaCode1.class.getName().equals(codeClass)) {
            return new ProcessingJavaCode1();

        } else if (ProcessingJavaCode2.class.getName().equals(codeClass)) {
            return new ProcessingJavaCode2();
        }
        return null;
    }
}

Links

• More about Processing.js
• Online Demo
• Issue Tracker
• Source Code

Compatibility