simon hewitt

JavaScript Glitch Effect – glitch.js

Simon — Sun, 15 Jul 2012 18:20:57 +0000

At the moment I’m working on a small project that has a futuristic computer theme. To make it a bit more visually exciting for the users, I wanted to have a transition between the steps of the application, so I thought it would be cool to have some kind of computer glitch effect followed by a scan line that comes down the screen to reveal the next page.

tldr: I’ve created a bit of JavaScript that applies a glitch effect transition to elements within a web page. Check out the source code on GitHub, go to the examples to see it in action, or skip to the downloads and usage

ImageGlitcher

With a bit of googling, I found ImageGlitcher by Felix Turner. This takes an image, puts it into an HTML5 canvas, and applies some filters to create the glitched effect. Looking at the source code, you can see that it achieves the effect via the following steps:

Offset random slices of the image
Offset one of the color channels
Apply a matrix filter to lighten the image
Overlay black ‘scan lines’ to give that crt monitor effect

This creates exactly the effect I’m looking for, but it has 2 problems:

Only Images are Supported

In my application, I want to be able to apply the glitch to the actual web page, not just an image… Easy, you might think, just call canvas.drawWindow on the with the current window and you can fill the canvas up with the rendered page. Unfortunately not! It seems that there are a load of security issues with this, so it’s restricted to authorized extensions only. Imagine if a webpage could insert an iframe containing your personal details from Facebook, or your bank, screenshot it, and upload it to a server.

This is where the awesome html2canvas project comes in. It’s a JavaScript library that can render an element into a canvas by inspecting the contents of the DOM. It doesn’t support all css effects, and can’t capture the contents of any iframes on the page, but for my application it works perfectly. Plus, the limited rendering may actually add to the glitched effect I’m creating.

The API is pretty simple, just include the script on the page, and call the html2canvas function with callback (it has to load any images that are within the element so needs to be an asynchronous function.)

html2canvas($("#targetElement"), {
onrendered: function(canvas) {
// the element has been rendered into the HTMLCanvasElement
$("body").append(canvas);
}
});

Rendering is Quite Slow

The second problem I came across was that the ImageGlitcher implementation seems to be quite slow! It’s fine for just creating one off images, but I want the effect to work as a transition between pages, so every millisecond of rendering counts. When I tried the ImageGlitcher code on an 840×840 canvas element that I’m going to apply the transition to, it took about 10 seconds to create the glitched image. This is far too long, so I jumped into the Chrome Profiler tab and started looking for the cause.

It turns out that ImageGlitcher uses a library called BitmapData, a port of the Flash BitmapData class to JavaScript. While this makes applying the required effects quite simple, it does a lot of extra work that isn’t required. Take this bit of ImageGlitcher code as an example:

//Add Scan Lines
var line = new Rectangle(0, 0, iw, 1);

for (i = 0; i < ih; i++) {
if (i % 2 == 0) {
line.y = i;
outputBMD.fillRect(line, 0);
}
}

It looks fairly innocuous; just iterate over the height of the image and fill every other line with black. However BitmapData.fillRect does the following:

this.context.putImageData(this.imagedata, 0, 0);
var rgb = hexToRGB(color);

this.context.fillStyle = "rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
this.context.fillRect (rect.x, rect.y, rect.width, rect.height);
this.imagedata = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);

As you can see, it will call context.putImageData, hexToRGB and context.getImageData on each iteration of the loop. By removing the BitmapData class and working directly on the canvas context, we go from a few seconds to add the scan lines to under 10 ms!

Glitching a DOM element

So, the first step to creating a glitched version of a dom element is creating a canvas containing an image of the dom element we want to glitch using html2canvas:

// render the element onto a canvas
html2canvas(el, {
onrendered: _glitch
});

Then we can write a function to actually apply the glitch effect (the _glitch function referenced in the previous snippet.) The full source code is on GitHub, but I’ll outline the main steps here:

Offset some slices of the image:

// create a temporary canvas to hold the image we're working on
var tempCanvas = document.createElement("canvas"),
tempCtx = tempCanvas.getContext("2d"),

// randomly offset slices horizontally
for (var i = 0; i < numberOfSlices; i++) {

// pick a random y coordinate to slice at
var y = getRandInt(0, canvas.height);

// pick a random height of the slice
var chunkHeight = Math.min(getRandInt(1, canvas.h / 4), canvas.height - y);

// pick a random horizontal distance to offset the slice
var x = getRandInt(1, maxOffset);

// calculate the width of the slice given the offset
var chunkWidth = canvas.width - x;

// draw the first part of the chunk
tempCtx.drawImage(canvas,
0, y, chunkWidth, chunkHeight,
x, y, chunkWidth, chunkHeight);

// draw the rest
tempCtx.drawImage(canvas,
chunkWidth, y, x, chunkHeight,
0, y, x, chunkHeight);
}

