ProcessingSVG

Create animation and graphics easily with Processing language functionality

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

Links

• Wiki
• Source Code
• Discussion Forum
• Demo #2
• Demo #1

Compatibility