Simon Willison’s Weblog

Animating Rick and Morty One Pixel at a Time (via) Daniel Hooper says he spent 8 months working on the post, the culmination of which is an animation of Rick from Rick and Morty, implemented in 240 lines of GLSL - the OpenGL Shading Language which apparently has been directly supported by browsers for many years.

The result is a comprehensive GLSL tutorial, complete with interactive examples of each of the steps used to generate the final animation which you can tinker with directly on the page. It feels a bit like Logo!

Shaders work by running code for each pixel to return that pixel's color - in this case the color_for_pixel() function is wired up as the core logic of the shader.

Here's Daniel's code for the live shader editor he built for this post. It looks like this is the function that does the most important work:

function loadShader(shaderSource, shaderType) {
    const shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (!compiled) {
        const lastError = gl.getShaderInfoLog(shader);
        gl.deleteShader(shader);
        return lastError;
    }
    return shader;
}

Where gl is a canvas.getContext("webgl2") WebGL2RenderingContext object, described by MDN here.

# 4th February 2025, 8:53 pm / webgl, animation, canvas, javascript

Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5. Great demo, though calling -webkit-animation HTML5 (or even CSS3) is a bit of a stretch...

# 4th May 2010, 7:27 pm / animation, css, css3, html5, javascript, jquery, webkitanimation, recovered

Going Nuts with CSS Transitions. Nat’s article for this year’s 24ways—adding special effects to images using CSS rotation, box shadows and the magical -webkit-transition property.

# 14th December 2009, 1:16 pm / webkit, transitions, css, animation, natalie-downe, 24-ways, rotation

“I made the first animated under construction icon”. twoleftfeet on MetaFilter describes how he created the first ever Under Construction animation in 1995, after discovering his server-push animations could be replaced by the exciting new animated GIF.

# 15th October 2009, 2:11 pm / metafilter, underconstruction, animation, gifs, internet-history, history

jQuery queue method. New in jQuery 1.3, but quite far down the release notes. This finally allows low-level control over the jQuery animation queue without needing an extra plugin.

# 14th January 2009, 6:09 pm / jquery, animation

Animated Sorting Algorithms (via) JavaScript animations of various sorting algorithms, running against four different initial conditions (random, nearly ordered, reversed and few unique). I wish I’d had this during my computer science degree.

# 21st October 2008, 12:17 am / sorting, algorithms, computer-science, animation

jQuery.ScrollTo (via) Neat jQuery plugin for animated scrolling of both windows and overflow elements.

# 21st January 2008, 9:53 pm / jquery, javascript, scrollto, scrolling, animation, plugins

Lego Millenium Falcon Stop Motion. This introduced me to a whole world of YouTube Star Wars lego stop motion videos.

# 3rd July 2007, 11:03 pm / milleniumfalcon, animation, lego, starwars, stopmotion, youtube