Offset one of the color channels:

// get the ImageData from the original canvas
var srcData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;

// get hold of the ImageData for the working image
var targetImageData = tempCtx.getImageData(0, 0, canvas.width, canvas.height);

// and get a local reference to the rgba data array
var data = targetImageData.data;

// Copy a random color channel from the original image into
// the working canvas, offsetting it by a random amount
//
// ImageData arrays are a single dimension array that contains
// 4 values for each pixel (r,g,b,a).
// so, by initializing `i` to a random number between 0 and 2,
// and incrementing by 4 on each iteration, we can replace only
// a single channel in the image
for(var i = getRandInt(0, 3), _len = srcData.length; i < _len; i += 4) {
data[i+channelOffset] = srcData[i];
}

Brighten the image:

// Make the image brighter by doubling the rgb values
for(i = 0; i < _len; i++) {
data[i++] *= 2;
data[i++] *= 2;
data[i++] *= 2;
}

And, finally, create scan lines by filling alternate lines with black:

// copy the tweaked ImageData back into the context
tempCtx.putImageData(targetImageData, 0, 0);

// add scan lines
tempCtx.fillStyle = "rgb(0,0,0)";
for (i = 0; i < canvas.height; i += 2) {
tempCtx.fillRect (0, i, w, 1);
}

Now that’s done, tempCanvas contains the glitched images and it’s pretty trivial to write a transition that overlays the glitched canvas and removes it via some effect. Check out the source if you’re interested!

Usage and Examples

You can download the library from the GitHub Repo, and see some examples on GitHub Pages.

It requires the html2canvas library and, if you want to use the transition effect, a fairly recent jQuery.

To create a glitched version of an element, call the glitch function:

glitch(document.getElementById("currentContent"), {
amount: 8,
complete: function(canvas){
// do something with the glitched canvas
}
});

// jQuery plugin version
$("#currentContent").glitch({
amount: 8,
complete: function(canvas){
// do something with the glitched canvas
}
});

To replace an element with a glitched version of it, use glitch.replace or just call $.fn.glitch with no arguments:

glitch.replace(document.getElementById("currentContent"));

// jQuery version
$("#currentContent").glitch();

If you want to create a transition between two bits of content, jQuery is required to perform the animation:

$("#currentContent").glitch($("

New Content

"), {
amount: 7,
effect: "slide",
complete: function(){
// do something when the animation is complete
}
});

A few things to be aware of:

As html2canvas has to iterate over the contents of the element when rendering it to the canvas, it stands to reason that the more complex the DOM, the longer the rendering will take. This is especially true of any images that are attached (including background images,) as they have to be re-loaded asynchronously by the browser. If there are any images from another domain, then they have to be loaded via a proxy to avoid tainting the canvas. So, it’s wise to remove any unneeded elements from the dom before applying the effect.

html2canvas scrolls the window to the top when rendering the page (see Issue 57) which is fine for my usage, but may not be ideal for you. There are 2 answers for this: store the scroll position before calling glitch, and set it back in the complete handler, or contribute a fix to the html2canvas project (I’m working on a fix on my fork!)

In the project i’m using this on the effect is triggered via a delegated click event handler (attached to a Backbone.js view,) which seems to create an error in chrome to do with the event listeners that were attached. To get around this, I deferred the call to the glitch function to the next tick.

Positioning Dialogs in Facebook Canvas Applications

Simon — Mon, 30 May 2011 18:43:26 +0000

Facebook have recently (very quietly) added the FB.Canvas.getPageInfo and FB.Canvas.scrollTo methods to their JavaScript SDK. These used to exist in their old SDK, but it’s taken a year for it to appear in the new one! This is good news to me for the following reason.

If you wanted to create a message dialog popup in an application, you had no guarantee that it would be visible on the screen when it was shown as you have no idea where the user’s viewport is. Most JavaScript popup libraries try to position the dialog in the centre of the screen by looking at the window’s scroll position. Unfortunately when creating a Facebook Application you’re operating inside a cross-domain iframe so that information isn’t directly available, the best you could do is put it somewhere near where the user clicked.

With the introduction of the getPageInfo method, we can now access it and start positioning things where the user can see them. For example, to position a div at the top of the viewport using jQuery, try this:

var pageInfo = FB.Canvas.getPageInfo();
var offset = parseInt(pageInfo.scrollTop) - parseInt(pageInfo.offsetTop);
$("#element").css({
// use Math.max so that the element isn't positioned above the top of the page
top: Math.max(offset, 0)
});

