Art In Motion- Kinegram and Lenticular Art

The interactivity of even the simplest of the art work always intrigued people of all age groups.

My childhood memory of a moving picture on a book cover, remind me of the curiosity I felt about the mechanics behind it .On researching about it , I came to know about the science behind it and the different commercial applications and the various simple ways these animations can be made with paper and plastic .So,in this tutorial, I will be programming using the Javascript library p5.js and create a 2D image following the same principle, into an animated image

What is Kinegram and Lenticular Art?

The word “Kine” means moving and “Gram” means drawing. When the linear grid overlay is moved across the interlaced image ,the underneath image seems to be animated .

It originated in 1890's ,the oldest publication known is a “Motograph Moving Picture Book” by Bliss, Sands & Co .The pictures in the book contains patterns ,which gives moire effect when the stripe transparency moved across creating a motion illusion like undulating motion of steam or spinning of the wheels of a car.

In May 1896, Auguste Berthier came up with method Autostereogram ,where a glass plate with opaque lines are fixed over a interlaced pattern,which is slightly offset, so the lines on the screen form a parallex barrier .The same principle of kinegram and autostereogram is used in Lenticular Art.

Lenticular Art uses lenticular lenses which produces printed images with an illusion of depth .It is used in making 3D posters of movies ,billboards, postcards, covers of books,badges,children novelty toys and 3D movies.

Brain’s Perception of Kinegram or Lenticular Art:

Binocular vision is the ability of our eyes to perceive a single 3D image. But , how do we perceive a 3D image ?.The answer is our eyes ability to view the same object with a slightly different perspective .

Experiment: Let’s see how our two eyes view . Close your left eye and look at the green line, now align the index finger of both hands with the green line in such a way leaving the top of the line visible . Now switch, open the left eye and close the right eye.Try, doing the same experiment in the opposite eye.

The brain receive these two slightly different images and combine them and give us the single three dimensional image.This is called Stereoscopic vision,which help us to see a 3D kinegram or lenticular image comes alive.

Modern form of kinegram was introduced by Rufus Butler Seder which is called Scanimation , which is made by sliding striped acetate sheets over a interlaced pattern to produce barrier grid animations in his books .

Inspired by Rufus Butler Seder work ,we are going to programme our kinegram or lenticular art and animate the 2D image into a 3D image using the same principle.

Create a new project using p5.js Web Editor. The p5js Web Editor has following two functions. The setup() function runs only once and draw()function runs in a loop.The canvas is 400 in width and 400 in height and the background color is 220 .

Now , make another function preload(), it is used in loading images and sound. For loading the image ,first make a variable , and then use the variable to call the loadImage(‘ name of the image’) function.

Add the image , you like to use in the programme.(Follow the video to upload the image).

Add the name of the image uploaded in the p5jsWebEditor , in the loadImage(‘name of the image uploaded’) . In the function draw(),call the image(),it takes parameters image( variable , x-axis , y-axis , width , height)

Now , make linear grid over the image using for loop, you want to animate .Use the same colours for the lines as background.

Make another pair of linear grid using for loop ,this time keep the strokeWeight() more for thicker lines as we don’t want the lower part to be visible.

Now inside the push() and pop()function , load the same image using the image() function .Use the translate(new x-axis , new y-axis) to move and rotate the image.Rotate image using rotate(angle).

Make the final linear grid over using for loop extending from 0 to maximum in the x-axis and covering the full height .But nothing seems to happen.

To see the animated picture , we need to move the last grid move .For doing this make a variable x and initiate it with 0.

Use conditional statement and use the variable x , if x is greater than 550 than comeback to 0 position , else increment x by 0.9 .Now you can see , as the grid move across the 2D parrot is animated to 3D with flapping action of the wings. This is happening because the grid on the parrot’s wings is offset a little bit and when the final grid is moved across, it is making the image appear and disappear .Hence the flapping action.

You can upload another image over the grid to give more effect. Congratulation!!! you made a still picture come alive.

If you find anything difficult, you can always check the solution code here.For more interesting ideas ,watch these videos and try it out yourself.


1-Getting Started with p5.js- A book about programming for in p5.js.

2-p5.js Reference:References for all the p5.js functions.

3-What are Moiré Pattern?-An interesting YouTube video by Mr.Wizard

4-History of Lenticular: About lenticular origin and it’s use at present.

5-Barrier Grid animation and Stereography: Reference from Wikipedia.

6-StereoVision: Reference from Optometrist Network about the how the human brain perception of 3D image.

7-Magic,Art and Scanimation: YouTube video about the history of different forms of animation by Rufus Seder Butler.

8- Byte Size Coding :Website with free resources tutorials for kids and beginners.

9-Byte Size Coding YouTube Channel:YouTube Channel with lots of fun ideas.




Doctor , artist ,designer and Computer Science Masterclass Speaker.I am an inquisitive person with a will to learn more.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Everything you wanted to know about JavaScript scope

Node.js | Automation With onsave

Pros and Cons of NextJs: Do you really need NextJs? This will help you decide!

Deploy a Full-Stack Go and React App on Kubernetes

Implementing Stripe — Building a SaaS using Django and Vue.js — Part 16

What is anti-shake and throttling? What’s the difference? How to achieve?

Blazor Server Project #4: Understanding URL Routing & Navigation

One Rule and Three Exceptions to Understand JavaScript Coercion

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nazia Fakhruddin

Nazia Fakhruddin

Doctor , artist ,designer and Computer Science Masterclass Speaker.I am an inquisitive person with a will to learn more.

More from Medium

9 Ways To Start Up and Keep Up in Business

5 Secrets of Enterprise Web Management

How to lose less in Case Competitions

Virtual Team Building Activities: Motivate Your Employees In 2022