v1.0 jQuery Time Lapse Painter Plus Editor

Subscribe to updates

Get notified by email if this item is updated

jQuery Time Lapse Painter Plus Editor

26 12 0
5 out of 5 based on 1 customer rating
(1)

16$ Free Trial Version Coming Soon

jQuery Time Lapse Painter – 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.

Compare

Live Preview Buy item Elements

Version: v1.0
Created: 11 October 2016
Last Update: 11 October 2016
Author: digitalplant

jQuery Time Lapse Painter Plus Editor

jQuery Time Lapse Painter Plus Editor
jQuery Time Lapse Painter Plus Editor
jQuery Time Lapse Painter Plus Editor

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.

jQuery Time Lapse Painter Plus Editor

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.

jQuery Time Lapse Painter Plus Editor

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.

jQuery Time Lapse Painter Plus Editor

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 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]

Compatible Browsers

Chrome, Firefox, Safari, Opera, IE11, IE10

Files Included

JavaScript JS, CSS, HTML, PHP, .xml

Software Version

PHP 5.3, PHP 5.4, PHP 5.5, PHP 5.6

1 review for jQuery Time Lapse Painter Plus Editor

  1. jQuery Time Lapse Painter Plus Editor
    5 out of 5

    :

    Very nice idea!

Add a review

Your email address will not be published. Required fields are marked *

 

Coming Soon

Dear users, an information about trial version is unavaible. We are working on solving this problem and soon information will be provided.

Please visiut us after a few days.