You might have noticed that I’ve surrounded the page info properties with the parseInt function. This is because they are stored by the SDK as strings so must be parsed before you can use them in mathematical operations.

Bonus: canvas.pageInfoChange Event

This isn’t documented on the Facebook Developer website, so may be change without warning, however while poking around the SDK code for pageInfo, I noticed a pageInfoChange event gets dispatched after the pageInfo object is updated. This lets us listen for when the user scrolls the browser window and update the display accordingly, for example by keeping the dialog window in the center of the user’s screen.

FB.Event.subscribe("canvas.pageInfoChange", function(event){
$("#dialog").animate({
top: Math.max(parseInt(event.scrollTop) - parseInt(event.offsetTop) +
((parseInt(event.clientHeight)-$("#dialog").outerHeight())/2), 0)
}, "fast");
});

Edit: Since writing this, Facebook have now removed the pageInfoChange event. You can create your own version that polls Facebook for the latest canvas data. See this question on StackOverflow for more info.

Final Note

Because the page info object is updated via cross-domain ajax calls, it isn’t always up to date, and is only dispatched a couple of times per second, not at the same rate as the equivalent window.onscroll method would be called. Therefore, you can’t use it to lock an element to a specific position on the screen (emulating position: fixed,) that’s why I use jQuery animation to update the position of the box in the above example, as it avoids the dialog jumping around the page.

RobotLegs and as3signals: Injecting interfaces and named arguments

Simon — Sat, 20 Feb 2010 16:10:27 +0000

I found out about as3signals yesterday and thought it was such a neat way of dealing with events, I decided to spend the weekend refactoring my current project to take advantage of it.

I started by adding some signals to my view components to reduce the number of custom events that I was dispatching, and I now only use custom events to bubble events from ItemRenderers up to the main components. These events are then caught and a Signal is used to forward it to the Mediator. This was going so well that I decided to start integrating the SignalCommandMap developed by Joel Hooks to start using signals in the framework.

After a couple of minor problems upgrading to the latest trunk of RobotLegs, I replaced a few of my custom events and everything was going ok until I came across a problem when trying to use a command that has a ListCollectionView argument. It turns out that ListCollectionView will throw an error if you try to access the constructor property because the case is not handled in the proxy_object::getProperty method, and this is required by the SignalCommandMap to map injection values.

The SignalCommandMap uses the following method to map injector values and execute the Command:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

protected function routeSignalToCommand(signal:ISignal, valueObjects:Array, commandClass:Class, oneshot:Boolean):void
{
// NOTE: Assumes no duplicated classes in valueObjects,
// and none of them are previously mapped.
var value:Object;
for each( value in valueObjects )
{
injector.mapValue( value.constructor, value );
}

var command:Object = injector.instantiate( commandClass );

for each( value in valueObjects )
{
injector.unmap( value.constructor );
}

command.execute( );

if ( oneshot )
{
unmapSignal( signal, commandClass );
}
}

As you can see, value.constructor is used to get the class for the argument. This also causes a problem if you are using an interface as the target class for the injection.

There are 2 improvements that I propose to the map:

Use the Signal valueClasses property (if it has been defined on the Signal) as the source of the target classes for injection.
This means that there is no need to call the constructor method to get the class for injection, and you can use interfaces as an injection target.
Add a parameter that allows you to give names to the argument injections.
This would allow you to inject multiple objects of the same type into the Command and use named injections to route them to the right properties.

My Updated SignalCommandMap

To achieve these two improvements, the ISignalCommandMap interface is updated to include an argumentNames parameter that allows you to pass in injection names for the arguments. You can mix named and unnamed injections by using an empty string as the name for the unnamed arguments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package org.robotlegs.core
{
import org.osflash.signals.ISignal;

public interface ISignalCommandMap
{
function mapSignal(signal:ISignal, commandClass:Class, oneShot:Boolean = false, argumentNames:Array = null):void;

function mapSignalClass(signalClass:Class, commandClass:Class, oneShot:Boolean = false, argumentNames:Array = null):ISignal;

function hasSignalCommand(signal:ISignal, commandClass:Class):Boolean;

function unmapSignal(signal:ISignal, commandClass:Class):void;

function unmapSignalClass(signalClass:Class, commandClass:Class):void;
}
}

Then the routeSignalToCommand function is updated to include the argumentNames and use some helper functions to map and unmap the signal argument values

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

