My experience with Processing programming language (and JavaFX X Processing)

Processing is the main language used to create Arduino code. It is also a great language to create visual applications. In this post I am going to share you some processing sketches I created and the way to follow if you are looking to have fun with this great programming language based in Java.

Having fun with processing

Simplicity is the word for processing. You can sit, open the IDE, have some random idea and in a few minutes you will implement it. Here are some random fun stuff I created in a few minutes

Spiral

As a first test with angular motion, I created a sketch to draw lines which when connected create a spiral:

TV out of tune

To experiment the noise function, a sketch using this function was to simulate an old TV of tune effect:

"The Thing"

Angular motion is always exciting. In this example I created a class called TheThing, which makes use of angular motion. I won't post all the code here, but you can see in my github.

Particle generation

I already made tests with particle generation using HTML 5 at this blog, but it was really simpler to create one with Processing:



I have a lot of other sketches, but I didn't added to github yet. Here is the code of the sketches above:

	class Particle {
	PVector location;
	PVector velocity;
	float life;
	float lifeRate;
	color c;
	Particle(){
	location = new PVector(mouseX, mouseY, height/2);
	velocity = new PVector(random(-2, 2), random(1, 3));
	life = 255;
	lifeRate = random(1, 10);
	c = color(0);
	}
	void update() {
	location.add(velocity);
	life-=lifeRate;
	}
	void display() {
	if(mousePressed) {
	c = color(random(255), random(255), random(255));
	}
	noStroke();
	fill(c, life);
	ellipse(location.x, location.y, 10.0, 10.0);
	}
	boolean isDead() {
	return life < 0;
	}
	}

view raw Particle.pde hosted with ❤ by GitHub

	ArrayList<Particle> particles;
	void setup() {
	size(600, 400);
	particles = new ArrayList<Particle>();
	}
	void draw() {
	background(255);
	particles.add(new Particle());
	for(int i = 0; i < particles.size(); i++) {
	Particle p = particles.get(i);
	p.update();
	p.display();
	if(p.isDead()) {
	particles.remove(i);
	}
	}
	}

view raw particle_generation.pde hosted with ❤ by GitHub

	float r = 1;
	float a = 0.0;
	float lastX = 0;
	float lastY = 0;
	void setup() {
	size(800, 600);
	}
	void draw() {
	translate(width / 2, height / 2);
	float x = r * cos(a);
	float y = r * sin(a);
	stroke(random(255), random(255), random(255));
	line(lastX, lastY, x, y);
	r += 0.1;
	a += 0.1;
	lastX = x;
	lastY = y;
	}

view raw spiral.pde hosted with ❤ by GitHub

	int t = 0;
	int s = 2;
	void setup() {
	frameRate(5);
	size(300, 200);
	}
	void draw() {
	for(int i = 0 ; i < width; i+=s){
	for(int j = 0 ; j < height; j+=s){
	noStroke();
	fill(map(noise(t++), 0, 1, 80, 255));
	rect(i, j, i+s, j+s);
	}
	}
	}

view raw tv.pde hosted with ❤ by GitHub

Where you can find inspiration and more information?

That is an interesting question. I am watching Processing videos on Vimeo and reading two books. It all started when my teacher twitter about Shiffman's videos. I felt in love with the Nature of Code video series and I watched almost all videos and now I decided to play with it and make the Nature of Code's exercises. The material I have about processing are:

• The book Nature of Code, which I bought for my kindle;
• Another book from Daniel Shiffman called Learning Processing;
• Videos and more videos on Vimeo. You must watch them! Daniel is a really motivated and fun teacher and the subject(simulating nature using code) is simply amazing! Nature of Code and Adv. Processing for Data Viz are the two series of videos I recommend. But if you want to know the basics, you should see Shiffman's video series on Programming basics.
• I also read the book Visualizing data, not completely, but it is a little outdated...

So, what Processing is useful for?

In my opinion, Processing is great for creating visualizations and to learn programming. Yeah, learn how to program. Here's why:

• Unlike Python, Processing syntax is close to Java and C, two of most used programming languages in the world. It makes  easier for beginners to jump to a language more used in the market;
• Processing is cool and at first steps, the beginners will be creating useful and exciting sketches;
• There's great and didactic material for teachers. For example, Shiffman put some slides in the Learning Processing book's page;
• In a course, the same language can be used also in Arduino, so the students won't have difficult applying their processing knowledge when studying Hardware or IoT;
• Not convinced yet? Watch the Hour of Code video for processing.

But of course, processing goes beyond teaching. With processing you can:

• Create artistic and beautiful visualization of data, or no data. For example, see this tumblr, where the author is creating 1 sketch per day during one year;
• Processing is built on top of Java, which means that it should possible to use existing Java libraries (I never tested, but I used other classes from JavaSE on it);
• Processing is flexible and can be ported to run on Web pages as javascript and/or Android devices!

The weak points of Processing

I understand processing is used mainly to draw and create visualization, so I think it is so hard to create UI elements such as buttons, labels, etc. I also found the text functionalities so poor, but perhaps I am not so familiar with it.

Processing X JavaFX

No, I will not "abandon" JavaFX. In fact, I check processing sources to see if it could be possible to port Processing to run inside a JavaFX app, but it makes high use of the "old" Java graphical stack (Java2d and AWT). In any case, I plan to reuse a game I created inside a JavaFX application using Canvas.
I generally prefer JavaFX for visual applications because it has a rich UI library and built-in features to create animations, but when I want to create visualizations, I should use processing.
In fact, in a future post I plan to share my experiences when migrating a game from processing to run inside a JavaFX app.

JavaFX Ensemble application is a great tool to explore JavaFX feature

Conclusion

Processing is a great tool to create visualizations. It is simply and easy to learn. Java programmers automatically know Processing!

On my next post I will try to describe a simple and silly game I created for fun and after this I will try to reuse the processing code to run this game inside a JavaFX app.