Subscribe: Acko.net
http://acko.net/tag/canvas/atom.xml
Added By: Feedage Forager Feedage Grade B rated
Language:
Tags:
animate  audio  canvas  css  element  function  javascript  jquery  page  perspective  property  step function  step  time  updated  work 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Acko.net

Acko.net





Updated: 2016-05-12T20:06:53+02:00

 



JavaScript audio synthesis with HTML 5

2009-08-12T00:00:00+02:00

HTML5 gives us a couple new toys to play with, such as

Enter the JavaScript audio synth. It generates a handful of samples using very basic time-domain synthesis, wraps them up in a WAVE file header and embeds them in

My final attempt was to generate tons of periodic audio loops only a couple of ms long, and to play them back with looping turned on while altering each tag's volume in real time, hence doing a sort of additive wavetable synthesis. Unfortunately, looping is not a fully supported feature, and the only browser I found that does it (Safari) doesn't loop seamlessly at all.

All in all, my first brush with the




Projective Texturing with Canvas

2008-11-11T00:00:00+01:00

Update: People keep asking me to use this code, apparently unaware this has been made obsolete by CSS 3D. So it's gone now.

The Canvas tag's popularity is slowly increasing around the web. I've seen big sites use it for image rotation, graph plotting, reflection effects and much more.

However, Canvas is still limited to 2D: its drawing operations can only do typical vector graphics with so-called affine transformations, i.e. scaling, rotating, skewing and translation. Though there have been some efforts to try and add a 3D context to Canvas, these efforts are still experimental and only available for a minority of browsers through plug-ins.

So when my colleague Ross asked me if we could build a Cover Flow-like widget with JavaScript, my initial reaction was no... but really, that's just a cop out. All you need are textured rectangles drawn in a convincing perspective: a much simpler scenario than full blown 3D.

(image)

Perspective views are described by so-called projective transforms, which Canvas2D does not support. However, it does support arbitrary clipping masks as well as affine transforms of both entire and partial images. These can be used to do a fake projective transform: you cut up your textured surface into a bunch of smaller patches (which are almost-affine) and render each with a normal affine transform. Of course you need to place the patches just right, so as to cover any possible gaps. As long as the divisions are small enough, this looks convincingly 3D.

So some hacking later, I have a working projective transform renderer in JavaScript. The algorithm uses adaptive subdivision to maintain quality and can be tuned for detail or performance. At its core it's really just a lot of linear algebra, though I did have to add a bunch of tweaks to make it look seamless due to annoying aliasing effects.

Unfortunately Safari seems to be the only browser that can render it at an acceptable speed, so this technique is just a curiosity for now. The current code was mostly written for readability rather than performance though, so it's possible it could be optimized to a more useful state. Feel free to browse the code.

A real 3D Canvas in the browser would obviously rock, but you can still do some nifty things if you know the right tricks...




Noir meets web

2008-10-23T00:00:00+02:00

After 4 years of LeuvenSpeelt.be aka the Interfacultair Theaterfestival at my old university, the organisers are calling it quits. I was their resident web monkey, and designed a new site and poster every year. I always saw these designs as an opportunity to explore unconventional web design, as the sites were low on content and high on marketing — essentially being fancy brochures with a news feed.

With a track record of originality, I figured we should end it in style, so I whipped up a new page which explains the reasons for quitting (i.e. the politics) and highlights the work done with a timeline and some photos.

(image)

I wanted the reader to get a sense of ambiguity and dread that comes with ending big projects, so for inspiration I looked to Film Noir, known for its mystery and shady morals. The scene is meant to look like the desk of the typical private detective, who is trying to make sense of a case.

The end result was pretty close to how I imagined it, though the limitations of the web as a medium required me to tone down the contrast quite a bit for readability. This makes it lose some of the noir-ness, but overall the cohesion of the piece is still right. Because it's just a good-bye page, it probably won't get as much exposure as the previous editions, but it's the thought that counts.

I think it's a fitting end to a project that, more than anything else, has taught me about graphical design and style.

Tools used: 3D Studio Max (with Mental Ray), Photoshop, TextMate




Abusing jQuery.animate for fun and profit (and bacon)

2008-09-22T00:00:00+02:00