protected function routeSignalToCommand(signal:ISignal, valueObjects:Array, commandClass:Class, oneshot:Boolean, argumentNames:Array):void
{
mapValues( valueObjects, signal.valueClasses, argumentNames );

var command:Object = injector.instantiate( commandClass );

unmapValues( valueObjects, signal.valueClasses, argumentNames );

command.execute( );

if ( oneshot )
{
unmapSignal( signal, commandClass );
}
}

And then the helper functions that do the work of mapping the value objects to the injected properties. Errors are thrown if valueClasses is used and the correct number of arguments isn’t supplied.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

protected function mapValues(valueObjects:Array, valueClasses:Array, argumentNames:Array):void
{
var i:int;
var value:Object;
if(valueClasses && argumentNames)
{
if(valueObjects.length != valueClasses.length || valueObjects.length != argumentNames.length)
throw new Error("Unequal numbers of arguments");
for(i=0;i
{
injector.mapValue( valueClasses[i], valueObjects[i], argumentNames[i] );
}
}
else if(valueClasses)
{
if(valueObjects.length != valueClasses.length)
throw new Error("Unequal numbers of arguments");
for(i=0;i
{
injector.mapValue( valueClasses[i], valueObjects[i] );
}
}
else
{
for each( value in valueObjects )
{
injector.mapValue( value.constructor, value );
}
}
}

protected function unmapValues(valueObjects:Array, valueClasses:Array, argumentNames:Array):void
{
var i:int;
var value:Object;
if(valueClasses && argumentNames)
{
for(i=0;i
{
injector.unmap( valueClasses[i], argumentNames[i] );
}
}
else if(valueClasses)
{
for(i=0;i
{
injector.unmap( valueClasses[i] );
}
}
else
{
for each( value in valueObjects )
{
injector.unmap( value.constructor );
}
}
}

Now, for a Signal like this:

1
2
3
4
5
6
7

public class InjectionTestSignal extends Signal
{
public function InjectionTestSignal ()
{
super(String, String, IList, IList);
}
}

And this command:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

public class InjectionTestCommand extends SignalCommand
{
[Inject(name="string1")]
public var string1:String;

[Inject(name="string2")]
public var string2:String;

[Inject(name="list1")]
public var list1:IList;

[Inject(name="list2")]
public var list2:IList;

override public function execute():void
{
// Do something...
}
}

You can create the mapping as follows:

1	signalCommandMap.mapSignalClass(InjectionTestSignal, InjectionTestCommand, false, ["string1","string2","list1","list2"] );

You can download my updated SignalCommandMap here and a very very simple example here

I’ve also forked CommandSignal on github

I will try to add some tests and better examples when I have a bit more time.

Changing the Background Alpha in Spark ItemRenderers

Simon — Wed, 17 Feb 2010 10:37:14 +0000

The ItemRenderer in the Flex 4 Spark components provides the useful ability to automatically draw the backgrounds of the item renderers, however it is limited to only drawing them with an alpha of 1 or 0.

By extending the ItemRenderer class and overriding the mx_internal drawBackground() method, we are able to set the fill alpha to a value retrieved from the “backgoundAlpha” style. To do this, I have simply copied the drawBackground method from ItemRenderer and added a call to getStyle(“backgroundAlpha”) in the appropriate place.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

package uk.co.tangentlabs.hyperbola.components
{
import mx.core.mx_internal;

import spark.components.ResizeMode;
import spark.components.supportClasses.ItemRenderer;

use namespace mx_internal;

[Style(name="backgroundAlpha", type="Number")]

public class CustomItemRenderer extends ItemRenderer
{
public function CustomItemRenderer()
{
super();
}

override mx_internal function drawBackground():void
{
// if autoDrawBackground is set to true, we always
// draw a background and don't need to worry about mouseEnabledWhereTransparent.
// However, if it's false, then we should just let super.drawBackground()
// do its job.
if (!autoDrawBackground)
{
super.drawBackground();
return;
}

// TODO (rfrishbe): Would be good to remove this duplicate code with the
// super.drawBackground() version
var w:Number = (resizeMode == ResizeMode.SCALE) ? measuredWidth : unscaledWidth;
var h:Number = (resizeMode == ResizeMode.SCALE) ? measuredHeight : unscaledHeight;

if (isNaN(w) || isNaN(h))
return;

graphics.clear();

var backgroundColor:uint;
var backgroundAlpha:Number = getStyle("backgroundAlpha");

if (selected)
backgroundColor = getStyle("selectionColor");
else if (hovered)
backgroundColor = getStyle("rollOverColor");
else
{
var alternatingColors:Array = getStyle("alternatingItemColors");

if (alternatingColors && alternatingColors.length > 0)
{
// translate these colors into uints
styleManager.getColorNames(alternatingColors);

backgroundColor = alternatingColors[itemIndex % alternatingColors.length];
}
else
{
// don't draw background if it is the contentBackgroundColor. The
// list skin handles the background drawing for us.
backgroundAlpha = 0;
}
}

graphics.beginFill(backgroundColor, backgroundAlpha);

if (showsCaret)
{
graphics.lineStyle(1, getStyle("selectionColor"));
graphics.drawRect(0.5, 0.5, w-1, h-1);
}
else
{
graphics.lineStyle();
graphics.drawRect(0, 0, w, h);
}

graphics.endFill();
}
}
}

Note that this will always use the same backgroundAlpha for all states, but could be extended to add “backgoundAlphaOver” and “backgroundAlphaSelected” styles that will be used in the appropriate states.

Flex 4 Autocomplete TextInput

Simon — Mon, 08 Feb 2010 15:54:16 +0000

Ivan Tenger over at flashcommander has posted a very useful AutoComplete component using the Spark component architecture.

Click here to have a look.

Autocomplete broken in Flash Builder Beta 2 with nightly builds

Simon — Fri, 22 Jan 2010 12:33:51 +0000

I’m using a nightly build (currently 13493) of the Flex SDK to build my current due to some bug fixes that my project needed (there was a problem with the [Managed] decorator not working). However, the new builds broke the autocomplete functionality in Flash Builder.

I was able put up with it for a week. The lack of autocomplete was manageable, it was the fact that it also broke the import organisation that was infuriating. For example, I have a custom event class that extends flash.events.Event. I had to manually insert the ‘import flash.events.Event’ line into the file, but every time I used autocomplete for a valid class, Flash Builder would delete the import because it couldn’t find the Event class in any library.

I spent quite a while googling to find an answer to the problem but came up empty handed. So I started having a root around the sdk, comparing it with the build shipped with Beta 2. In new builds, the flex-config.xml file contains reference to the targetPlayerMinorVersion variable . It seems that Flash Builder is unable to handle this, so could not resolve the playerglobal.swc library containing all of the base classes.

After finding this, one quick search led me to a post on the Adobe forums that contained a description of the problem and the answer:

Rename the folder /frameworks/libs/player/10.0 to “10″
Edit the file /frameworks/flex-config.xml and remove “.{targetPlayerMinorVersion}” and save

I hope this helps anyone having the same problem!

Papervision Lines3D: addNewLine and removeAllLines

Simon — Thu, 03 Dec 2009 16:04:58 +0000

While working with the Lines3D class in Papervision, I noticed that the memory usage was growing while my application was running. After a bit of hair pulling, debugging and profiling, I found that a lot of Vertex3D objects were being created and not garbage collected.

After the initial creation of the scene, it seemed that the only place where new Vertex3Ds were being created was in these lines:

1
2
3
4

lines.removeAllLines();
lines.addNewLine(o.extra.size,
x1, y1, z1,
x2, y2, z2);

The leak was caused because the addNewLine command creates a new Line object using the material of the Lines3D object. The removeAllLines() command removes all references to Line from the array, however there are a number of current objects still referenced by the Line instances. If you wanted to make sure the line instances are garbage collected, then you would need to null the instance and material properties on each Line instance (it wouldn’t hurt to null the v0, v1 and renderCommand properties too)

I believe it is correct that removeAllLines should not clear the material attribute as it is possible that you are going to use the removed lines for something else and you don’t want to lose reference to the material. However, I do think that removeLine (which is called by removeAllLines) should clear the instance property!

As I know that each Lines3D instance in my graph has only one line, and I’m only updating the endpoints of the line, my solution was to simply update the vertex at each end of the line, as follows:

1
2
3
4
5
6
7
8

var v0:Vertex3D = o.lines[0].v0;
var v1:Vertex3D = o.lines[0].v1;
v0.x = x1;
v0.y = y1;
v0.z = z1;
v1.x = x2;
v1.y = y2;
v1.z = z2;

Welcome

Simon — Thu, 03 Dec 2009 14:05:26 +0000

Welcome to my blog, here I will be documenting the things I find out while developing various projects using Flex and a few other languages.

The main reason is that I will soon be starting a new project and will be experimenting with a great collection of APIs and Frameworks, and I need somewhere to vent when things don’t work:

Adobe Flex 4 (with the Spark components)
Adobe Catalyst (or maybe teaching the designers how to use it)
Robotlegs – this sounds like a great framework and should bring some much needed organisation to the project
ASAXB – for some unfortunately necessary XML deserialisation
Papervision3D – because it ‘looks whizzy’ according to the Project Manager. Hopefully I can come up with something that will actually add to the application and UX