In my upcoming ebook, “Essential Canvas for HTML5“, you’ll not only learn the basics of animation but you’ll also learn how to do complex Flash-like animations using HTML5 and Javascript that impart dynamics through tweening and other advanced techniques. I’ll break it all down for you and walk you through the source code. Here is just one of the samples that come with the book.
How You Can Build an HTML5 Photobooth App
Posted by John Robinson on May 7, 2013 No comments
You want the users of your web app to be able to use their webcam to take their own profile shots and you’d like them to be able to personalize or stylize the picture before uploading it your weberver. Or maybe you’ve seen one of those fun photobooth-type apps that takes photos, applies cool image effects to them and lets you share them… wondering how they worked.
Imagine if your HTML5 app could programmatically access your webcam, take snapshots and modify the image data procedurally. You could then let your user’s upload or share their self portraits.
In this article, I’m going to teach you how to do that and more. Building on some articles that I’ve shared in the past, I’ll walk you through a sample application that displays the video from your webcam, applies image processing effects to that video, lets you take still snapshots of the filtered video and lets you serialize the snapshots so that they can be uploaded to a web server.
Make Your UI More Responsive with HTML5 Web Workers
Posted by John Robinson on April 19, 2013 8 comments
Argh!!… Your web application has to sort a lot of data and you get the dreaded error message… “A script on this page may be busy, or it may have stopped responding…” Or maybe you’re writing some image processing code that takes forever on large images… Your UI is non-responsive. What are you going to do!!?… You could try to break up the work into small pieces and use timers to spread out the work. But what a PITA!
What if JavaScript had the ability to run your code in the background and not interfere with the responsiveness of your UI. What if you could spawn a thread to do long running computations such as image filtering and sorting. Well with HTML5 Web Workers you can do just that! In the rest of this article, I’m going to teach you how to use Web Workers within your own applications. Click here to try the sample app.
How You Can Do Cool Image Effects Using HTML5 Canvas
Posted by John Robinson on April 6, 2013 11 comments
You need to know how image filters work! You’re writing an HTML5 application that works with images and you’d like to let your users dynamically alter the brightness of their images. Or maybe you’d like them to be able to give their image a vintage look…. or convert it to black and white to give that sense of drama…
Wouldn’t it be great if you knew how to apply cool image effects such as these from JavaScript dynamically? Would you like to learn the code behind how these image filters work? You totally can… This article will give you the fundamentals for basic image processing using the HTML5 Canvas API. You’ll learn how to write code that accesses an image’s pixel data and transforms this pixel data programmatically to perform cool image effects. Click here to try the sample app.
Lights, Camera, Action!
Posted by John Robinson on March 23, 2013 No comments
So You Want to Access Your Webcam from Javascript?
Web Real-Time Communications or WebRTC is an exciting new HTML5 technology that not only gives JavaScript the ability to do peer-to-peer (P2P) audio/video conferencing and P2P data communications between browsers, it also lets you have programmatic access to attached cameras and microphones. Prior to WebRTC you had to rely on a browser plugin such as Adobe Flash to be able to do similar things. But recently there has been a big push to add these capabilites as intrinsic features to web browsers with Google really leading the charge and through standardization efforts by the W3C WebRTC working group. It is a brave new world in that only some browsers have added WebRTC support and even those that do can have subtle (and some not so subtle) differences in both interface and implementation. But more and more you’re seeing real applications appearing that are using WebRTC in very cool and interesting ways. One great example of WebRTC in action is a PhotoBooth-like app called WebCam Toy. This application should give you a sense of the possibilites that WebRTC is opening up.
In the rest of this article, I’m going to walk you through the minimum code needed to get your webcam to display video in your browser. The latest versions of Chrome or Firefox are recommended for running the code included in this article and for experimenting with WebRTC. If you already have one of these browsers you can try out my example.
So lets get started…
Future of UI on the Web?
Posted by John Robinson on November 13, 2011 No comments
HTML+CSS suck for building apps.
There I said it… I mean lets face it, building apps in HTML+CSS is pretty much like doing word processing in LaTeX. What ever happened to decent visual tools? And I’m tired of dealing with weird quirky layout issues.
Don’t get me wrong HTML for building apps is definitely (eh) OK and it’s been proven that you can create applications at scale with it. But I think you end up working around quirks in layout behavior way too much. HTML was originally designed for making non-wysiwyg “rich” text documents. The ability to build apps is bolted on and feels like it.
Also I can’t help but wonder will the pinnacle of visual application design tools be Interface Builder or Delphi. I don’t think we’ve really moved forward in terms of the visual tools used to build apps since the advent of these tools. Rich Internet Application frameworks and plugins like Flash and Silverlight (along with FlexBuilder and Blend) tried to solve this within the browser. But it’s looking more and more like these are going to fizzle out of existence.
So What to Do?
Google your evil is showing…
Posted by John Robinson on October 15, 2011 No comments
Back in the day, whenever I heard someone utter “embrace and extend” I immediately thought of the evil that WAS Microsoft. Using their once formidable position to lead everyone around by their nose. But the more I see from Google, the more they remind me of the evil empires of the past.
I mean there are SO many things to love from Google… Chrome, Picasa, Maps, Search… But the problem is that we’re again seeing fragmentation limiting what the Web could become and perhaps even threatening its long term survival.
Google seems to be shifting it’s mission away from let’s “organize the world‘s information and make it universally accessible and useful” to one of let’s make “high impact products—the ones that improve the lives of billions of people“. Maybe Larry fancies himself being the second coming of Jobs… and I’ll be the first to say…
Read more »
WebGL Sand Toy
Posted by John Robinson on October 9, 2011 5 comments
Here is a little WebGL experiment I wrote in the form of a fun particle simulation. Individual pixels from a photo are rendered as separate GL points. The particle physics are done on the GPU using a shader. Somewhat directly inspired by a little app that a friend of mine wrote years ago. But this one is done solely in Javascript/WebGL in a browser rather than in native code.
I’ll Miss Steve
Posted by John Robinson on October 6, 2011 No comments
A wave of nostalgia sweeps over me when I think about the passing of Steve Jobs (1955-2011). The phrases “insanely great” and “and one more thing…” spring to mind. The world won’t be the same without you.
