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

This release fixes issues with having the demo UI included in the package.

Released
2017-06-26
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 0.2.1
Vaadin 6.2+ in 1.0
Browser
Firefox
Safari
Google Chrome
Internet Explorer
Microsoft Edge

ProcessingJs - Vaadin Add-on Directory

Component wrapping processing.js javascript library. ProcessingJs - Vaadin Add-on Directory
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.
Online