A Virtual Flip-book: From Brain to Screen

21 Aug 2020

The first assignment for my Designing with Data class was to create a flip book by designing an animation in Processing 3 and then printing it onto a flip book.
As Covid-19 is want to do, it came and shut everything down again. So, we ended up not making the physical project.

As I already have knowledge of programming and have done it for a while (not specifically processing, but the principles are really the same) most of my effort was focused on the design elements of this project.

Week 1: Ideation

Week 1 was when we where introduced to the project. I spent the start of it finding my statistic I was to represent (From the sustainable development goals on the UN website). After a bit of back and forth, I decided I just needed to pick one and start iterating, I would find out if it was the wrong one soon enough. I picked one about ice water.

Less than 3 per cent of the world’s water is fresh (drinkable), of which 2.5 per cent is frozen in the Antarctica, Arctic and glaciers. Humanity must therefore rely on 0.5 per cent for all of man’s ecosystem’s and freshwater needs.

Taken from the Sustainable Development goals website.

As I had suspected, once I started jotting ideas down onto paper, I realized that this wasn't going to work. The statistic was just too small to represent in an effective way. So I scrapped it, as the idiom goes "Fail Faster". I needed something with a larger stat so that it could be visually represented. So I went back and chose a different stat.

Each year, an estimated 1/3 of all food produced – equivalent to 1.3 billion tons worth around $1 trillion – ends up rotting in the bins of consumers and retailers, or spoiling due to poor transportation and harvesting practices

Taken from the Sustainable Development goals website.

Sketching out some ideas based on this I came up with a few points that I wanted to show:

Show that it's 1/3.
Show that 1/3 is rotting, as that's the most visceral idea from there.
Show that it's food

I placed these in order of importance, and checked out a few other versions.

Week 2: Scripting and Iteration

After getting some feedback from the class I started scripting. Creating a version, then expanding from there, splitting into multiple variations later.

The first scripted version. My thought was that the black expanding over the 1/3 would represent the rot. I also inserted a border in order to try and place the white square as an object on-top of the black, instead of a hole being filled in.
This was probably the one that I learned the most technically from. As this was one of my first Processing scripts, although definitively not my first program, so I knew a lot of the basic ideas if not the syntax.

I tried it coming from the left rather than the top. Then showed it to some others and got feedback that it might be better to show it as humans consuming an amount and leaving behind the rotten part.
I also created a glitch in this one, where I set the x value of the dot TO 1/3 if it was over, instead of re-creating it UNDER 1/3. I fixed that in latter iterations.

Doing something with that feedback, I realized that the black dots made it appear as if I was adding something rather than taking away. As people more readily associate white with empty space than black with rot as I was trying to show.

Therefore I changed it to white dots. At this point I was pretty happy with this version, so decided to try a different direction.

A square in the center Doing what I could with the idea of “What does garbage look like?” I decided to make a square that would be left behind in the middle.
I realized a bit of what can be alluded to via the placement of other colour shapes, as the square didn’t exist on the page, it was just an area that the dots would not be placed.</figcaption>

Trying to make it look less like a square I tested out turning the entire project, which is simple in Processing, using the transform matrix. Although decided not to go too far with this due to it not adding anything to the piece.

At this point I decided I should add my fact into the animation (I edited it a little to decrease its length and increase the impact), as then the fact is tied to the animation rather than being an explanation of it.

I made the dots more granular and increased the number to make it look more like parts of the square where being "eaten away".

Week 3: The Final Week

I spent more time on this project during this week than any of the other weeks. First I did some more work on the versions of the animation, following the feedback I gained from this weeks class. Then most of my time was spent polishing the final project.

After receiving feedback on my two versions, this one was more effective at showing the story, although less so at showing that it was 1/3.

Going farther with it being garbage or rot, I decided to make it fall away. A happy accident with how I designed my background being eaten away created this cool "fume" effect trailing after the falling dots, so I decided to keep it.
I introduced a glitch here that I decided not to fix at the time, as this was more experimentation than a final project, which is that it leaves a line of black at the bottom after falling.

I tried making them fall out in a sequence, although the method I was doing would make some of the dots fall out of places where there was already white. Trying out other methods didn't turn out well, or at least any better than just having them all fall at once.

I branched away from dots and tried to make them "blobs" as the physics engine I was using allowed it. These where very computationally expensive, so I was only able to render a few of them at one time. They didn't end up adding enough to the overall feel of the piece.

I still wanted to show 1/3 better than the square in the center did, so decided to try this method. In this revision I played around with the font and letter size finding that this was easiest to read even while there was still some "fumes" leftover on top.

This gave me 3 variations on the animation that I was to choose for my final submission.
I decided to run these 3 by the instructors quickly and they confirmed my assessment that the latest version was the most effective.

Thus I reached my final design, which you can view here.

References:
1. Processing Foundation (n.d.). Processing.org. Retrieved 21 August 2020, from https://processing.org/
2. Martin. (n.d.). Sustainable consumption and production. United Nations Sustainable Development. Retrieved 21 August 2020, from https://www.un.org/sustainabledevelopment/sustainable-consumption-production/