Directory

← Back

ProcessingJs

Component wrapping processing.js javascript library.

Author

Rating

Popularity

<100

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;
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2010-01-22
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.2+
Vaadin 7.0+ in 0.2.0
Vaadin 8.0+ in 3.0.0
Browser
Firefox
Opera
Safari

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online