Nebula

An HTML5+JavaScript Nebula text effect, it displays text by making rectangles/circles float inside it.

Installation

Download the source code and include the files in the src folder (css and js). You can obviously customize the css to your needs.

Read more about it here: https://aurbano.eu/note/2014-10-21-making-of-nebula-text/

It requires jQuery to work, so make sure it's included before the nebula.js script.

Demo

I've built some visualizations using Nebula, if you have created something cool let me know via an issue and I'll add it here

• Main demo: Sample demo with dat.gui controls to play with the settings.
• Music Nebula: Nebula instance synced (automatically) with an audio track for explosions.
• Embedded: Example where I have embedded Nebula inside a div on a page.

Usage

Add an HTML container where you would like the text to appear:

<div id="bg" style="height:100%; width:100%;"></div>

Nebula will resize the experiment to fit this container, so remember to set the size via CSS.

Now add the following script:

$(document).ready(function(){
      var text = new Nebula({
            container: $('#bg')
      });
      
      var name = prompt("What's your name?");
      
      // Write the name using rectangles of the specified colors
      text.write(name, [0xff00ff, 0x63DBFF]);
      
      // Automatic resizing
      $('#bg').resize(function(e){text.resizeCanvas(); });

      // Explosions on click
      $('#bg').click(function(e){
            text.explosion(
                  e.pageX - $(this).offset().left,
                  e.pageY - $(this).offset().top
            );
      });
});

The function that starts the drawing is write(text, colors). It accepts 2 parameters as you can see in the example:

• text: Determines the text to be drawn
• colors: This must be an array of colors in decimal format. For each color a set of particles will appear.

Nebula uses Pixi.js as the rendering engine, it will default to WebGL if possible and fallback to HTML5 canvas.

Options

The following options can be passed to the constructor for configuration, use the dat.gui controls on the demo to experiment with them.

Some parameters are only used when setting a new text (resolution, tolerance... ) so you might have to write a new text and hit Enter on the demo.

Parameter	Values	Default	Description
container	DOM Element	$('#nebula')	jQuery element where the Nebula should appear
resolution	int	20	Resolution used to determine the amount of nodes
tolerance	float	0	Tolerance when determining where to place the edges, it shouldn't matter unless at high resolutions
minRad	int	0	Minimum radius that a node can have
maxRad	int	40	Maximum radius that a node can have
maxInitRad	float	0.001	Maximum starting radius, lower looks better because they start growing
maxSpeed	float	2	Maximum speed that a node can have
speedReduction	float	0.8	This multiplies the speed after it passes the maxSpeed parameter to slow it down.
variation	float	0.2	Amount of variation in the radius from one cycle to the next
explosionRadius	int	100	Nodes affected by explosions, higher is more expensive
explosionForce	float	0.01	Force generated in an explosion
explosionBlur	float	1	Blur Radius increment that each explosion produces
maxExplosionBlur	float	20	Maximum explosion blur
attraction	float	0.08	Attraction that the nodes have toward their true center
debug	boolean	true	Log messages to the console
drawFn	String	'rectangle'	Drawing function used, built in functions are 'circle' and 'rectangle'.
showForce	boolean	false	Draw force lines, very expensive
showDistance	boolean	false	Draw lines joining each node with its real center, very expensive.
showEdges	boolean	false	Draw circles indicating each real node center.
showNodes	boolean	true	Draw the particles
resolutionScale	int	35	Scale the edge resolution, it modifies the number of nodes created
radLimitScale	int	10600	Limit the maximum radius, play with this number to see what it actually does.
bgColor	int	0x000000	Decimal background color, you can use 0xHEX notation, see default value
blendMode	String	ADD	Blend mode used, options are: NORMAL, ADD, MULTIPLY, SCREEN, OVERLAY, DARKEN, LIGHTEN, COLOR_DODGE, COLOR_BURN, HARD_LIGHT, SOFT_LIGHT, DIFFERENCE, EXCLUSION, HUE, SATURATION, COLOR, LUMINOSITY

To understand what each parameter does open the index.html file and play with the dat.gui controls.

Explosions

Nebula includes an explosion system that you can call using text.explosion(x, y);.

Example

var text = new Nebula({
      container: $('#bg')
});

$('#bg').click(function(e){
      text.explosion(
            e.pageX - $(this).offset().left,
            e.pageY - $(this).offset().top
      );
});

Resizing

If you want the Nebula element to fit the container after resizing, call text.resizeCanvas();

Contributing

Feel free to add any issues or send pull requests for bug fixes or new features, they are always welcome!

License

Nebula is released under the GNU GPLv2 License.

---

Developed by Alejandro U. Alvarez