The days of static UIs that only have jarring transitions between pages are pretty much over. With frameworks like CoreAnimation or jQuery, it's easy to add useful animations to applications and webpages. In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles. But what if you want to go beyond mere CSS? You might have a custom widget that is drawn using , whose contents are controlled by internal variables; maybe you're using 3D transformations to scale and position images on a page, and simple 2D tweening just doesn't cut it. In that case, it would seem you are out of luck: jQuery's .animate() method can only be applied to a collection of DOM elements, and relies heavily on the browser's own semantics for processing CSS values and their units. However thanks to JavaScript's flexibility and jQuery's architecture, we can work around this, and re-use jQuery's excellent animation core for our own nefarious purposes. Hackity hack hack First, we need an object to store all the variables we wish to animate. We use an anonymous
outside of the main document, so that jQuery's DOM calls still work on it. We simply add our own properties to it: var vars = $.extend($('
')[0], {   foo: 1,   bar: 2,   customAnimate: true,   updated: true }); In this case, our properties are foo and bar. We also set customAnimate and updated to identify this object (see below). Next we need to override jQuery's default step function, which gets called for every step of an animation, and applies new values to an element's CSS properties.    // jQuery.fx.step._default     _default: function(fx) {       fx.elem.style[fx.prop] = fx.now + fx.unit;     } We can replace it using the following snippet: var $_fx_step_default = $.fx.step._default; $.fx.step._default = function (fx) {   if (!fx.elem.customAnimate) return $_fx_step_default(fx);   fx.elem[fx.prop] = fx.now;   fx.elem.updated = true; }; With the new step function, jQuery will check for the presence of a customAnimate property on any element it is animating. If present, it will assign the (unit-less) value to element.property rather than element.style.property and mark the element by setting element.updated to true. Now we're ready to animate, using the normal $.animate syntax: $(vars).animate({ foo: 5, bar: 10 }, { duration: 1000 }); The values vars.foo and vars.bar will now smoothly change over time. You can use any of jQuery's animation abilities as usual. Now what about that updated variable? Well to actually use these animated values, you will need some kind of timer or step callback to read them back and draw them on the page. If you're using , you need to redraw your entire widget for every change, but you don't want to be wasting CPU time by constantly refreshing it. Furthermore, if you're running multiple animations at the same time, you'll want to aggregate all your property changes into a single redraw per frame. This is easy with the updated property and a simple timer: setInterval(function () {   if (!vars.updated) return;   vars.updated = false;      drawWidget(); }, 30); Now your widget will only refresh itself when its values are changed by the animation step function we defined earlier, and very few CPU cycles are wasted. As a plus, you can render updates as fast [...]



Welcome to the World of Tomorrow!

2008-07-20T00:00:00+02:00

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

(image)

(image)

The header image is a regular illustration file (which is 100% manual vector work) and the content is typical HTML/CSS. However there is a twist: the perspective from the header is continued into the content with some simple 3D decorations, created on-demand with Canvas tags and JavaScript (highlight canvases, check out the footer).

While this perspective works perfectly near the top, the further down you go, the more vertically stretched the shapes get and it ends up looking weird. To compromise, the projection actually gets more and more isometric the further down you go. This creates an interesting effect when scrolling down.

The design also uses various CSS3 methods (@font-face, text-shadow, box-shadow) throughout, and uses sIFR 3 as a fallback for the headline font. Unfortunately CSS3 is still mostly unsupported in the browserscape, so only Safari 3.1 users get the luxury combo of pretty, fast and no Flash. Everyone else will have to suffer through hacks.

As a total surprise, the canvas-rocket-science trickery even works in IE6 thanks to Google's ExplorerCanvas library.

I'll probably be tweaking it a bit more in the days to come, but feedback is appreciated.




ComicJuice gets even better

2007-03-09T00:00:00+01:00

I finished some more tweaks to ComicJuice:

  • IE6 and 7 are now supported, thanks to the amazing ExplorerCanvas by Google. It emulates the tag in IE, meaning that client-side scriptable vector graphics are now available on all the major browsers (IE, Firefox, Safari, Opera). I doubt Konqueror will be far behind.

    This opens up some cool abilities, like dynamic in-page graphs, mini-widgets (sliders, dials, maps, ...) and even pure JS games. There's a bunch of examples linked on Wikipedia (though most don't use ExplorerCanvas yet).

  • I added support for uploading your own images rather than using pictures on the web. It uses a customized and themed version of core's JS uploader.

    (image)

  • I improved the clipping of speech bubbles so there should be less useless whitespace around comics, especially when embedding them.