Finn Rudolph

CanvasReflection, JavaScript, Canvas von Finn Rudolph



I was always interested if the pixel based canvas element is fast enough to provide client-side image reflections. This is my first experiment on that topic. You can try the demo and download the whole thing from GitHub.

Reflections are pretty simple with the canvas element (18 lines of code): Just create a canvas and set the height to the source image height plus the height of the reflection. Then draw the source image and a mirrored source image. Place a gradient over the mirrored image and set the globalCompositeOperation to destination-out.

The problem is, that if you want to scale the canvas you have to redo all the canvas drawing, since it is pixel based.


Icons by: FastIcon.com

Update: Also works nicely with eleven transparent PNG images.

Dragonfly von Finn Rudolph

On June 25th, between two and five o'clock am, this website may be down for some minutes. The webhosting-provider ALL-INKL.COM is doing some maintenance on its network. Sorry for that...

ImageFlow, JavaScript, CSS von Finn Rudolph

There is a new ImageFlow version featuring the Slideshow and Circular mode everybody was waiting for. They come with a bunch of options that enable you to customize the behaviour of ImageFlow as you prefer.

They also "play nice" with the previous options. Which was especially tricky to achieve with the circular feature. I had to clone some of the images to make the illusion of an circular animation possible and thereby changed the number of images. That had an impact through the whole code (just search for 'my.circular' in the imageflow.js if you are curious what had to be touched ;D).

I also implemented some other options that came up in the shoutbox often: With animationSpeed you can now slow down the animation for extremely small images. And the path options imagePath and reflectPath enable you to put the reflect_.php files where you want. And it is now possible to display only one image in ImageFlow without crashing the IE. Enjoy!

GitHub, Git von Finn Rudolph

Since I started using the Git revision control system a while ago, my projects are now also hosted at GitHub: github.com/countzero

So if you want to take a deeper look into the codebase behind projects like ImageFlow and JavaScriptObject "check them out" ;D

github.com/countzero/JavaScriptObject
github.com/countzero/ImageFlow

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject package that comes with some code improvements and a new option called lock. If activated the rotation will be locked at the given boundaries: One can only spin the object around one time and not infinitely. Check out the locking examples and if you're interested in the codebase feel free to take a look at the github repository of JavaScriptObject.

Rare Exports, Christmas, YouTube von Finn Rudolph

After the incredible short movies Rare Exports Inc (2003) and Rare Exports: Official Safety Instructions (2005) Jalmari Helander produced yet another piece. Making-of footage can be found at their facebook page. Can't wait to see the whole thing!

"In the depths of the Korvatunturi mountains, 486 metres deep, lies the closest ever guarded secret of Christmas. The time has come to dig it up!" - Rare Exports

JavaScriptObject, JavaScript, CSS, CINEMA 4D, C.O.F.F.E.E. von Finn Rudolph

There is a new JavaScriptObject package that features two very handy scripts written in C.O.F.F.E.E. (the scripting language of CINEMA 4D). Until now it was very hard to create an animation in CINEMA 4D that rotates an object with a given step width around two axes and renders the frames. Basically this could be done with the timeline, but that would require an awful lot of stupid work - like setting 40 key frames with different H and P rotation values... by hand!

And since we have more important stuff to do I made two C.O.F.F.E.E. scripts that automatically do the boring work for us. There is a new step by step tutorial on how to install and use the scripts. It's really simple and you finally can render 3D models that can be rotated around two axes in a very high quality:

Ladybird by Gilles Tran - 400 frames (9,1 MB)

ImageFlow, JavaScript, CSS, iPhone, iPod Touch von Finn Rudolph

There is a new ImageFlow version featuring the navigation buttons (next, previous) which has been asked for quite a lot in the shoutbox. The buttons are simply divs with background images, which you can configure via CSS. Check out the navigation buttons example. And there is a new option called imageScaling that completely disables the dynamic resizing, which is very handy for photo slideshows.

Oh, and it is now also compatible with the touch events in the safari browser on the iPhone and iPod Touch! Check the demo video or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/ImageFlowTouch


ImageFlow on the iPod Touch

JavaScriptObject, JavaScript, CSS, CINEMA 4D von Finn Rudolph

The new tutorial explains how to render frames of a 3D model in Maxons CINEMA 4D R11 that can be directly used with JavaScriptObject to build a 360° rotation. It features a Step by Step guide and ends with a nice 360° - Mini Cooper as a result.


The model I used in this tutorial is a Free CINEMA 4D model made by Gilles Tran.

JavaScriptObject, JavaScript, CSS von Finn Rudolph

There is a new JavaScriptObject version featuring support for the iPhone and iPod Touch. You can test the demo shown in the video beneath at testground.finnrudolph.de/js/JavaScriptObject


JavaScriptObject on the iPod Touch


I also wrote a small JavaScript application to understand the basic touch events of the iPod Touch and iPhone browser Safari. That means only one finger, no gestures. You can watch the Demo or try it yourself with your iPhone or iPod Touch at testground.finnrudolph.de/js/iTouchEvents