10 most useful Google Chrome experiments

These JavaScript programs bring flashy graphics to your Web browser -- without Flash.

When it comes to presenting graphically oriented programs through a browser, the usual go-to development platforms have been Adobe Flash and -- to a lesser extent -- Microsoft Silverlight. But other, more open technologies are starting to show promise.

The 10 best Chrome extensions for work and play |Watch a slideshow of this review.

That's what Google aims to highlight on Chrome Experiments, a Web site that showcases JavaScript programs that deliver a rich user-graphics experience.

Of the nearly 80 projects featured on Chrome Experiments, the majority are graphic demos. As impressive as such eye candy is, they're not good examples of how capable JavaScript can be for running graphically-oriented applications that are actually useful.

But there are a few notable ones, which we present here. (Despite the site's name, these programs should run on any browser that supports JavaScript.)

1.Canvas Sketch: Fingerpainting for mobile devices

Canvas Sketch has the very basics of a paint program: freehand and line drawing, eraser, and fill tools; and tools to draw rectangular and circular shapes. Its color palette is limited to 26 colors, and no image can be larger than 501 by 334 pixels.

So why even bother using this? Canvas Sketch was designed for smartphones and mobile devices that can run JavaScript-enabled Web browsers. (There's an "iPhone mode" that resizes Canvas Sketch's default horizontal layout to a vertically-oriented one that fits within the iPhone's screen dimensions.) You can save your digital doodles in GIF, JPG or PNG format.

So long as you think of, and use, it as a mobile app for simple scribbling using your finger on the touchscreen, Canvas Sketch serves as a nifty example of the type of JavaScript apps which can be made for small-scale platforms.

2. Impressionist: Monet-ize your photos

This image-manipulation tool is designed to do only one thing: convert a photograph into what looks like a painting. You start by uploading your image file to the Impressionist server. From there, you apply the oil-paint effect in one of two ways.

The first is by a freehand drawing method. You choose your brush size and shape, and then paint over any areas of your picture where you want to apply an ersatz oil colors look.

But the second is the most fun. Upon selecting the desired brush shape, size and width, you click "start" and your picture then comes alive as if thousands of paint brushes are dabbing and swirling it with oil paints. (The colors are derived from your original image's palette.) This real-time rendering runs continuously until you stop it. Using Impressionist just to watch this effect in motion is hypnotic.

3. Sketchpad: Drawing made easy

This drawing application has gotten a lot of attention lately as an excellent example of the power of JavaScript, and it's obvious to see why. Sketchpad has the features of a typical, basic paint program, and delivers it with the sort of speedy performance you expect from a desktop counterpart.

Its tools (such as for drawing, cropping and masking) work smoothly, as do its toolbar and canvas windows when you click on and drag to reposition them in the work area. Sketchpad's other strength is its huge variety of built-in patterns and gradients you can use in your image -- there's even a "spirograph" drawing tool.

4 Twitterbrowse: Find friends and followers

Enter the username of a Twitter account into its search box, and twitterbrowse pulls up the user photos of the friends and followers for that person, laying them out into a grid. These images can be sorted alphabetically, or by friends or followers. When you re-sort, the photos neatly shuffle into the selected order.

Click on the user photo of a friend or follower, and information about the total number of friends and followers for that username will slide out from the right side of the user photo. You can then click a link to jump to a new page where you can browse through the friends and followers -- arranged into its own grid -- for that selected Twitter user.

Slick as this is, it would be cool if its developer could add reading and writing tweets to his demo. That would make twitterbrowse a great alternative user interface for using Twitter.

5. Vectomatic: Vector graphics for dummies

Although a demo, this vector graphics drawing program is almost a complete application that it would be a shame if its developer didn't finish it up. In its current version, Vectomatic still works well if you want to create simple vectorized graphics, and do so quickly. Or if you want to learn the basics of drawing vector graphics.

You can instantly draw rectangles and ellipses, and other shapes can be created using the point-by-point plotting "path" or the "poly" (for making curves) tools. The color selection system looks rudimentary and lacking, but you can adjust the range of each color. The stacking order of shape layers can be manipulated.

There's one setback: you can't save your work, nor can you export it to the SVG file format -- for now, Vectomatic can only render your art out as a finalized Web page image.

6. World of Solitaire: Full-featured card game

What would a day at the office be without a game of computer solitaire? (Answer: more productive?) Kidding aside, there are a number of games featured at Google's Chrome Experiments, but this is the one that both feels complete and is universally appealing to anyone who has needed a break during the work day by playing a few hands of the virtual card game that seems to be installed by default on virtually every PC in the world.

What's surprising about World of Solitaire is how full-featured it is for being a JavaScript game: there are several (really, there a lot -- over 50) variations of solitaire to play. You can change the graphics of the cards, choosing from nine artwork designs. And you can post your scores to a worldwide scoreboard to see how you rank with others who are also whiling away their work-day productivity.

7. Bomomo: Doodling gone wild

This app is a cross between a drawing program and game. Or, perhaps the better way to describe Bomomo is that it's an interactive graphics toy. Seven brushes trail along the path of your desktop arrow cursor. These brushes are in constant motion when you draw with them, so the result is a random doodle created with multiple points of origin. (Different colors are also randomly thrown in.) You can choose from 20 pattern sets, which determine the way these brushes move (in circular or straight-line motion) and their brush size. Images can be saved in PNG format.

8. Harmony: Brush up on your painting

This very basic drawing tool simulates a pencil-sketch effect. The standout feature is its unique selection of brushes. For example, the "web" brush generates spider-web designs; and two brushes create a furry look. The effect of these brushes is more pronounced the faster you move them across the canvas -- when you move the "squares" brush slowly, small rectangles are created. As you move this brush faster, the size of the rectangles this brush spews out grows in size. Your images can be saved as PNG files.

9. HasCanvas: Create sketches and learn code

This app is a programming tool you can use to create sketches that generate on-screen in real-time, written in processing.js code, which you can then share online with other users of HasCanvas. (Processing.js is an open programming language running on JavaScript which is used for creating images, animation and interactive graphics that appear in a Web browser supporting the HTML5 <canvas> element.) Since you can take a peek at other contributors' code, HasCanvas can serve as a means to teach yourself writing processing.js code. But even if you don't care about programming, you can check out more than 240 graphic demos submitted by HasCanvas users just for the eye-candy entertainment value.

10. Social Collider: Re-tweet tracker

This JavaScript app could be useful if you're heavily into Twittering and want to track how effectively your, or another user's, posts are received and re-tweeted among friends and followers. Enter a Twitter user ID or topic, and Social Collider generates four graphs representing whether posts were picked up by other users. If a tweet has been picked, the graph shows its line intersecting horizontally towards another line that represents another user ID (or topic). Theoretically, Social Collider could be used to track the origin of a Twitter-based meme and its growth over time.

Wen reports on technology news, trends and products. He can be reached here.

Read more about software in Network World's Software section.

This story, "10 most useful Google Chrome experiments" was originally published by Network World.

What’s wrong? The new clean desk test
Join the discussion
Be the first to comment on this article. Our Commenting Policies