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

Support for GWT Graphics 1.0.0

Released
2011-09-18
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Vaadin 6.3+ in 1.0.4
Vaadin 6.2+ in 1.0.5
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer

ProcessingSVG - Vaadin Add-on Directory

Create animation and graphics easily with Processing language functionality ProcessingSVG - Vaadin Add-on Directory
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.
Online