Cinephoto is a new visual art format. It is similar but improves the quality of Cinemagraph, which is developed by Kevin Burg and Jamie Beck in 2011. You can find more about the company and other information.
A major limitation of cinemagraph to a photographer is its limited color presentation. Because it uses GIF as its container, the final result is limited to only 256 colors. Creating a custom palette may alleviate this color restraint, but creating a custom palette is not a minor undertake. Even with a custom palette, when examining a cinemagraph, you may cry out, where are the eye popping colors.
Ideally, we want to deliver a piece of visual art that contains a static background image, with moving parts, all in true color, 256x3 colors.
To abolish this 256 color limitation, I devised a new method. HTML5 is used as the container, PNG images are used for the motion part of the visual art work, and the base image can be either PNF or JPG, but not limited to the two formats. It is called Cinephoto.
When HTML5 is used as container, people may wonder, whether a web server is required to show a cinephoto. The answer is that it is ideal to have a web server to deliver the cinephoto. But a web server is not required. As long as you have access to the internet, so that you have access to the supporting program, which are delivered to you via internet, you only need web browser to show off your work. Here is an example.
To create a cinephoto, a series photos need to be created.
There are many tutorials online about making cinemagraph. Here is one tutorial. Same techniques apply to cinephoto, with added advantage, that you have true color and not limited to 256 colors anymore.
Now that you have all the parts, let's put things together to create a cinephoto. Html is used to wrap everything up. Following is one example. It is just a simple html page.
<!DOCTYPE html>
<html>
<head>
<title>Watering</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://xozon.altervista.org/css/cinephoto.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://xozon.altervista.org/js/cinephoto.js"></script>
</head>
<body bgcolor="black">
<div class="cinephoto">
<a href="watering/watering_base.jpg"></a>
<a href="watering/watering_0001.png"></a>
<a href="watering/watering_0002.png"></a>
<a href="watering/watering_0003.png"></a>
<a href="watering/watering_0004.png"></a>
<a href="watering/watering_0005.png"></a>
<a href="watering/watering_0006.png"></a>
<a href="watering/watering_0007.png"></a>
<a href="watering/watering_0008.png"></a>
<a href="watering/watering_0009.png"></a>
<a href="watering/watering_0010.png"></a>
<a href="watering/watering_0011.png"></a>
<a href="watering/watering_0012.png"></a>
<a href="watering/watering_0013.png"></a>
<a href="watering/watering_0014.png"></a>
<a href="watering/watering_0015.png"></a>
<a href="watering/watering_0016.png"></a>
</div>
</body>
</html>
In this example, it is assumed that you have a base photo called watering_base.jpg, a jpeg photo. This photo serves as a static image, like a background image. You also have 16 additional photos for the moving parts, named watering_0001.png through watering_0016.png. All the photos are in directory (folder) watering relative to this html file. These png photos will be played like movie or video at 25 frames a second, but in an endless loop.
You can leave the head element of the html unchanged, except its child title element, where you can supply a different title, if you wish. The rest of the head element specifies where to get the program support for the cinephoto. They need to be left unchanged.
The div element with class cinephoto tells the program that this div represents a cinephoto. It contains all the photos you want to play in the order you want to play them. The first one is the base photo. The play loop goes from the one after the base photo to the end and back to the first one after the base photo again, and forever.
Simple, right? This is how you make your cinephoto.