Directory

← Back

ProcessingSVG

Create animation and graphics easily with Processing language functionality

Author

Rating

Popularity

<100

Vaadin component that implements Processing functionality on its client side widget to produce images and animations to the web without using Flash or Java Applet. Implemented with GWT Graphics canvas that uses SVG/VML.

Please read also the Wiki page for more details. Link is provided with the related links.

Sample code

import org.vaadin.contrib.component.svg.processing.Processing;
import org.vaadin.contrib.processing.svg.gwt.client.ui.test.VProcessingSVGTest;

import com.vaadin.ui.ClientWidget;

@ClientWidget(VProcessingSVGTest.class)
public class ProcessingTest extends Processing {

	private static final long serialVersionUID = 1L;

}
import org.vaadin.contrib.processing.svg.gwt.client.ui.VProcessingSVG;

import com.vaadin.contrib.gwtgraphics.client.Image;
import com.vaadin.contrib.gwtgraphics.client.shape.Circle;

/**
 * Simple VProcessingSVG test application.
 *
 */
public class VProcessingSVGTest extends VProcessingSVG {

	/* TEST globals */
	private float radius = 50f;

	private int X, Y;

	private int nX, nY;

	private int delay = 16;

	private Circle circ;

	public VProcessingSVGTest() {
		size(800, 500);
	}

	/**
	 * This method will be called only once during initializing.
	 */
	@Override
	public void setup() {

		// By setting doClear false, canvas wont be cleared for every frame.
		// Default value is true.
		doClear = false;

		// Set canvas size
		size(1000, 500);

		// Set stroke weight in pixels
		strokeWeight(10);

		// Set frame rate
		frameRate(15);

		// Initial coordinates
		X = width / 2;
		Y = height / 2;
		nX = X;
		nY = Y;

		// Fill canvas grey
		background(100);

		// Set fill-color to blue
		fill(0, 121, 184);

		// Set stroke-color white
		stroke(255);
	}

	/**
	 * This method will be called on every frame.
	 */
	@Override
	public void draw() {

		radius = radius + sin(frameCount / 4);

		// Track circle to new destination
		X += (nX - X) / delay;
		Y += (nY - Y) / delay;

		// Create a circle Shape
		if (circ == null) {
			circ = circle(X, Y, (int) radius / 2);
		} else {
			circ.setRadius((int) radius / 2);
			circ.setX(X);
			circ.setY(Y);
		}

		// Create a new background Image VectorObject
		Image img = new Image(
				0,
				0,
				getWidth(),
				getHeight(),
				"/processingsvg/VAADIN/widgetsets/org.vaadin.contrib.processing.svg.gwt.ProcessingSVGWidgetSet/footerbg.gif");

		// Set background image
		background(img);
	}

	/**
	 * Called on mouse move.
	 */
	@Override
	public void mouseMoved() {

		nX = mouseX;
		nY = mouseY;
	}
}
public class ApplicationTest extends Application {

	private static final long serialVersionUID = 1L;

	private Processing pro;

	private Panel panel;

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

		panel = new Panel(
				"Animation made with Vaadin + GWT Graphics + Processing combination");

		pro = newProcessingComponent();

		constructPanel();

		main.addComponent(panel);
	}

	private void constructPanel() {
		panel.removeAllComponents();
		panel.addComponent(pro);
		panel.requestRepaint();
	}

	private Processing newProcessingComponent() {
		// Construct a new Processing component.
		// Notice that we construct a custom version of it, that extends
		// Processing class.
		Processing p = new ProcessingTest();

		return p;
	}
}

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 6.3+ in 1.0.4
Vaadin 6.0+ in 1.0.6
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