How to see a place in two views...
... at the same time? That's really the essence of this Challenge. My goal is to allow for easy comparisons between an A and B version of photographs taken from the same place.
To do this, I've given you two images of San Francisco. The A version is from 1938:
And the B version is SF some 21 years later:
The question was, how can I do this for real?
There are a few approaches to doing this kind of side-by-side comparison. Here's what I did...
#1. You can build a web page that uses some fancy Javascript to create a slider that moves across the page, letting you see the old and the new.
What I did: First, I needed some Javascript code to do this. As others have pointed out, a query like this:
[ javascript slider image compare ]
quickly leads you to the CatchMyFame site which has a nice demo of their slider function.
I copied the HTML of their web page and dropped in the two images from above (did a little hacking to fix up a few things that have changed over time).
And I made this web page (which almost works correctly--something changed in the dragging code) so you can CLICK either to the left or right and get the same effect. At some point I'll get around to fixing the non-working draggable slider. I'll announce it here. But I didn't want to hold up this post while was futzing around.
To see how this works live, CLICK HERE to visit the page (for weird technical Blogger reasons, I can't embed my running HTML example in a blog post, so you have to get it directly from my site.) Note that the slider will move to where you click, so if you click near the slider, it will move a little bit. If you click farther away, it will move a large distance to get to your click point.
#2. I can make a movie that lets you use the scrubber to do something very similar.
Here's an example of what I mean. Watch this short video to see how you can use the scrubber (the control that lets you move forward and back in a video) to see the change from 1938 to 2017.
This video (you can download it by clicking this LINK to slider-example video). Once you have it, you'll see that it lets you scrub back and forth just by dragging the time position widget (often called a "scrubber") back and forth.
To make this movie, I just used some presentation software to do an animated transition from one slide to another, then recorded the whole thing! This made the MP4, and now you can use the scrubber as a time-slider. (I used Powerpoint just because it was handy), but you could do the same thing in Google Presentation or your favorite application.)
If you're interested, you could do the same thing with a "fade" transition, and then you could select any degree of transparency between the two images.
#3. You can use the browser's back/forward commands to do "blink comparisons" of a place!
Back in the old days, astronomers and aerial photography specialists used a hardware device called a "blink comparator" that would let you rapidly switch back and forth between 2 pictures of the same place very quickly. Your eye does an excellent job of automatically showing up the differences. Here's a quick video that illustrates this:
All I did was to open these 4 images that I opened in my browser. (If you click on them, they'll open up full-size, then you can load them into your browser just as I did.) Notice that the date is show in the upper-left corner in the URL bar. I named each image with the year the photo was taken. Special bonus: If you use the right-arrow after you've opened the image, you can skip forward in time. Left-arrow takes you back. Try it!
Then, all I did was to use the back and forward keyboard commands to move backwards and forwards in time. (On the Mac, it's CMD+left-arrow to go back, and CMD+right-arrow to go forward. On the PC it's ALT+left-arrow and ALT+right-arrow.)
Of course, you can do a few screen-grabs of your own and use this method to do a quick time lapse of any place you'd like.
While we're thinking about this...
This last answer to the Challenge gives us a good idea about a possible solution!
My search was:
[ earth time lapse ]
and was gratified to find that Google Earth has a special version web-application--Google Earth Timelapse--that let's you fly to anyplace on earth and get a decent time-lapse aerial image for the past decade.
The default demo is for Miami, Florida (which is pretty impressive), but there's a lot to see (and be worried about).
Although this compilation shows you what's possible to do with Google Earth Timelapse:
The biggest lesson here is that there are many ways to accomplish the same thing.
In part 1, I show 3 different ways to accomplish the same end goal (of comparing two places visually). I'm particularly happy with the "capture presentation transition as a movie" method, as you can make a pretty decent side-by-side comparison without any programming. You just need a screen video capture tool. I used SnagIt, but Camtasia and many others will do an equally good job. To search for them:
[ video capture recorder reviews ]
As several SRS Regular Readers pointed out, there are tools to compute difference between two images--but for these kinds of aerial images, the differences are often everywhere. In these cases, everything is marked as having changed. (But it's good to know that these tools exist for cases when you really DO have something two images that are fairly similar!)
In part 2, we found Google Earth Timelapse, which does exactly what we wanted for timelapses of almost any place on the planet (although the quality does vary--some images have clouds, while some agricultural regions seem to flicker with seasonal changes as the crops change. (Not all of the images are taken the same day each year--some might show spring foliage while other years might be from the fall. YMMV.)
That was fun, eh?
Search on!
... at the same time? That's really the essence of this Challenge. My goal is to allow for easy comparisons between an A and B version of photographs taken from the same place.
To do this, I've given you two images of San Francisco. The A version is from 1938:
And the B version is SF some 21 years later:
1. Is there any way I can make a web page that lets me have two pictures side-by-side and then have a slider that let's me easily move a divider between one image and the other? (Here's a mockup of what I'd like. In this illustration, you can click on the circle and drag the divider back and forth to see more of one image or the other.)
The question was, how can I do this for real?
There are a few approaches to doing this kind of side-by-side comparison. Here's what I did...
#1. You can build a web page that uses some fancy Javascript to create a slider that moves across the page, letting you see the old and the new.
What I did: First, I needed some Javascript code to do this. As others have pointed out, a query like this:
[ javascript slider image compare ]
quickly leads you to the CatchMyFame site which has a nice demo of their slider function.
I copied the HTML of their web page and dropped in the two images from above (did a little hacking to fix up a few things that have changed over time).
And I made this web page (which almost works correctly--something changed in the dragging code) so you can CLICK either to the left or right and get the same effect. At some point I'll get around to fixing the non-working draggable slider. I'll announce it here. But I didn't want to hold up this post while was futzing around.
To see how this works live, CLICK HERE to visit the page (for weird technical Blogger reasons, I can't embed my running HTML example in a blog post, so you have to get it directly from my site.) Note that the slider will move to where you click, so if you click near the slider, it will move a little bit. If you click farther away, it will move a large distance to get to your click point.
#2. I can make a movie that lets you use the scrubber to do something very similar.
Here's an example of what I mean. Watch this short video to see how you can use the scrubber (the control that lets you move forward and back in a video) to see the change from 1938 to 2017.
This video (you can download it by clicking this LINK to slider-example video). Once you have it, you'll see that it lets you scrub back and forth just by dragging the time position widget (often called a "scrubber") back and forth.
To make this movie, I just used some presentation software to do an animated transition from one slide to another, then recorded the whole thing! This made the MP4, and now you can use the scrubber as a time-slider. (I used Powerpoint just because it was handy), but you could do the same thing in Google Presentation or your favorite application.)
If you're interested, you could do the same thing with a "fade" transition, and then you could select any degree of transparency between the two images.
#3. You can use the browser's back/forward commands to do "blink comparisons" of a place!
Back in the old days, astronomers and aerial photography specialists used a hardware device called a "blink comparator" that would let you rapidly switch back and forth between 2 pictures of the same place very quickly. Your eye does an excellent job of automatically showing up the differences. Here's a quick video that illustrates this:
All I did was to open these 4 images that I opened in my browser. (If you click on them, they'll open up full-size, then you can load them into your browser just as I did.) Notice that the date is show in the upper-left corner in the URL bar. I named each image with the year the photo was taken. Special bonus: If you use the right-arrow after you've opened the image, you can skip forward in time. Left-arrow takes you back. Try it!
Then, all I did was to use the back and forward keyboard commands to move backwards and forwards in time. (On the Mac, it's CMD+left-arrow to go back, and CMD+right-arrow to go forward. On the PC it's ALT+left-arrow and ALT+right-arrow.)
Of course, you can do a few screen-grabs of your own and use this method to do a quick time lapse of any place you'd like.
While we're thinking about this...
2. In this same vein, I'd like to see a nice time lapse of a place--ANY place. (You can probably find an aerial time lapse of any particular large city.) Can you find a worldwide tool that will let me see any place on the planet with a roughly 10 year timelapse view?
My search was:
[ earth time lapse ]
and was gratified to find that Google Earth has a special version web-application--Google Earth Timelapse--that let's you fly to anyplace on earth and get a decent time-lapse aerial image for the past decade.
The default demo is for Miami, Florida (which is pretty impressive), but there's a lot to see (and be worried about).
Although this compilation shows you what's possible to do with Google Earth Timelapse:
Search Lessons
The biggest lesson here is that there are many ways to accomplish the same thing.
In part 1, I show 3 different ways to accomplish the same end goal (of comparing two places visually). I'm particularly happy with the "capture presentation transition as a movie" method, as you can make a pretty decent side-by-side comparison without any programming. You just need a screen video capture tool. I used SnagIt, but Camtasia and many others will do an equally good job. To search for them:
[ video capture recorder reviews ]
As several SRS Regular Readers pointed out, there are tools to compute difference between two images--but for these kinds of aerial images, the differences are often everywhere. In these cases, everything is marked as having changed. (But it's good to know that these tools exist for cases when you really DO have something two images that are fairly similar!)
In part 2, we found Google Earth Timelapse, which does exactly what we wanted for timelapses of almost any place on the planet (although the quality does vary--some images have clouds, while some agricultural regions seem to flicker with seasonal changes as the crops change. (Not all of the images are taken the same day each year--some might show spring foliage while other years might be from the fall. YMMV.)
That was fun, eh?
Search on!
Here's a site with a better working example of sliding to reveal either an older or newer image
ReplyDeletehttp://www.38north.org/2017/07/punggye070717/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+38North+%2838+North%3A+Informed+Analysis+of+North+Korea%29