The Effect
For a very long time I wanted to create an effect of artist drawing animation that can be applied to any image. I consulted artists and watched many time lapse videos, which present the process of creating a painting or drawing. I wanted my effect to work well on any photo as well. The effect can be used by photographers or artists to present their work in a new eye-catching way. The effect is tested with paintings, pencil drawings, black and white images, true color images, transparent and semi-transparent images.
The Finished Product
Time Lapse Painter product consists of jQuery Time Lapse Painter plugin (TLP plugin) that plays the effect and an editor called Time Lapse Painter Studio (TLP Studio). TLP Studio is the means by which the resources needed for the animation are created and the values to control it are set.
Features
- Responsive behavior. TLP Plugin scales according to available width.
- Countless ways to animate your true color image, provided by TLP Studio.
- Transparent and semi transparent PNG images.
- Method and events that allow the effect to be used in trending slideshow plugins.
jQuery Time Lapse Painter Plugin
The jQuery Time Lapse Painter plugin (TLP plugin) is a tool that uses canvas objects to animate the drawing and reveal effects defined in the TLP Studio. It uses as source the true color image and the animation map image. It also has a set of few parameters, methods and events that further define and control the effects as described in the Time Lapse Painter Documentation.
Time Lapse Painter Studio
The TLP Studio is software written in PHP, which in few distinctive steps leads the user through the process of creating the animation map image. The animation map image contains the essential data that is used by the TLP plugin to animate the source image.
Basic Usage of the jQuery TLP Plugin
In order to execute, the tool needs some JavaScript files added in the web page. These are:
<script src="js/time-lapse-support.js"></script>
<script src="js/jquery-latest.min.js"></script>
<script src="js/jquery.time-lapse-painter.js"></script>
The first file contains some support code for reading PNG files, for WebGL support and other minor tasks. The second file is the jQuery library and the last is the JavaScript file of the TLP plugin. The next requirement is to have a container where the animation will display. This needs to be a div element with some style settings like this:
<div id="tlp_holder" style="position: relative; max-width: 0px; "></div>
The animation looks better if there is some background it can play over. It can set to the container div or to some parent holder, or to the body of the page. Finally some initialization code is needed, which can be like this:
jQuery(function() {
tlp = jQuery("#tlp_holder").TimeLapsePainter({
rev:"001", rev_percent:0.5,
animation_map_image: "path-to-animation-maps/eye.png",
source_real_colors: "path-to-true-color-images/eye.jpg"
});
});
The few options listed here are explained in the documentation.
Changelog
RELEASED [OCTOBER 2016]
Download jQuery Time Lapse Painter Plus Editor (Images and Media)
