Category Archives: Useful

Los Angeles WebGL Meetup Recap

  • Posted On: December 12th, 2011
  • Posted In: 3D, Useful

The first Los Angeles WebGL Meetup was a big success! Thanks to everyone who showed up.

The purpose of this meetup is to discuss interactive 3D graphics in the browser, using WebGL, Stage3D and even Unity3D. Bartek Drozdz and I put the meetup together so that we can all learn from each other and make some good connections. These technologies came out very recently and there is a lot of potential to make some very cool stuff.

For the first meetup, I gave a presentation on the current state of interactive web 3D. View the demos here. View the slides from the talk here (PDF).

Bartek gave a presentation on his J3D WebGL 3D engine. View the slides from the talk here (PDF).

We plan on doing the next meetup sometime in January. If you are in the area and want to learn about next-generation 3D in the browser, or give a presentation – please join us.

View All Your Tweets On One Page with AllMyTweets

Trying to find that cool URL that you posted to Twitter a few months ago? Want to easily archive all your tweets? Now you can with AllMyTweets. AllMyTweets displays all your tweets on one page. Just enter your Twitter user name. All of the data is pulled from Twitter’s public API, so no authentication is required. To archive your tweets, select all the text on the page, copy it and paste to a text document – old school style :)

Note that Twitter limits the maximum number of tweets returned to 3,200, so if you have more tweets than that you are out of luck. Also the Twitter API is not always completely reliable so you may find the loading hangs sometimes. If this happens, please try again later.

I built this because there I couldn’t find anything similar on the web, and I figured other people must want to be able to do the same thing. Please put any feedback in the comments. Thanks!

Glitch Your Images with ImageGlitcher

ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here.

This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. The glitch effect is achieved by:

  • Slicing the image horizontally and randomly offsetting the slices
  • Randomly selecting a color channel and offsetting again
  • Brightening the image
  • Adding a ‘scan lines’ overlay.

All the source code is viewable via ‘View Source’. Surprisingly, cross browser development wasn’t too much of a pain once I ignored IE. One of the cool features of HTML5 is native drag and drop support. On Chrome and Firefox you can drag in an image from the desktop.

One issue that came up was that the canvas tag does not allow you to getImageData() on images that are from a different web domain. This is supposedly a security feature to prevent hackers copying images, although I fail to understand why. If a hacker has the URL of an image on your website he already has a local copy of the image – right? Anyway $.getImageData gets around this feature by routing image data through Google App Engine using JSONP.

If I get time there are a few features I want to add in the next version:

  • Add ‘Instagram’ style filters
  • Add more granular filter options
  • Use web workers to avoid hang time

Let me know if you find any issues or if you create any nice images, post a link in the comments.

It’s a Good Time to be a Web Developer.

I think this graph from Google I/O says it all:

Webs Up!

With all the FUD around Flash and the iPad its easy to forget that we are living in a golden age of web development. The web is fulfilling all but the most outlandish predictions of its success from back in the 90s. Things are just starting to get interesting.

The other take-away I got from the I/O keynote is how a lot of HTML5 is basically HTML playing catchup with Flash. Many of the coolest new features have been available in Flash for years. This means all the skills you honed as a Flash developer are directly applicable to the newly emerging platforms of HTML5, Unity, Android and even iApps:

  • Creating animations and transitions that enhance static content.
  • Optimizing for performance and fast page loads (including preloading).
  • Handling rich media: video, audio and images.
  • Custom text layouts and font handling.
  • Asynchronously querying the backend.

Only the syntax has changed – the end result remains the same.

Fix for Flash Builder Content Assist 'did not complete normally'

  • Posted On: January 12th, 2010
  • Posted In: Flash, Useful

One of the best features in Flash Builder is the content assist. Start typing a class name and hit Control+Space for the IDE to suggest a list of valid class names. As a bonus it will automatically import the specified class into your file. Unfortunately in Flash Builder Beta 2 this functionality is broken in some cases. Often you will get an error like this:

“Content Assist” did not complete normally. Please see the log for more information. java.lang.NullPointerException

I found a solution that worked for me here:

1) Quit FB
2) Delete this folder: .metadata\.plugins\com.adobe.flexbuilder.codemodel [in the top level of your workspace folder]
3) Restart FB

[UPDATE - this fix seems to be only temporary. Once I imported some new assets from an assets SWC into my project, the error re-appeared. Anyone got a long term fix?]

[UPDATE 2 - The quickest fix is to close and re-open the FB Project.]

SimpleViewer 2.0 Released!

Big news over at SimpleViewer.net – SimpleViewer, the free customizable Flash image gallery has been upgraded to version 2.0. Check out a run-down of the new features here and grab yourself a copy here.