Effects - Physics and Particles

C H A P T E R 10

■ ■ ■

201

Effects: Physics and Particles
Particles are capable of creating some eye-catching animations that produce vibrant and fluid effects.
Physics engines, on the other hand, create animations that satisfy our sense of motion. Combining these
two excellent effects offers the best of both worlds, and this chapter explores two examples of
intertwining physics with particles.
Particles as Bodies
In Chapter 6 I used the open source physics engine Phys2D to implement a number of physics-based
examples in JavaFX. This chapter will continue to use Phys2D because it provides so much functionality.
As you’ll recall from Chapter 6, an object in a physics simulation is called a body. This first example
explores how to implement a particle system where each particle is a body. Basically, the particle emitter
will create particles that are JavaFX Nodes and have reference to a Body. As the World is updated and the
location of the Body changes, the location of the Node is updated to reflect this.
This is different from the original particle examples in Chapter 6 wherein each Node updated its
location based on a set of fixed parameters. Figure 10-1 shows a particle system that utilizes physics.
CHAPTER 10 ■ EFFECTS: PHYSICS AND PARTICLES

202


Figure 10-1. Particles as bodies
Figure 10-1 shows a bunch of falling particles, and as they fall they bounce off each other and the
line of dots at the bottom of the screen. There are two types of particles being emitted—one is big and
puffy and the other is smaller.
In Figure 10-2 we see that the two different particles are simulating different aspects of a shower of
sparks.

CHAPTER 10 ■ EFFECTS: PHYSICS AND PARTICLES

203


Figure 10-2. Two types of particles
The bigger ones try to capture the sense of smoke and fire at the point where the sparks are being
emitted, and the little particles try to capture the sense of sparks falling and bouncing. Listing 10-1
shows the majority of the Main.fx file for this example.
Listing 10-1. Main.fx
public var cloud = Image{
url: "{__DIR__}cloud.png"
}
public var spark = Image{
url: "{__DIR__}spark.png"
}
public var random = new Random();

var worldNodes:WorldNode[];
var emitters:Emitter[];

var particles = Group{
blendMode: BlendMode.ADD
}
var obstacles = Group{}

var world = new World(new Vector2f(0,600), 1);
var worldUpdater = Timeline{
repeatCount: Timeline.INDEFINITE
keyFrames: KeyFrame{

time: 1.0/30.0*1s
action: update;
}
}
public function update():Void{
world.<<step>>();
CHAPTER 10 ■ EFFECTS: PHYSICS AND PARTICLES

204

for (worldNode in worldNodes){
worldNode.update();
}
}
public function addWorldNode(worldNode:WorldNode):Void{
if (worldNode instanceof Particle){
insert (worldNode as Node) into particles.content;
} else {
insert (worldNode as Node) into obstacles.content;
}
insert worldNode into worldNodes;
for (body in worldNode.bodies){
world.add(body);
}
for (joint in worldNode.joints){
world.add(joint);
}
}
public function removeWorldNode(worldNode:WorldNode):Void{
if (worldNode instanceof Particle){

delete (worldNode as Node) from particles.content;
} else {
delete (worldNode as Node) from obstacles.content;
}
delete worldNode from worldNodes;
for (body in worldNode.bodies){
world.remove(body);
}
for (joint in worldNode.joints){
world.remove(joint);
}
}
public function addEmitter(emitter:Emitter):Void{
insert emitter into emitters;
emitter.play();
}
public function removeEmitter(emitter:Emitter):Void{
emitter.stop();
delete emitter from emitters;
}

public function clear(){
var wn = worldNodes;
for (node in wn){
removeWorldNode(node);
}
var em = emitters;
for (emitter in emitters){
removeEmitter(emitter);
}

}
CHAPTER 10 ■ EFFECTS: PHYSICS AND PARTICLES

205

function run():Void{
worldUpdater.play();

var sparksButton = Button{
text: "Sparks"
action: sparks
}
var fireballsButton = Button{
text: "Fireballs"
action: fireballs
}
var buttons = VBox{
translateX: 32
translateY: 32
spacing: 12
content: [sparksButton, fireballsButton]
}
Stage {
title: "Chapter 11"
width: 640
height: 480
scene: Scene {
fill: Color.BLACK;
content: [buttons, obstacles, particles]
}

}
}

function sparks():Void{
clear();
for (x in [1..64]){
addWorldNode(Peg{
radius: 4
translateX: x*10
translateY: 400
});
}
var emitter = SparkEmitter{
x: 640/2
y: 130
}
addEmitter(emitter);
}

The function run sets up the scene and the buttons that present each example. The function sparks
is the entry point for this first example—it simply creates a number of Pegs and a SparkEmitter. The Pegs
create the line of circles seen in Figure 10-1, while the SparkEmitter specifies from where the sparks
should come. The Pegs are added by the function addWorldNode; the Emitter is added by the function
addEmitter.
In this example an Emitter is not a JavaFX Node. It is just an object that controls when particles are
added, though it does specify where the particles are created. In Chapter 6 on particles, an emitter is a