Author: underblob

Distance

Today’s light fades and counts its debts away.
The cars and shadows between our velocities.
Mine blurs in tunnel, yours blurs in overpass.
Stop this time to listen.
To the friction in our momentum.
To the spaces between our places.
You hear it’s here.
Where it never ended.

Say The Word

If all the world were innocent and true.
One flag unfurled, a belief in all we do.
Wrong your rights, a change from what you are.
Refracting light, a billion tiny scars.

Fall apart, it comes as no surprise.
Fail to chart, a gauntlet of goodbyes.
Hold the line. But if you feel the need
Just say the word.

 

Bleed your life, your innocence will do.
Read your rights, believe in something true.
There’ve been times when you don’t even know.
Ignore the signs pointing where you’ll go.
Why you came doesn’t matter anymore.
Just say the word.

 

Breathe — defecting from the ranks.
Free — elude the armored tanks and break away.

On your mark with reasons not to start.
On your guard with terror in your heart.

 

— Local H

Listen on Grooveshark

Pixelation on Canvas

I’ve been working on an animation for OUBEY.com homepage. The main image on the homepage is OUBEY’s face pixelated in grayscale. I wanted to try to isolate the position and size of random pixels and create an object to match the image. This rendered object would lie exactly on top of the pixel contained in the image and animate on screen. This was accomplished by creating a canvas element of the image and using the canvasContext.getImageData method available in HTML5. Calling this method returns an array with RGBA pixel information:

  • px.data[ 0 ] is Red.
  • px.data[ 1 ] is Green.
  • px.data[ 2 ] is Blue.
  • px.data[ 3 ] is Alpha.

By traversing this array in steps of 4, I was able to choose random pixels from the image and extrapolate x, y, width, height:

  • By moving left one pixel until the RGB value changed, I found the left edge.
  • By moving to the right one pixel at a time until the RGB value changed, right edge.
  • Move up to find top edge.
  • Move down to find bottom edge.

Here’s a screenshot of the result, running 10,000 iterations. The objects created are red for visual contrast:

OUBEY.com
HTML5 Rocks: Integrating Canvas into your Web App
HTML5 Rocks: Image Filters with Canvas

Keyboard Tabbing to Anchors with jQuery

Working on keyboard accessibility the other day, I found out that an anchor will receive focus if you tab to it but will only trigger a jQuery click event if the anchor has an href attribute. 

<a>
	Doesn't work with return/enter key
</a><br />

<a href="#keyboard-click-event">
	It works!
</a><br />

To trigger a click event using keyboard, tab to the element and press return/enter key.

Text to Links

Replace any ‘http://’ text URLs with clickable hyperlink that open in a new window:

<?php
function textToHyperlinks( $string ) {
	return preg_replace(
		'@(https?://([-\w\.]+[-\w])+(:\d+)?(/([\w/_\.#-]*(\?\S+)?[^\.\s])?)?)@',
		'<a href="$1" target="_blank">$1</a>',
		$string
	);
}

Stack Overflow