This time I invite you to follow my path to another nice 2D effect: Lightning.
Friday evening, surfing. Then, suddenly I was struck by lightning. Here.
This blog post is about my journey to a decent looking lighning bolt visualisation using Scala and JavaFX.
As a side note: I really appreciate Oracles move to support JavaFX with plain Java, and thus opening up the API for all JVM based languages, otherwise the following approach would never have been possible.
So let's start:
Well, that should be easy with JavaFX. What do we need? Just a Line and an effect? Maybe even a premade effect which is named Glow? And a Line? Well. Almost:
This gives me a picture like this:
Ok, seems ok for me. Lets proceed to
My lightning is so far only a straight line, but I want to have a cool lightning strike. The tutorial I'm trying to reimplement here proposes to partition the line in smaller pieces of a random number. Furthermore it says the endpoints of those lines should be connected and be placed normal to the direction of the original line.
So this is what I came up with:
it will output pictures like this:
This took me some time to figure out - I reinvented the 2D math for myself again, I'm sure this can be done way better. What I'm fond of is how the list of endpoints of the different line sections is traversed - have a look!
What I would like to see is some interaction. Clicking somewhere in the canvas and then - BANG! - the lightning strikes.
What I need to do for that is just use the mouse coordinates, give the canvas a listener for it and thats all since JavaFX handles the erasing of the blurry pixels. Maybe I'll add some flickering to it, some fade outs? More glowing?
For most of my wishes there are already API's for it in the standard library, for example the very handy FadeTransition which I wanted to invent but it was already there ;-). Have a look at this code snippet:
On the otther hand, I definitely wanted also to have some sound effect, which is also a one liner:
The code for the video above is available here.
The next step would be to improve the layout of bolts, add branches and refine the layout algorithm which is at the moment very basic to get a better visual result and to let the bolts look more "natural".
Apart from the link mentioned above, there are also other sources of information available how to generate decent looking lightning bolts. My current approach just places a list of points randomly round a normal line, but a visually more appealing result is possible for example by using the technique of "midpoint replacement". The idea is that you recursively part up a line in two halves, and move the midpoint a random amount of pixels normal to the given direction. With every nested level you may lower the amount of displacement.
So, the relevant code would look like this (inspired by Mr. KrazyDad):
With this new layoutalgorithm, the lightning bolts look much better (and also more like the ones at gamedevtut's site):
You can see the source here. Since I strive to be a well behaved functional programmer I had to swap only one function to achieve this. (My favorite joke: "Two pure functions walk in a bar. Nothing happens.")
At the moment I support painting only one lightning, I want to have some sort of branching so that I get an even better result. This can be accomplished by randomly choosing a subelement of the main thunderbolt, then calculate a new endpoint which points at another direction, and do this again recursively (maybe at a random rate).
Branching adds much value without much pain to our lightning. I changed the datastructures a little, now I'm saving tuples of start and endpoints in the list which I'm sending to the mkLine function - this simplifies the painting loop considerably (no more sliding windows anymore :( )
Here is the lightning with branches (and different colors):
Using true type fonts is no problem either when using JavaFX.
We have all what we need for our final step - create lightnings to write something on the screen. In order to achieve this effect, we need to write the headline into a WriteableImage and use the rasterized information for source and endpoints of randomly generated bolts. By using a simple trick which prefers two points which are nearer to each other than two points with a longer distance, we achieve a nice looking effect you may have once or twice seen in games or other visual effects.
This whole application is by no means optimized, you will hear your fan soon when starting the program, but it is no wonder since we are calculating lots of stuff and are generating huge number of nodes.
Have a look at the final result of the 2D JavaFX Lightning blog post, and thanks for reading!
If you want to have a peek at the source code for the whole project, its on github.
 |
| Election night crowd, Wellington, 1931 |
Friday evening, surfing. Then, suddenly I was struck by lightning. Here.
This blog post is about my journey to a decent looking lighning bolt visualisation using Scala and JavaFX.
As a side note: I really appreciate Oracles move to support JavaFX with plain Java, and thus opening up the API for all JVM based languages, otherwise the following approach would never have been possible.
So let's start:
Level -1: Create a glowing line
Well, that should be easy with JavaFX. What do we need? Just a Line and an effect? Maybe even a premade effect which is named Glow? And a Line? Well. Almost:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class GlowingLine extends javafx.application.Application { | |
| val canvasWidth = 1024 | |
| val canvasHeight = 768 | |
| override def start(primaryStage: Stage): Unit = { | |
| primaryStage.setTitle("Level0") | |
| val root = new BorderPane() | |
| val drawingBoard = new Group() | |
| val background = { | |
| val b = new Rectangle(0, 0, canvasWidth, canvasHeight) | |
| b.setFill(Color.BLACK) | |
| b | |
| } | |
| val refline = new Line(canvasWidth / 10, canvasHeight / 2, canvasWidth * 9 / 10, canvasHeight / 2) | |
| refline.setStroke(Color.WHITESMOKE) | |
| val line = new Line(canvasWidth / 10, canvasHeight / 2, canvasWidth * 9 / 10, canvasHeight / 2) | |
| line.setStroke(Color.WHITE) | |
| line.setStrokeWidth(4) | |
| val bloom = new Bloom(1.0) | |
| val blur = new GaussianBlur() | |
| blur.setInput(bloom) | |
| line.setEffect(blur) | |
| drawingBoard.getChildren().addAll(background, refline, line) | |
| root.setCenter(drawingBoard) | |
| primaryStage.setScene(new Scene(root, canvasWidth, canvasHeight)) | |
| primaryStage.show() | |
| } | |
| } |
This gives me a picture like this:
 |
| A glowing line (sort of) |
Ok, seems ok for me. Lets proceed to
Level 0: Create jagged lines
My lightning is so far only a straight line, but I want to have a cool lightning strike. The tutorial I'm trying to reimplement here proposes to partition the line in smaller pieces of a random number. Furthermore it says the endpoints of those lines should be connected and be placed normal to the direction of the original line.
So this is what I came up with:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class JaggedLine extends javafx.application.Application { | |
| val canvasWidth = 1024 | |
| val canvasHeight = 768 | |
| val jaggingSections = 100 | |
| val jaggedFactor = 2 | |
| override def start(primaryStage: Stage): Unit = { | |
| primaryStage.setTitle("Level1") | |
| val root = new BorderPane() | |
| val drawingBoard = new Group() | |
| val background = { | |
| val b = new Rectangle(0, 0, canvasWidth, canvasHeight) | |
| b.setFill(Color.BLACK) | |
| b | |
| } | |
| drawingBoard.getChildren().add(background) | |
| drawingBoard.getChildren.addAll(jaggedlines(Vec(canvasWidth / 10, canvasHeight / 2), Vec(canvasWidth * 9 / 10, canvasHeight / 2), jaggingSections, Color.WHITESMOKE)) | |
| root.setCenter(drawingBoard) | |
| primaryStage.setScene(new Scene(root, canvasWidth, canvasHeight)) | |
| primaryStage.show() | |
| } | |
| def jaggedlines(source: Vec, dest: Vec, count: Int, color: Color): List[Group] = { | |
| val totalVec = (source - dest) | |
| val maxLen = totalVec.length | |
| val onedir = totalVec.onedir | |
| val length = totalVec.length / count | |
| val normal = onedir.normal | |
| val elongation = jaggedFactor * maxLen / count | |
| val positions = List(source) ++ (for (i <- 1 to (count - 1)) yield source + onedir * length * i + normal * elongation * Random.nextDouble) ++ List(dest) | |
| (for (List(a, b) <- positions.sliding(2)) yield mkLine(a, b, color)).toList | |
| } | |
| // poor mans helper classes and functions | |
| case class Vec(x: Double, y: Double) { | |
| def -(that: Vec) = Vec(that.x - x, that.y - y) | |
| def +(that: Vec) = Vec(x + that.x, y + that.y) | |
| def *(factor: Double) = Vec(factor * x, factor * y) | |
| def /(l: Double) = if (l != 0) Vec(x / l, y / l) else sys.error("div.0") | |
| def length = scala.math.sqrt(x * x + y * y) | |
| def onedir = this / length | |
| def normal = Vec(-y, x) | |
| } | |
| def mkRandColor = { | |
| def randInt = (Random.nextFloat * 255).toInt | |
| Color.rgb(randInt, randInt, randInt) | |
| } | |
| def mkLine(source: Vec, dest: Vec, color: Color): Group = { | |
| val g = new Group() | |
| val refline = new Line(source.x, source.y, dest.x, dest.y) | |
| refline.setStroke(color) | |
| val line = new Line(source.x, source.y, dest.x, dest.y) | |
| line.setStroke(color) | |
| line.setStrokeWidth(4) | |
| val bloom = new Bloom(1.0) | |
| val blur = new GaussianBlur() | |
| blur.setInput(bloom) | |
| line.setEffect(blur) | |
| g.getChildren().addAll(refline, line) | |
| g | |
| } | |
| } |
it will output pictures like this:
This took me some time to figure out - I reinvented the 2D math for myself again, I'm sure this can be done way better. What I'm fond of is how the list of endpoints of the different line sections is traversed - have a look!
Level 1: Animation
What I would like to see is some interaction. Clicking somewhere in the canvas and then - BANG! - the lightning strikes.
What I need to do for that is just use the mouse coordinates, give the canvas a listener for it and thats all since JavaFX handles the erasing of the blurry pixels. Maybe I'll add some flickering to it, some fade outs? More glowing?
For most of my wishes there are already API's for it in the standard library, for example the very handy FadeTransition which I wanted to invent but it was already there ;-). Have a look at this code snippet:
 |
| Fade Transitions are here, for free. |
Here is the result so far:
The code for the video above is available here.
Level 2: Better layout algorithm for lightning bolts
The next step would be to improve the layout of bolts, add branches and refine the layout algorithm which is at the moment very basic to get a better visual result and to let the bolts look more "natural".
Apart from the link mentioned above, there are also other sources of information available how to generate decent looking lightning bolts. My current approach just places a list of points randomly round a normal line, but a visually more appealing result is possible for example by using the technique of "midpoint replacement". The idea is that you recursively part up a line in two halves, and move the midpoint a random amount of pixels normal to the given direction. With every nested level you may lower the amount of displacement.
So, the relevant code would look like this (inspired by Mr. KrazyDad):
With this new layoutalgorithm, the lightning bolts look much better (and also more like the ones at gamedevtut's site):
You can see the source here. Since I strive to be a well behaved functional programmer I had to swap only one function to achieve this. (My favorite joke: "Two pure functions walk in a bar. Nothing happens.")
Level 3: Branching
At the moment I support painting only one lightning, I want to have some sort of branching so that I get an even better result. This can be accomplished by randomly choosing a subelement of the main thunderbolt, then calculate a new endpoint which points at another direction, and do this again recursively (maybe at a random rate).
Branching adds much value without much pain to our lightning. I changed the datastructures a little, now I'm saving tuples of start and endpoints in the list which I'm sending to the mkLine function - this simplifies the painting loop considerably (no more sliding windows anymore :( )
Here is the lightning with branches (and different colors):
Level 4: Adding a nice headline
I have added now some text, using a custom font: |
| Lightning bolts around a headline |
Using true type fonts is no problem either when using JavaFX.
Level 5: Put it all together
We have all what we need for our final step - create lightnings to write something on the screen. In order to achieve this effect, we need to write the headline into a WriteableImage and use the rasterized information for source and endpoints of randomly generated bolts. By using a simple trick which prefers two points which are nearer to each other than two points with a longer distance, we achieve a nice looking effect you may have once or twice seen in games or other visual effects.
This whole application is by no means optimized, you will hear your fan soon when starting the program, but it is no wonder since we are calculating lots of stuff and are generating huge number of nodes.
Have a look at the final result of the 2D JavaFX Lightning blog post, and thanks for reading!
If you want to have a peek at the source code for the whole project, its on github.
![Harold Kantner Special Collection Photo [Photo]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vCbU3Q4CjlWfJ1C9c44EU-iiZ70fJ1EmB8Woiuwp_PP732I4-B8DnwE3gTDxI0RBw0WqrsT3mWTYVwCjgmHyoU-gdZ36NBpUNU48K89-IAQLbXKb3Q2MFlhzcPtYNLfQ=s0-d)