Problem with linear zoom out of multiple images put together in an attempt to copy Chris Jordans 'Running the Numbers'-trick

Animation
1

Hi there.

I hope someone could lend me a hand here.

I’m basicly trying to achieve the same effect as Chris Jordan does in his Running the numbers series:

http://www.chrisjordan.com/gallery/rtn/#prison-uniforms-set

My aim is to build a little web app, where the user can choose how many cigarettes they’ve smoked a day for x years, and then the scene will zoom out from one pack of smokes to the amount the person has smoked his/hers entire life. With some additional text and scale animations at the end of each end point (scene).

My logic is that I have to use different photos with different pixel sizes, so that the file won’t be too big to play for the users, so I’ve made this dummy where the first 4 of many images lap over each other and zoom at the same pace.

BUT - even though I’ve chosen the linear animation type, it seems that there’s still some ease in/out effect to the animation. It doesn’t run smoothly, as I want it to. And also, the images jump around a bit when the animation is carried out.

Can anyone spot what I’m doing wrong?

The idea is to cut out the middle part of each image i photoshop when I make the real animations to minimise size, so that it’s kind of like frames on top of frames zooming out one at a time.

But maybe this is not really the right way to achieve what I’m going for here. Maybe one of you wizards out there would suggest a different approach to making the 19 scenes necessary for this little piece of zoom out ‘art’…

I’m open to all suggestions but I use hype and have used it a lot in my storytelling here at the paper because I can’t really code. I’m just a data journalist with a big heart for interactive stuff in my digital pieces for the paper.

Hope someone can straighten me out.

Best from Denmark
Peterdummy-zoom-out-of-multiple-photos-with-linear-animation.hype.zip (941.3 KB)

2

One idea without needing much resources would be to use a background image using the repeat feature in CSS. With a little math and trickery you could create a tiled background with the corresponding amount…

Drawing them into a big canvas would be an alternative, although the first idea seams to be the more browser efficient.

Anybody else an idea?

3

Using JS and a background-image.

zoomCigarettesWithJS_MaxV1.hype.zip (573,2 KB)

1 Like
4

My take from glancing at it is that this is an optical illusion, of sorts. It basically a "simple interest" vs. "compound interest" visual problem.

A linear timing function means that the amount of change is equal for each frame - thus if you have 10 frames with a 50 change each change amount is 5 pixels. Let's say your element is 100 pixels to start - the first change amount is only 5 / 100 = 5%, but the last change is 5 / 55 = 9%. So visually this will appear that it is speeding up.

An easing equation (perhaps the quad variant?) would generally provide close enough visual results, but you may have an issue stitching them together for different animations. Instead I'd think you may need to us a Math Equation timing function with some javascript code. I'm not sure what the math would be, but perhaps one would base it off of the compound interest formula.

In a simple heartbeat animation scenario (which could also be done with Hype's setElementProperty API), you'd just set the value to a constant percentage of the remaining value.

Your animations use the top/left/width/height values. These cannot be displayed as fractional pixels, so on slower animations they may not change every frame. Instead, you should use the scale width/height percentage values. When using these values, the element can be interpolated to draw on fractional pixel boundaries and thus the animation will appear more smooth.

You can either edit these scale values in the Element Inspector, or hold down command to enter Transform Mode and then use the handles on the element to scale.

5

Thanks a lot both of you, MixZieb and Jonathan. Thumbs up for the time you put into it, MaxZieb, but that whole Javascript approach is all greek to me and my thought for the end result is a little different. When the canvas is folded out to say 45.000 packages of smokes it shouldn’t be the same copy of the 20 pack sheet duplicated as this just gives it an annoying pattern. It should be more randomised which I’ve done in Photoshop. But thank you anyways. You know your shit is quite obvious.

Jonathan, I see what you’re saying about using the scale tool instead of size. It allready works smoother. The math transitions I must try and play around with 'cause you’re probably right that it’s more of an optical illusion so I must try and figure out how to make an alternative transition that will make that illusion seem less visible.

Thank you both for taking your time.

Best from Copenhagen
Peter

1 Like
6

No, problem. Was my break to play around a bit. When it comes to displaying the perfects amount given by user input of data you won't be able to dodge JS, though.

If you are working with ruff estimates then you can use a zoom out method and stop the zoom at a ruff level that is equal with the calculation cigarettes * days / cigarettesInPack.

Randomization can be achieved with a bigger texture by the way or a dynamic texture rendered on the fly.

I will exchange you image in my file and add a counter and probably use some weather / climate footprint metric to visualize impact. Then I'll post the file to templates, if it's okay with you.

Best regards from Berlin

1 Like