As we live in today's world, climate change is getting real.
Climate change happened because of natural processes such as volcanic activities or cyclical ocean patterns
that are triggered because of human activities, primarily fossil fuel burning - which connects to the global warming.
The effects is on our planet now. So, let's raise an awareness to stop global warming that triggers the climate change.
As I mentioned before, I chose this Climate Change topic to raise an awareness to us as human beings that live together in this earth. In this case, I only used the latest data from year 2001-2008. And also I decided to only use the temperature data because in these days, the earth is getting hotter each day and the easiest effect that happened is about the melting glaciers on the North Pole. The design I used here is just simple bar graph design because I don't want the viewers to be very loaded with things, and just focusing on the data that are listed on the bar graph.
Original data source
The first idea I had in mind is to create a line graph, with all 9 factors that is listed on the data itself, and using a keypressed function. But as I keep testing out, I feel like I like bar graph better because it's easier to read in my opinion. And also because the number's data is very varied.
So I decided to make a bar graph rather than line graph.
For this time I made the bar graph changes its color everytime
it's being refreshed.
Here I just put 1 data (just to test it out first).
Inserting the data and creating the bar graph is still managable.
The issue here is basically some little details; like it's hard to make the texts
to be at the center of the frame. I don't know why but some of my friends also faced the same problem.
The other concern here is I feel like it's too bland in a way.
I don't like the white background and the line at the bottom of the bar
and the arrow that shows the month. So I changed it a hundred-eighty degrees.
The image below is the finalized.
I made just only one graph to see at one time. And each graph has
different colors to differentiate it with the others.
I used Krungthep font for the titles because I feel
this font shows a certain strong and bold vibes.
And it's all using mouse pressed to change frames.
But before that, I also tried a layout like this (image below) but it's not really working - in my opinion - because there's too many things happening and our eyes can't really rest.
And there's no need to put the same text over and over again for every class. So I decided to put the context texts at the very beginning frame, then once the mouse is pressed, it only shows the graphs.
The mouse pressed interactive is good, the colors chosen for the graphs also not too vibrant or soft. It's better to make a so-called home page to put the contexts on rather than put it on the side of the graphs, so we can only focus on one thing each time.
Rather than just do a single frame (like every graph in the same page), I succeeded on making a little interactive there using mouse pressed with some help and discussion with a friend. So the whole experience won't be that bored and so rigid, and it does take the audience's interactivity.
When I was searching for some ideas, I suddenly found my old sketch where I was using mouseX and mouseY to move things. So I used this function and I added the mousePressed function also. The colors I chose are very vibrant to show the heat of the climate change because I used the temperature data so it should make sense.
I also use the idea from the p5js example. Click here to see.
The main issue is about the alignment for the text.
At the very first time, I wanted the text to be at the center
of the frame because I want to highlight the sentence there.
But as I consulted with Yasser, he told me that our eyes are so distracted because the interactive
game play is already good.
First sketch:
The texts I put here is not the finalized one. It's only for 'reference'.
So I changed the text to be at the right side because Yasser mentioned it works better on the right side. But I tested out both left and right aligned.
I feel like the right aligned text is better because from my side, because of right-handed, it feels like it doesn't cover up too much the game play area. In my opinion, our eyes are not that distracted with the texts (like the left aligned one).
Along side testing out the alignment, I also tested out which font looks better. And I found out Ayuthaya is much better than Futura (also to make it similar to the bar graph).
The interactive game play is okay, but what can be changed is the color of the heat (the circles) because at the first try I just make it orange to red. So I added another color; yellow, to make it more variable. Using mousePressed to 'cool down' the heat is also fun.
This sketch is very fun because we only need to mouse our cursor and we somehow wanted to cover the whole page
then we pressed our mouse to like erase it somehow.
I found out it's a satisfying thing to do.
The data differences is very little so it keeps moving upwards.
The texts below (the numbers) are supposed to be in black.
The differences is very little decimals.
Left-aligned texts.
Center-aligned texts.
Right-aligned texts.
Was thinking to create a background, using bars, but it's failed because it's not aesthetic now.
Center-aligned texts distract the whole experience.