Lucy Lambert

Coding for Creative Practices. 197.119 hover over post to read annotations

[lucycreativecoding2020]

The Uninhabitable Earth, A story of the Future

This set of posters are showcasing the effects of climate change over time globally. Each poster is able to be viewed as an individual piece alone but work better as a set because is shows different data from across the board. 

Poster One shows the rise with Earths global temperature. 

Poster two shows the rise in Global Sea level. 

Poster three shows the rise in CO2 emissions globally.

For the posters to work together I have used the same font for all three and included the title “An uninhabitable Earth, the story of our future” in the same spot on each poster. I have also trie to stick with a simple colour palette; all three posters look cohesive together but could also work well as a stand alone piece.

This series was inspired by the book ‘The Uninhabitable Earth, A story of the Future’ by David Wallace-Wells. Quotes have been pulled from paragraphs of the book. Each poster was inspired by a chapter from this book.

I have made a post explaining the process I went through to make each poster; what I learnt each time I tried a new piece of code.

[lucycreativecoding2020]

Entourage images

In the ideal world these posters would be shown in a set of three. To have the full impact the should be shown in the set. Equally though each poster could be displayed individually because they all show different data. I’d like them to be displayed in public areas such as bus stops, train stations and malls so that they get the most exposure from all walks of life. These posters were inspired by the book ‘An Uninhabitable Earth, a story of our future’ so I would like to use these posters as alternate covers to promote the book.

[lucycreativecoding2020]

CO2 Emmisions ~poster 3 final~

This is my third and final poster of the series. I wanted to do something different with the way I displayed this data. Each Verticie displays the same data but I wanted to add more of them to fill in the page; otherwise it looks incredibly bare and boring. I like the fact that this could be seen as a design in itself. 

for these lines, I wanted the layers to look more random than symmetrical so I inputted each line of code as many times as I wanted the vertices to be displayed. This can be seen in the second image below, 

e.g 

line(0,1000, co2.getFloat(i,1)*1,co2.getFloat(i,1)*4);

line(1240,900, co2.getFloat(i,1)*1,co2.getFloat(i,1)*4);

I used the code ‘text(”text” w, h)’ to add the text in for this poster rather than adding it in using photoshop. Once I figured out this, the rest came rather easily. I added a PFont line in my code which gave me access to all the fonts I have installed in my computer, With this, I made a print Array which showed me what number represent each font; from there i simply added that number into ‘myFont = create font(”name of font”, size);’ line of code and now my text was a lot more aesthetically pleasing to look at.

[lucycreativecoding2020]

Rising Sea Levels ~poster 2 final~

This was the second poster I coded; This one saw me trying a lot of new things with code compared to the first. 

Firstly i used the data as displayed it with the size of each circle compared to the previous. Originally each circle was stacked on top of each other, (they still are) but i changed the opacity of the circles so that you can now see the ones displayed underneath. this was changed using the fill tool “fill(98,184,255,5);” the last variable changes the opacity of the thing being filled.

After that the poster was looking pretty basic and I wanted to do something with the background. I decided to display the actual numbers of data to make it look like something from the matrix with lines of code flashing past. Each line of text i wrote displays all of the numbers in columns, however i couldn’t figure out how to put the whole thing in a for loop to have the numbers repeat across the page. So to tackle this I just had to manually add each line and change the x position of each line of data.This was annoying but worked out in the end, I’m glad it was only for the background because it meant that it wasn’t the main focus of my poster, only a detail meant to fade into the background (which i did by lowering the opacity of the text colour)

   text(seaLevel.getFloat(i,1), 0, i*15);    text(seaLevel.getFloat(i,1), 50, i*15);    text(seaLevel.getFloat(i,1), 100, i*15);    text(seaLevel.getFloat(i,1), 150, i*15);

For the text on top, like the Co2 poster I used ‘text(”text” w, h)’ to add the text in for this poster rather than adding it in using photoshop. Once I figured out this, the rest came rather easily. I added a PFont line in my code which gave me access to all the fonts I have installed in my computer, With this, I made a print Array which showed me what number represent each font; from there i simply added that number into ‘myFont = create font(”name of font”, size);’ line of code and now my text was a lot more aesthetically pleasing to look at.

[lucycreativecoding2020]

Rising Global Temperature ~poster 1 final~

This was my first piece of code I created using external data inputs so I tried to make it as simple as possible; with this poster in particular I created the words and colours in photoshop unlike the other two which I coded. This was quite a basic first piece; the only part I actually coded was the stroke weight and distance between each line of data. The stroke weight changes depending on the different data integers. e.g.

strokeWeight((globalTemp.getFloat(i, 2)+1)*5);

and the each line is then spaces out by 13px to give the piece an even feel. 

After this was coded I put the poster into photoshop and added the gradient to enforce what the data is showing. The change in earth temperature.

[lucycreativecoding2020]

poster three

This poster again follows the more simple route in terms of aesthetic purposes.

The focus of this piece is the blue vertices, with each blue lines gap varying slightly depending on the data, some are very close together where others have much more clear gaps.

I added the paragraph of text to really pack a punch about what the data actually means in a real life context.

i need to focus now on a way to tie all of the posters together even more so than just the same typeface and overlay. this could be done with a  common colour, typographic treatment, layout, border..

[lucycreativecoding2020]

poster two update

This poster has a more muted and simplistic theme..

The circles are the main focus of the piece and I tried to draw the eye to them by adding the focus dates where big changes occurred. This just reinforces the changes in opacity with the growing circles.

