PROJECT B PREFLECTION

Part I       Project description

The Little World

2023

Creative Coding

Arial Ruijia Hu

ELEVATOR PITCH

 The Little World enables the participants to get a brief and direct feeling towards the social hierarchy. We all have our own stereotypical attitude towards certain social hierarchy, and we are always seeking for changes. This is why the society is developing——class struggle. But think about another question, are we really breaking the social hierarchy and can we truely break the social hierarchy? Is it possible to stay in chaos or utopia? From the graffiti and the characters’ inner emotions, we may find the answer by ourselves.

ABSTRACT

By clicking on the buttons, you can hear each character’s sound and see their inner expressions in a dialogue box.

EXPLORE IT HERE

FIRST PAGE SCREENSHOT

SECOND PAGE SCREENSHOT

THIRD PAGE SCREENSHOT

Part II       REFLECTION

1）Process: Design & Composition

The inspiration is from a children’s picture book called A House With A Hundred Floors Underground, so the whole form of my third page is presenting in a scrolling down way. The movie called the Hunger Platform represents the hierarchy in a jail, and it’s obvious especially in a vertical narrative form. In this case, rather than simply telling a story, I can do something profound but easy to understand, just like in my final version, using the graffiti to disclose the standard hierarchy.

What makes my project different is that I made the graffiti into moving motion and there are dialogues and sounds applied aside. So the whole project is somehow complete.

2）Process: Tecnical

·localStorage

This is where I tackled for a long time. At first, I thought the localStorage is used in each of the JS, but as it takes down variables or so called values, we need to understand a parent-chilldren relationship. All the buttons are on the same main page, however they shouldn’t affect each other.In this case, localStorage should be used it the main JS, at the same time be put into the single JS page where the function that each of the button control, so that it could be taken out whenever the button is triggered.

I think this is quite similar to the boolean function, you let something to be true, but when a criteria change, it’ll turn false. The basic sentence should be you let localStorage.setItem(“state”, 0), and by changing the values, you trigger different things.

·iframe

I learnt this when I was finishing my Taichi project, and as I have 16 canvas, I found I could fit it into my final project. But the difficult part, for me, is cancel the frames around the canvas inside the divs. Moon helped me with this and the visualization is definitely better.

·div

By using different css properties, I learnt how to make the divs repeat and varies.

·setTimeout

It’s important to know where to put setTimeout. In the project, I was supposed to let the dialogue box appear for only two seconds, and I put setTimeout into the function that controls the button, as you can imagine, it won’t work. The fault I made it’s actually the same as the one in localStorage, it should be put into the main JS rather than in those single ones.

·use buttons to switch the motions

Because I have more than 4 sketches for one character, and I intended to make an emotion switch using the buttons, so I wrote two functions to present those different states and an additional function for the button which contains the booleans. This doesn’t sound hard, however, it took me a long time to come up with this. Right now, I figured out that whenever it needs to change the mode, boolean could be used.

·css: hover

This element is what the judge pointed out, to make the whole process seem more coherent, when the mouse is on the link, the link should change into color blue and be underlined. So I went to W3school to search for it, then fix it in my css.

3）Reflection and Future Development

The comments during the interaction day and final presentation impressed me a lot.
On the interaction day, since my theme is about hierarchy and the boxes are fixed, someone suggested that it would be better if participants could drag those boxes by mouse to create their own hierarchy while the expressions of those characters would change. This resonant with my idea that we have our own interpretation towards hierarchy, and we could change it to make the better world.
On the final presentation day, I was provided with more perspectives. People may relate to pyramids when talking about hierarchy, then why not use triangular pyramid to illustrate the idea? As 16 canvases together is a huge workload, then why not try to use specific ones so that the project would be more delicate and more focused. Also, when the participants trigger nothing, the first page and the third page are all black and white, it would be better to set the background of the second page to be black and white. The bouncing balls are cute, it would be nice if sounds would be generated when they bounce off. Clicking is necessary, but it could be clicking inside anywhere else in the box.

For future developments, I would seriously take the advice above. I notice that the interactions are too plain, so more chemical reactions could happen between different canvases, they can talk to each other!

All in all, IMA projects never end!!!

4）Credits & References

When I was exploring localStorage, I went to github to find resources, but barely understood them. And here are the references.

jeromegn/Backbone.localStorage: A localStorage adapter for Backbone.js (github.com)

localStorage/storage.js at master · machao/localStorage (github.com)