jQuery Plasma Plug-in

The jQuery Plasma Plug-in creates a dynamic plasma display by applying an HSV to RGB conversion on a Sine wave transformation. It supports many option, all of which can be set before initalization or during run-time.

This project is hosted on Google Code and can also be found in the jQuery Plug-in repository. The Google Code site will always have the latest software.

Demonstration

Global Controls

Stop Start Delay Destroy

Plasma Controls

Plasma Type HSV RGB Blur
R G B H S V

Overlay Controls

Overlay Color Overlay Bias Loop
Toggle Static Overlay Toggle Animated Overlay Animation Delay
Toggle Scrolling Overlay Text Scroll Delay

Simple implementation

The plug-in can be run without specifying any parameters with the following HTML

<div id="plasma"></div>

and this JavaScript statement.

$(document).ready(function(){ $('#plasma').plasma(); });

Advanced implementation

The plug-in also supports many user-defined settings that can dramatically alter the appearance of the plasma.

var options = { // table settings, only read during initialization rows: 8, // more rows = more processing cycles cols: 8, // more cols = more processing cycles spacing: 0, // table's cellspacing attribute padding: 0, // table's cellpadding attribute border: 0, // table's border attribute height: '40px', // css height property for each cell width: '40px', // css height property for each cell html: '', // each cell can contain some html // timer settings shift: 0, // any positive integer delay: 100, // milliseconds between frame refresh overlay_delay: 1000, // overlay animation speed milliseconds scroll_delay: 100, // scroll speed milliseconds // plasma settings plasma_type: 'hsv', // so far, 'hsv' or 'rgb', more to come blur: 1, // less than 1 sharpens the plasma, greater than 1 blurs r: 1, // red intensity 0-1, applies to plasma_type 'rgb' g: 1, // green intensity 0-1, applies to plasma_type 'rgb' b: 1, // blue intensity 0-1, applies to plasma_type 'rgb' h: 255, // hue multiplier, applies to plasma_type 'hsv' s: 1, // saturation intensity 0-1, applies to plasma_type 'hsv' v: 1, // value intensity 0-1, applies to plasma_type 'hsv' // overlay settings overlay: false, // boolean, on or off overlay_anim: false, // boolean true = animated, false = static overlay_loop: true, // boolean, true = loop, false = play once overlay_color: [255, 255, 255], // array of rgb values 0-255 overlay_bias: [0,0], // x,y cells to move overlay overlay_data: [] // array for overlay pattern }; $(document).ready(function(){ $('#plasma').plasma(options); });

Run-time Manipulation

The jQuery Plasma Plug-in presents an interface for controlling some aspects of the display. All of the settings for the jQuery Plasma Plug-in can be manipulated after instantiation through jQuery's data object, allowing for on the fly changes. The methods available are start, stop, show_overlay(pattern), hide_overlay, and destroy.

<div id="plasma"></div> <button id="overlay">Overlay text</button>

The example below attaches the plug-in's show_overlay method to a button click handler.

$(document).ready(function(){ $('#plasma').plasma(); $('#overlay').click(function(){ var pattern = "This is the jQuery Plasma Plug-in"; $('#plasma').plasma('show_overlay', pattern); return false; }); });

Settings Details

Table settings

rows default value: 8

A positive integer describing the number of table rows in the plasma display. Remember, more rows means more processing cycles. A slower computer and/or browser can be brought to its knees through a combination of the rows, cols, and delay settings.

cols default value: 8

A positive integer describing the number of table columns in the plasma display. Remember, more columns means more processing cycles. A slower computer and/or browser can be brought to its knees through a combination of the rows, cols, and delay settings.

spacing default value: 0

A positive integer describing plasma display table's cellspacing attribute.

padding default value: 0

A positive integer describing plasma display table's cellpadding attribute.

border default value: 0

A positive integer describing plasma display table's border attribute.

height default value: '40px'

A CSS height value applied to each <td> element in the plasma display. Any valid CSS height property can be used here, and each table cell in the plasma display will render as <td style="height:[settings.height];">.

width default value: '40px'

A CSS width value applied to each <td> element in the plasma display. Any valid CSS width property can be used here, and each table cell in the plasma display will render as <td style="width:[settings.width];">.

html default value: ''

Each table cell in the plasma display can contain any valid html. For example, setting html to <img src="circle-white.png" /> would render each cell as <td><img src="circle-white.png" /><td>. Care should be taken to match cell contents width cell height/width.

Timer settings

shift default value: 0

The shift setting can also be thought of as a time counter, it advances by on every cell, thoughout the animation cycle. For example, on a 8x8 plasma matrix at 10 frames per second (settings.delay = 100) shift will advance approximately 640 (8x8x10). This is an experimental setting, but it seems almost any integer is possible, I have seen values as high as 126000.

delay default value: 100

The delay setting indicates the time in milliseconds between each plasma display frame update. Lower settings will speed up the disply, but can have an adverse affect on performance.

overlay_delay default value: 1000

The overlay_delay setting indicates the time in milliseconds between each frame of an animated overlay. Lower settings will speed up the disply, but can have an adverse affect on performance. Requires overlay_anim: true.

scroll_delay default value: 100

The scroll_delay setting indicates the time in milliseconds between each advance of an scrolling overlay. Lower settings will speed up the disply, but can have an adverse affect on performance. Requires overlay_data: {string}.

Plasma settings

plasma_type default value: 0

The type setting switches between different algorithms used to create the plasma. Currently only values of 'hsv' or 'rgb' are supported. The 'hsv' plasma can be manipulated with the h, s, v settings while the 'rgb' plasma can be manipulated with the r, g, b settings.

blur default value: 0

The blur setting, in conjunction with settings.type, adjusts the color separation of the plasma. A value between 0 and 1 with sharpen the display, while a value over 1 (2,4,10...) with blur the plasma.

r, g, b default value: 1

The r, g, b settings are modifiers to the final background color. The color that should be displayed is multiplied by by each modifier to reach the final display color. These settings are highly experimental, and results cannot be accurately predicted.

h, s, v default value: h:255, s:1, v:1

The h, s, v settings are modifiers to the HSV to RGB conversion. These settings are highly experimental, and results cannot be accurately predicted.

Overlay settings

overlay default value: false

A boolean value indicating whether the overlay described in settings.pattern is displayed.

overlay_color default value: [255, 255, 255] (white)

The overlay_color setting can take two forms; as an array, this setting specifies the RGB values for each cell. If a float is specified, the underlying plasma will be adjusted by this value. For example, if overcolor is set to 0.3, pattern cells witha value of 1 will be 30% of the brightness of the underlying plasma, this creates a semi-transparent effect not possible by setting the RGB values directly.

overlay_data default value: []

The pattern setting can take a number of forms. It can be a 2-dimensional array of 1's and 0's indicating which cells in the plasma display will be altered. 0 will show the underlying plasma color, 1 will show the settings.overlay_color. var options = { pattern: [ [0,0,0,0,0,0,0,0], [0,1,1,1,1,1,1,0], [0,1,0,0,0,0,1,0], [0,1,0,1,1,0,1,0], [0,1,0,1,1,0,1,0], [0,1,0,0,0,0,1,0], [0,1,1,1,1,1,1,0], [0,0,0,0,0,0,0,0] ] }; A more advanced static pattern array indicates a specific color for each cell by using an array of color value instead of a 1 integer. As before, 0 will show the underlying plasma color. var options = { pattern: [ [0, 0, 0, 0, 0, 0, 0, 0], [0, 1, 1, 1, 1, 1, 1, 0], [0, 1, [255,0,0], [255,0,0], [255,0,0], [0,255,0], 1, 0], [0, 1, [0,0,0], 0, 0, [0,255,0], 1, 0], [0, 1, [0,0,0], 0, 0, [0,255,0], 1, 0], [0, 1, [0,0,0], [0,0,255], [0,0,255], [0,0,255], 1, 0], [0, 1, 1, 1, 1, 1, 1, 0], [0, 0, 0, 0, 0, 0, 0, 0] ] }; An animated pattern would be an array of single frame patterns, and requires settings.overlay_anim = true var options = { pattern: [ [ [0,0,0,1,1,0,0,0], [0,0,1,1,1,1,0,0], [0,1,1,1,1,1,1,0], [1,1,0,1,1,0,1,1], [1,1,1,1,1,1,1,1], [0,0,1,0,0,1,0,0], [0,1,0,1,1,0,1,0], [1,0,1,0,0,1,0,1] ],[ [0,0,0,1,1,0,0,0], [0,0,1,1,1,1,0,0], [0,1,1,1,1,1,1,0], [1,1,0,1,1,0,1,1], [1,1,1,1,1,1,1,1], [0,0,1,0,0,1,0,0], [0,1,0,0,0,0,1,0], [0,0,1,0,0,1,0,0] ] ] }; A third option is to pass a string in as settings.overlay_data. This option requires plasma.chars.js (included with distribution) and will scroll the text from right to left across the plasma display.

Changelog

jQuery Plasma 0.5 (beta 3)

re-engineered delay counters
added overlay bias (position adjust)
added support for animated overlays

jQuery Plasma 0.4 (beta 2)

added overlay for image or scrolling text
removed limit to time shift (found to be ineffective)

jQuery Plasma 0.3 (beta 1)

submitted to jQuery plug-in repository
added different plasma algorithms settings.type
added a limit to the time shift parameter

jQuery Plasma 0.2

optimized the delay timer
added start, stop, destroy methods
added data support for settings to allow on the fly changes

jQuery Plasma 0.1

Initial release, not really ready for prime time