A sequence of primitives - Designing with Data

In my coding class, we were tasked with creating a GIF which represented a statistic using only geometric 'primitive' shapes, and a strictly black and white colour scale. We had find to a UN sustainable development goal (SDG) and find a statistic related to New Zealand, then using Processing 3 to code the GIF.

The SDG that I chose was number 14: Life Below Water and the statistic I chose; 90% of seabirds are classified as threatened or at risk of extinction in New Zealand (between 2013-2019) (Department of Conservation).

90% of New Zealand seabirds are threatened or at risk. The statistic is related to the SDG outlined by the UN; Life Below Water, which aims to improve marine biodiversity, sustainable use of the oceans, and reduce human activity. The Department of Conversation as well as Fisheries New Zealand outline some of the risks that New Zealand seabirds face in their 2020 document ‘reducing the incidental mortality of seabirds in fisheries’; such as being ‘bycatch’ from trawling and longlines used in the fishing industry as well as global warming, pollution, plastics and oil spills; all human caused.

My statement of intent is outlined below, alongside the final GIF

I have tried to visualise the severity of this statistic by creating a connected heartbeat; a life line of the birds, as many species feed, flock, and fly together, when this number decreases it becomes much harder for the birds to survive. The heartbeat also creates a sense of ‘oneness’, such as in the ‘circle of life’ where all animals within an ecosystem are needed to keep it running smoothly. When this chain breaks high up on the trophic level, known as a trophic cascade, it can have devastating effects on the ecosystem. This is visualized through the water rising and claiming the birds, leaving only one behind. Not only does this represent the statistic literally, but also the decrease in marine biodiversity, the potential breaking of the 'circle of life' and an ecosystem that has been together for thousands of years.

How did I get to this point?

Exploration of Processing

I began by learning about Processing, and trying it out. I am still quite new to coding, so this was a bit daunting to me, but I also found it very rewarding at the same time.

Research and Image Collection

I researched some of the 'at risk' birds from the statistic data, and gathered some pictures for inspiration.

Pictures are sourced from the digital encyclopedia of New Zealand birds (partnered with Te Papa, DOC, and Birds New Zealand). A prevalent pattern is that most of the photos I found showed the birds flying around water, so I think my GIF should include water in some capacity. Another prevalent thing to be able to identify that a geometric shape could be considered as a bird, is to nail their flight pattern, and the way their wings shape and curve whilst flying.

Inspiration

From Pinterest, I gathered some images to make an inspiration board. I am interested in making my GIF have a seamless flow, like water and like birds. I am also looking for inspiration on geometric stylized birds, to see if I can incorporate that into my own. Lastly I am interested in how I can represent my stat showing a flock of birds, transitioning to just one.

Iterative Storyboard

After I had done some research, gathered some inspiration and knew the sort of path I wanted to follow, I began iterations.

There were a lot of iterations I didn't like:

But also a few that I did like:

After gaining some feedback from my tutor, I decided to move forward with a few of them and created some GIF using Illustrator first just to see how they would look.

I got some feedback from my peers and decided to try coding both of them!

Big Bird

I will start with the coding I tried to do with the 'big bird' as I liked to call it, a series of birds flying to form one bird. I can tell you now that this idea was not good for a beginner coder. I spent an embarrassing amount of time trying to make this, before I finally realized that I needed to try something else.

I felt like the first part where the bird brings its wings together looked smooth, and then second part just looked terrible. The code in itself was not efficient, each wing of each bird was hardcoded and I used the keyPressed function, which makes the wings move when a specific key is pressed, this is what is making the movement look so static and rigid.

As I said earlier I eventually abandoned this idea as I realized I was not skilled enough to complete this idea, and I had other ideas I wanted to try out as well.

Heart Beat Birds

My next idea was to try out the 'heart beat bird' where there's a line of birds which creates a heartbeat shape, and the heartbeat is broken by the birds falling.

There were also many many attempts at this, just a few of which I captured, and wow, they are terrible.

This code was based upon trying to make a white circle move across the page, and then do a zigzag. After multiple attempts the zigzag just wasn't happening, I believe this was a tricky move to code with some simple if statements so I had to try something else. I also didn't name any of my integers well which was a mistake, as someone else trying to read my code wouldn't be able to understand it quickly.

I also tried to do three lines of birds, but quickly abandoned this as I didn't want to make it even more complicated for myself.

Big Bird 2.0

And back to the big bird idea! So my lecturer gave me a couple of ideas for how I could change the big bird to be a bit simpler, by cutting out the birds turning into a bigger bird, and just have them do something else. So I tried two ideas from this, one was to make the birds grow smaller and disappear, the other to make them fly off the page. To make the set of birds, rather than hard coding each wing out like I had done previously, a loop was created to draw one bird just in different areas on the page.

This first bit of code is drawing the birds, which was split into three sections, the center bird, birds to the right, and birds to the left. After drawing the birds, I made their wings fly using a lot of if statements and Booleans, checking to see if the wing is at the top or bottom of its flight path etc.

After doing that I wanted to make the birds fly in and stop at a certain point on the canvas and keep flying. While the birds are flying, I used a count to measure the number of times they've flown, and once they've flapped their wings 6 times, the side birds will then disappear. I did this simply by making the weight of the line get smaller, and once they reach a certain stroke weight number, I used the variable I had created earlier to originally draw the side birds (numBirds) to then make them disappear entirely.

