Tag Archives: Graphics

How You Can Draw Regular Polygons with the HTML5 Canvas API

polyiconSo maybe you need to draw a pentagon? or a hexagon? How about just a simple equilateral triangle? Any of those seemingly basic primitive regular polygons that you learned about back in geometry class. The Canvas API is extremely powerful and enables you to draw just about anything with Javascript. But that doesn’t mean that the Canvas provides a simple API for every shape that you might want to draw. In fact, the Canvas API provides almost no simple shape drawing outside of rectangles.  Rather the Canvas API provides a set of very powerful and flexible basic drawing functions based on the path abstraction that  can be used to draw just about anything.  But in order to wield the Canvas properly, you have to have a good understanding of the APIs and sometimes a tad bit of trigonometry.

In this article, I’m going to show you how to not only draw an arbitrary regular polygon, but we’ll also be delving deeper to understand the algorithm and the math behind the code and hopefully in the process providing a better understanding of how to use the HTML5 Canvas API.

Read more »

How You Can Build an HTML5 Photobooth App

photo-booth

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.

Read more »

Future of UI on the Web?

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?

Read more »

WebGL Sand Toy

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.

Give it a try.

sandtoy
See my Experiment on ChromeExperiments.com