In addition to kept the actual statistics in a repetitive pattern underneath the circle in the background. I kept the numbers really muted because I didn’t want them to be the focus of the poster.

I’ve kept the text very simple; originally all photoshop but I decided to try my luck and code some parts into it!

[lucycreativecoding2020]

Poster One update.

I decided to pull back from the other design as I couldn’t find a way to make the series streamlined. By using the same font and overlay it gives the piece some continuity. I also prefer the simplicity.

I added the title of what the date represents and also added timestamps to show the heat increase over time.

below is the code i used for to showcase my data.

With this piece I learnt how to change the stroke weight depending on the data variables, i also  

[lucycreativecoding2020]

poster 2 progress

sea level rising.

This poster had me stuck for a good while. 

I had trouble putting the data and relating it to the size of the circle, once i figured that out all of the circles were stacked on top of each other meaning you couldn’t tell them apart; by changing the opacity it meant that you can now see each layer underneath.

In addition to this I added the actual statistics in a pattern of sorts underneath the circle in the background. The code for this (second photo below) was very repetitive because I couldn’t figure a way to repeat the code in a single line. I repeated the code and gave each line a 50 px difference so the data was able to be read. I than muted the numbers a whole lot because they were vey dark and I didn’t want them to be the focus of the poster.

I added text on top but am unsure whether I will keep it in for the final design.

below is the code I used for this design.

I learnt how to add specific fonts/font library into my code. Giving me a lot more freedom over text.

[lucycreativecoding2020]

poster one final (?)

This first poster is showcasing the rise in earths temperature since 1880.

For my process I began with Data entry, which I then converted into a csv file. After that I imported that data into my processing file. It took me a while to figure out which part of the code I needed to slot the data input into. I first tried to do it in terms of the line length but quickly changed it to the stroke weight of each line; If the temperature was a higher number then the line would be thicker. This is a good way to visually show my data because with the inclusion of colour (in photoshop) it further shows the connction between the line thickness and earths temperature for the past 140 years.

Above is what my code outputted and then below is what it looks like when i added colour to the equation.

When it came to designing the actual poster I struggled a lot; I found it hard to get inspired but with a lot of Gradient maps and a thermometer made in processing I think i managed to make something that also reflects the rising temperatures along with rising pressure to change our ways.

I used text to show the years where there were spikes in temperature (1945) or just simple getting hotter (2000,2020). I also pulled a quote from the book that inspired me with this project (The Uninhabitable Earth, A Story Of the Future by David Wallace-Wells. Page 45.) 

I’m still unsure as to whether or not I still have changes to make to this poster but for now it will do and I shall move on to the next two. I’m still uncertain whether the other two posters in the series should be in relation to the data I used for poster one or rather just related to climate change also..

[lucycreativecoding2020]

Interm..

this is my design inspiration / element

[lucycreativecoding2020]

flow chart. get data > sort into 3 parts > design each poster > export into pdf > import into photoshop > polish up design > print out onto A3

after a lot of reading; i came to a fairly clear idea that i would focus on climate change, over a series of three posters. showcasing three different climate change problems.. 

Temperature, sea levels and Co2 emissions.

each poster will show its own data in a different way.

Artist examples

https://www.behance.net/gallery/40819275/Dear-Data?tracking_source=search_projects_recommended%7Cdata%20variables

This one is a favourite of mine because i like how the data is shown clearly but at the same time it is hand drawn. 

https://www.behance.net/gallery/93559085/Meltdown-Flags-Data-Visualization-AR-Web-Design?tracking_source=search_projects_recommended%7Cdata%20variables%20climate%20change

I like this design because its pulling imagery on a familiar thing that everyone recognises and then adds data to the image in an interesting way.

https://www.behance.net/gallery/100221385/Climate-Change-Infographic?tracking_source=search_projects_recommended%7Cdata%20variables%20climate%20change

This piece of data is exactly what i want to show but i’d want to do it more creatively. It shows the data clearly but is just a bit too boring for me; it needs to be able to be viewed as an art piece as well.

[lucycreativecoding2020]

TIME TO PANIC

NY times artice where I got my inspiration behind my posters... 

https://nyti.ms/2V2QLA2\

DATA SOURCES FOR 3X POSTERS

global temperature - https://data.giss.nasa.gov/gistemp/graphs/graph_data/Global_Mean_Estimates_based_on_Land_and_Ocean_Data/graph.txt

sea level rise - https://datahub.io/core/sea-level-rise#data

co2 emmisions - https://ourworldindata.org/co2-emissions

[lucycreativecoding2020]

Data Visualisation Poster Ideas

Climate change / planet temperature 

3 piece poster

circles for the stats because of the earth? 

above images sourced from : https://www.are.na/simon-abranowicz/music-design-gghkchkp7x0

2D print text then afterwards lazer cut stats and spray paint over top.

[lucycreativecoding2020]

Data Visualisation Example.

Cell Theory

The road I’d like to go down in terms of presentation of my so called data; when I get it eventually.

[lucycreativecoding2020]

Data Visualisation Example..

Letters I said in a week

Really love this presentation of data, looks very abstract if you don’t know what its about. Would like to turn data like this into a poster of sorts.

[lucycreativecoding2020]

3D printing idea

So i had the big idea to 3D print a decorative frame mould and then fill it with resin to finalise the design.

I was heavily inspired by Eser Gunduz who makes transparent frames and then paints over them, painting onto the frame and not just inside the canvas part.

I would need to create a mould and then use resign instead of directly 3D printing the frame because i would like it to be transparent.

I’m not sure how big i’d be able to make it or if i’ll even be able to code something like this but the thought of producing something like this really excites me.