The last thing was to make the centre bird fly off once the other birds had disappeared, to do this I set an if statement that when the number of side birds = 0 (once they disappeared), then the bird would start flying in. Flying in was a Boolean I had created earlier so I didn't have to do too much here.

I also tried adding some water, and making the bird fly slower after it's friends had disappeared, but I didn't like either of those ideas so you can ignore them :)

You can access this code here:

Big Bird.pdf

Download PDF • 191KB

Birds Down

To try my other idea and make the birds fall down, I used the same code for the first part as before and just changed the end bit. The code can be a bit hard to read because I wrote the code to check the 'false' statement first, as this makes it more efficient as the statement is false most of the time. This is mostly the same code as previously, except this time, when the birds stop in the center, the wings will point downwards, and the side birds fly downwards.

Next was to make the center bird fly off again, so I create a Boolean to check if the birds had flown downwards, and once they are down they disappear (numBirds = 0). If the birds are down, then the center bird flies up again.

You can access this code here;

Birds Down.pdf

Download PDF • 192KB

Heart Beat 2.0

So I went back to a blank canvas and tried again. By this time, we had had another lesson on coding and I was feeling a bit more confident. I decided rather than making one circle do both the up and the down of the wings, I let one circle go up, and one circle go down, and it worked! I had to work with Booleans this time, but once I got the grasp of this, it was much easier. There is probably a more efficient way to draw the heart beat at the beginning, but for my skill level, I am honestly very proud of what I managed to achieve.

The lines that are greyed out by double slashes, // are not code, they are there to explain what the code does!

After this triumph I wanted to take it to the next level. I felt that the GIF wasn't related to the sea as much as it could be, so rather than making the birds just fall down, I wanted water to rise up and 'claim' the birds, leaving only one behind; I felt that this would have a bigger impact.

So I created a back rectangle, at the bottom of the page, and a white rectangle at the top to make the water look like it was rising and then falling. To make things even more complicated I wanted the center bird (the one left behind) to change from black to white to black when the water rises and falls (it makes more sense when you watch). To do this I had to draw another bird on the page.

A mistake I made was making the water rectangles, as this meant when the bird drew it didn't 'stick' to the canvas, as the water was being drawn over it (unfortunately I didn't capture it here, but I hope you can visualize what I mean). The solution to this was pretty simple, to make the water a line rather than a rectangle, that way the bird would be drawn over the water.

You can access this code here:

Heart Beat.pdf

Download PDF • 187KB

Decision Time

After I had polished the code of my three ideas, I turned them into GIFs and gained some feedback from my peers to see which one I should move on with.

The majority liked the heartbeat ideas as well as the birds falling down. After mitigating bias, I believe that this idea is the most powerful visual, as well as the most accurate way to represent my stat. It also takes a more abstract approach and as a peer commented earlier that the statistic comes before the subject matter. This is more my design style, as I like that it is up to the viewers interpretation of the heart beat motif, that it works as one, or could relate to the circle of life, that we all flow on one line, but the statistic still works with the visual to guide the viewer. Therefore I will be moving ahead with the heart beat idea.

The GIF process

Once I was happy with my code the only thing left was to save it as a lot (and I mean a lot) of images to turn it into a GIF!

To do this, you write in a few lines of code that saves an image each time the code runs through.

And then my GIF was complete! Well... not quite.

When I put it into Photoshop, it ran very slowly, I was confused by this as it had a no delay timer so I wasn't sure why it was doing this. So I ended up having to turn it into a video to speed it up and then save it again as a GIF and this seemed to work fine.

So now my GIF was complete! Here it is again with my statement of intent.

I have tried to visualise the severity of this statistic by creating a connected heartbeat; a life line of the birds, as many species feed, flock, and fly together, when this number decreases it becomes much harder for the birds to survive. The heartbeat also creates a sense of ‘oneness’, such as in the ‘circle of life’ where all animals within an ecosystem are needed to keep it running smoothly. When this chain breaks high up on the trophic level, known as a trophic cascade, it can have devastating effects on the ecosystem. This is visualized through the water rising and claiming the birds, leaving only one behind. Not only does this represent the statistic literally, but also the decrease in marine biodiversity, the potential breaking of the 'circle of life' and an ecosystem that has been together for thousands of years.

References

Department of Conservation & Fisheries New Zealand, (2019). National Plan of Action - Seabirds 2020: Reducing the incidental mortality of seabirds in fisheries.

https://www.mpi.govt.nz/dmsdocument/3962/direct#:~:text=The%20National%20Plan%20of%20Action,of%20seabirds%20in%20our%20fisheries.&text=The%20NPOA%20Seabirds%202020%20is,a%20national%20plan%20of%20action.

Ministry for the Environment, (2012). Conservation status of seabird species and subspecies (2012). https://data.mfe.govt.nz/table/52511-conservation-status-of-seabird-species-and-subspecies-2012/data/

New Zealand Birds Online. https://www.nzbirdsonline.org.nz/

Pinterest. https://www.pinterest.nz/eloa179/240-assignment-1/

Stats NZ, (2019). Conservation status of indigenous marine species.

https://www.stats.govt.nz/indicators/conservation-status-of-indigenous-marine-species