Adrian Glasser – Land of Iron volunteer
Time Sliders (the subject matter of this blog) allow horizontal scroll-bar controlled transitioning between aligned old and new images of the same subject. These were inspired by Tom Mutton and developed for the Land of Iron project.
All the information needed to set up a Time Slider is available to be seen and copied directly from the web page itself. When on the Time Slider web page, just right-click with your mouse on the web page background (not on the Time Slider image itself) and from the pop-up menu that appears (at least on Google Chrome and Internet Explorer), select the 'View page source' or the 'View source' option. This lets you see the contents of the .html file.
Ia = loadImage('bank_top_bridge_after.jpg'); Ib = loadImage('bank_top_bridge_before.jpg');
The two image files must both be exactly the same pixel dimensions in width and height as each other. In the case of this Time Slider example, the two images dimensions are width = 1060 and height = 645 pixels. It is a good idea to keep these two image files 'small' in size. It takes a lot of bandwidth for a browser to load images and it can take more time to load larger images. There is no real benefit to having larger image file sizes. The image files for this Time Slider are about 450KB in size. That is sufficient.
// uncomment the next line for running this on a computer //createCanvas(1060, 645); // uncomment the next two lines for running this on a web page var canvas = createCanvas(1060, 645); canvas.parent("sketch"); cWidth = 1060; cHeight = 645;
<html> <head> <script src="libraries\p5.js"></script> <script src="animation_p5.js"></script> </head> <body> </body> </html>
Web Site versus Computer
// uncomment the next line for running this on a computer createCanvas(1060, 645); // uncomment the next two lines for running this on a web page //var canvas = createCanvas(1060, 645); //canvas.parent("sketch"); cWidth = 1060; cHeight = 645;
If you wish to establish a Time Slider on a web site, you will need access to a web server and you will need a program to transfer (or FTP) the files over to the server. All that is required is that the files for the Time Slider on your computer and the folder structure used for the Time Slider be transferred to the server. The 'animation_p5.js' needs to be edited as explained above to run on a web site (as opposed to running on a computer). With that and an apprioriate URL to the Time Slider .html file, it should run from the web page.
Happy Time Sliding!