Quick visual effects apps development with JavaFX

Processing is a great programming language based on Java with versions for Javascript and for Python. If you don't know it, just watch a few Daniel Shiffman videos to quickly fall in love with this technology. I talked about processing and JavaFX in this post.
JavaFX is great as well and it is available in the JDK 1.8 - which means that no external libraries is required to create JavaFX applications. In this article I will show you a class I have been using to approach JavaFX to the Processing programming style.
This is not intended to have processing running on top of JavaFX. Processing is big and I would take a few days porting all methods and classes to a JavaFX app. The idea is quickly start drawing instead have to create stage, initializing, etc. Of course, the code is on github, so if you want to contribute a PR is more than welcome!
So the idea is:

• Extend a class;
• Override setup method to define app title, frames, width, height;
• Override draw to animate things - bear in mind draw is called X times per second depending on value you set on frames;
• Override event listeners methods you want;

The class to extend is DrawingApp and an example is the classing bouncing balls app. Source code:

	package org.fxapps.drawingfx;
	import javafx.scene.paint.Color;
	public class BouncingBalls extends DrawingApp {
	Ball[] balls = new Ball[20];
	public static void main(String[] args) {
	launch();
	}
	@Override
	void setup() {
	title = "Bouncing Ball Example";
	width = 800;
	height = 600;
	for (int i = 0; i < balls.length; i++) {
	balls[i] = new Ball(width / 2, height / 2);
	}
	}
	@Override
	void draw() {
	ctx.setFill(Color.LIGHTGRAY);
	ctx.fillRect(0, 0, width, height);
	for (Ball ball : balls) {
	ball.update();
	ball.show();
	}
	}
	class Ball {
	int x, y, r, speedX, speedY;
	Color c;
	public Ball(int x, int y) {
	this.x = x;
	this.y = y;
	this.c = Color.rgb(random.nextInt(255), random.nextInt(255), random.nextInt(255));
	r = random.nextInt(100);
	speedX = 40 - random.nextInt(40) - 20;
	speedY = random.nextInt(40) - 20;
	}
	void update() {
	this.x+= speedX;
	this.y+= speedY;
	if(x < 0 || x > width) {
	speedX *= -1;
	}
	if(y < 0 || y > height) {
	speedY *= -1;
	}
	}
	void show() {
	ctx.setFill(c);
	ctx.fillOval(x, y, r, r);
	}
	}
	}

view raw BouncingBalls.java hosted with ❤ by GitHub

	package org.fxapps.drawingfx;
	import static java.lang.Math.pow;
	import static java.lang.Math.sqrt;
	import java.util.Random;
	import javafx.animation.KeyFrame;
	import javafx.animation.Timeline;
	import javafx.application.Application;
	import javafx.scene.Scene;
	import javafx.scene.canvas.Canvas;
	import javafx.scene.canvas.GraphicsContext;
	import javafx.scene.input.KeyEvent;
	import javafx.scene.input.MouseEvent;
	import javafx.scene.layout.StackPane;
	import javafx.stage.Stage;
	import javafx.util.Duration;
	/**
	*
	* Class to quick start drawing with JavaFX. Just extend this class and create your application!
	*
	* @author wsiqueir
	*
	*/
	public abstract class DrawingApp extends Application {
	public int frames = 10;
	public String title = "My App";
	public static int width = 600;
	public static int height = 400;
	public static Random random = new Random();
	Canvas canvas = new Canvas();
	GraphicsContext ctx = canvas.getGraphicsContext2D();
	@Override
	public void start(Stage stage) throws Exception {
	setup();
	canvas.setHeight(height);
	canvas.setWidth(width);
	canvas.setOnMouseClicked(this::mouseCliked);
	canvas.setOnMouseDragged(this::mouseDragged);
	canvas.setOnMouseMoved(this::mouseMoved);
	canvas.setOnMouseEntered(this::mouseEntered);
	canvas.setOnMouseExited(this::mouseExited);
	canvas.setOnKeyPressed(this::keyPressed);
	canvas.setOnKeyTyped(this::keyTyped);
	canvas.setOnKeyReleased(this::keyReleased);
	StackPane raiz = new StackPane(canvas);
	stage.setTitle(title);
	stage.setScene(new Scene(raiz, width, height));
	stage.show();
	canvas.requestFocus();
	KeyFrame frame = new KeyFrame(Duration.millis(1000 / frames), e -> draw());
	Timeline timeline = new Timeline(frame);
	timeline.setCycleCount(Timeline.INDEFINITE);
	timeline.play();
	}
	// classical setup and draw methods from Processing
	void setup() {
	}
	void draw() {
	}
	// event listeners - if user override the method with event, the method
	// without event won't be called
	public void mouseCliked(MouseEvent e) {
	mouseCliked();
	}
	public void mouseDragged(MouseEvent e) {
	mouseDragged();
	}
	public void mouseMoved(MouseEvent e) {
	mouseMoved();
	}
	public void mouseEntered(MouseEvent e) {
	mouseEntered();
	}
	public void mouseExited(MouseEvent e) {
	mouseExited();
	}
	public void keyPressed(KeyEvent e) {
	keyPressed();
	}
	public void keyTyped(KeyEvent e) {
	keyTyped();
	}
	public void keyReleased(KeyEvent e) {
	keyReleased();
	}
	public void mouseCliked() {
	}
	public void mouseDragged() {
	}
	public void mouseMoved() {
	}
	public void mouseEntered() {
	}
	public void mouseExited() {
	}
	public void keyPressed() {
	}
	public void keyTyped() {
	}
	public void keyReleased() {
	}
	/*
	* Utility methods
	*/
	public double distance(double x, double y, double x2, double y2) {
	return sqrt(pow(x2 - x, 2) + pow(y2 - y, 2));
	}
	}

view raw DrawingApp.java hosted with ❤ by GitHub

Which results in:

Bouncing balls example

I didn't bother to get rid of the main method - if you  have any idea to avoid it, please let me know!

Conclusion

I liked this idea and to be honest, I wanted to have a "Processing JavaFX" thing so I would be able to use processing inside a JavaFX app, but I am happy with this class I have been using in some fun stuff I created. If you have any idea of improvement, please send me PRs on github or comment on this post!

   >> CODE ON GITHUB <<