Check out my
new book!
Pocket Full of Canvas One thing I found interesting when I did the JuicyDrop music visualization was MilkDrop's deformation effects. Rather than processing deformations for each and every pixel it works on a grid of points and then just interpolates the results for the actual pixels. I sort of mimicked that in JuicyDrop but in a simpler way. The grids used in JuicyDrop are something like 5x5 to 9x9 where MilkDrop uses much higher resolution grids and instead of doing per-pixel interpolation, the grid points are used to cut out triangles from the previous frame and paint them on the new frame, slightly transformed.


Since the deformations are usually very small when seen on a frame-by-frame basis, you can get some pretty good results even with fairly low resolution grids, and most recent browsers are more than capable of rendering 100 or even more triangles on a canvas. In the end, I was pleasantly surprised at how well everything turned out since I wasn't even sure I was going to get anything remotely close to what the original MilkDrop plugin produced.

While I still plan on doing some more work on JuicydDrop eventually, I decided to rip out just the grid deformation part and built something new around it. You see, every now and then I get the urge to just throw something quick together and make some flashing light or dancing balls or whatever but usually that urge comes when I only have 30 minutes to spare. So I figured I'd try to build a mini framework for making stupid demo effects and stuff like that.

I've ended up with a small application that loads simple scripts, exposes a bunch of functions to these scripts and then takes care of rendering and processing whatever the script tells it to. It's probably best explained by just taking a look at it. The whole idea was to make it as easy as possible for me to just throw some silly effect together real quick and hopefully not write too much code in the process, so it might not be the most thought through design but it gets the job done. The functions available range from basic drawing and image processing (via Pixastic) to audio data and 3D (via Pre3D).

There's no larger goal with this and there are already more robust and more elaborate frameworks out there for programming and animating graphics with JavaScript/Canvas(Processing.js for instance) so this is just my own little time-sink. You're of course welcome to play around with it, modify the existing scripts or even make your own.

To wrap things up, I made a little a demo comprised of scripts I cooked up while testing and developing this thing (as well as a few adaptations of other people's work). I totally recommend using Chrome and if possible, the dev channel as it's given me by far the best performance and visual appearance.

Watch the demo here

Play around with the application here
Read more...
Book review: Object-Oriented JavaScript
The good people at Packt Publishing were kind enough to provide me with a copy of the book Object-Oriented JavaScript by Stoyan Stefanov and it's just been sitting on my desk for far too long before I finally got around to reading it. But I did and so here are my thoughts on this book.

What's inside

Weighing in at just under 300 pages (excluding appendices) in 8 chapters, the book promises to teach you everything from the very basics of JavaScript programming to more advanced object-oriented patterns, regardless of your previous experience with programming and JavaScript.

When it comes to layout and ease of reading, I can't really put a finger on anything. In the very beginning of the book, various typographic conventions and such used throughout the book are explained but there shouldn't be room for much misunderstanding even if you skip that part. The pages read easily and have a nice balance of text and whitespace. Code examples, of which there are plenty although usually very short, are all clear, concise and easily identified.

The book takes a rather hands-on approach to learning and you're encouraged to try out short code examples as you read them. It works nicely, I think, at least if you're using Firebug (which the author suggests you do and also instructs you how to set up) since the book shows you both what you should type as well as the expected response from the Firebug console.

JavaScript basics

The book is more or less divided in two parts, with the first part (consisting of the first 4 chapters) dealing with general, basic JavaScript programming and the second part taking on the object-oriented aspects as well as dealing with the browser environment and discussing some design patterns.

And the first chapters do really start with the very basics. After a short introduction to the language in chapter 1, including its history as well as how it fits in among other languages, you're taken through the basic syntax of the language, the available operators and the primitive data types. It then naturally progresses to discuss functions and objects, including scope, the important topic of closures and how everything in JavaScript is an object.

Prototypes, the browser and patterns

Now, part 2 is where it gets more interesting. Chapters 5 and 6 explain in great detail how JavaScript is a prototypical language and shows with many examples how to write object-oriented JavaScript using constructor functions and prototype chaining. It's my understanding that many people new to JavaScript have problems grasping this part and the two chapters seem appropriately thorough with many examples and even a few diagrams when necessary.

I won't say much about chapter 7. It simply walks you through the objects and functions available when running JavaScript in the browser, ie. the document and browser object models (DOM and BOM). It's not the most interesting chapter seen in the context of learning the language but for those wanting to use it for developing web sites/apps, it's a nice and quick introduction if you don't have a book dedicated to that.

Chapter 8 finishes the "meat" of the book with a discussion of various common coding and design patterns, ranging from namespacing to JSON and singletons. They are all good topics but some of them get so little space that they seem more like appetizers for further study than anything else. That said, it's a good chapter and highlights how the language features you've just learned can and are being used to build real applications.

Near the end you'll find a few obligatory appendices listing things like reserved words, built-in objects and regular expressions. They are nice and detailed and about what you'd expect from a book like this, nothing more, nothing less.

A few comments

As mentioned earlier, it's suggested that you use Firebug while reading the book, but I suppose any JavaScript console could work and it's only meant as a tool to give you instant feedback. For the most part, the book deals with JavaScript in a strict language-only way, ie. it doesn't care if you're using JavaScript in the browser, on the server or in more exotic places. In fact, I was a bit surprised to see that, given this environment-agnostic approach, the author still chose to devote all of chapter 7 to the browser environment (DOM, BOM, etc). Not that it's bad or useless information (and it's certainly a good start), but you might want to look at other books for a more thorough introduction to client-side web development.

On the other hand, there are some areas that perhaps could've used some more space. Eg. things like public/privileged/private methods and properties in the context of JavaScript objects are only mentioned briefly in chapter 8 and a few of the other patterns discussed there could easily be "upgraded" and given a few more paragraphs.

You also won't find much about the newest editions of JavaScript, perhaps due to the book being, after all, somewhat tied to the browser environment where the newest versions are far from ubiquitous. As such, the book doesn't deal with the features introduced in JavaScript 1.6 and newer.

I'd say the ideal reader for this book is one with at least a bit of programming experience. While the first chapters are very basic (more experienced programmers might want to just skim these) the later topics do get more advanced and if this is your very first experience with programming, some of it could provide a challenge.

Conclusion

To summarize, I think this is a great book for learning the JavaScript language. It could perhaps have been a bit heavier on the OO side of things and maybe let some of the browser stuff go, but for a good all-round book on modern JavaScript this is a good bet, whether you're looking to taking your JavaScript skills to the next level or adding another language to your resumé. Depending on what you'll be using JavaScript for, you might also want to supplement with some material about all the good stuff in version 1.7 and/or DOM scripting.

If you want to get a taste of the book, there's a sample chapter available here in PDF format. It's chapter 2 which mostly talks about basic stuff like primitive data types, arrays and loops.

Finally, you can get the book here: Amazon.com (or Amazon.co.uk)
- or directly from Packt Publishing.
Read more...