User:Zuhui/SI26/Storybook

From XPUB & Lens-Based wiki

Progress

first sketch

Simple structure

Using display: flex
  1. Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count.
  2. Expanding the window brings words back, also at random, reconstructing the sentence into a new structure each time—never quite the same as before.


do tigers melt like butter in the forest?
do tigers melt like in the forest?
do tigers melt in the forest?
do tigers melt the forest?
tigers melt the forest?
tigers melt the forest
melt the forest
melt forest
melt




Peekaboo


In our last Monday class discussion(SI26 WEEK2) on display: flex, we talked about its adaptability and how its mechanism resembles other design practices --like curtains or even a peacock’s majestic display.

Building on this, I started thinking about the game of Peekaboo.

As the face disappears and reappears, its expression constantly shifts(🙂→🤪→🤨→😆→🙄).
Similarly in my initial sketch of display:flex, content doesn’t just move --it transforms.
Expanding and shrinking elements can reveal, hide, reorder information, and creating compositions that change dynamically, just like in a game of peekaboo.




Do tigers melt like butter in the forest?


I want to try this exercise with a first sentence of question that I derived from a children’s book called The Story of Little Black Sambo published in UK 1899. Until not long ago, this book was quite popular in some countries like Korea and Japan and can still be found on bookshelves today. But for those familiar with it, it’s notoriously known for being blatantly racist due to its illustrations, its moronic backdrop, and the name of its characters.

Keeping this in mind, I find a kind of meta-ironic profundity in the story, completely independent of the author’s intention.

[more context to come]





How I want to develop it

  • I'm envisioning some kind of a storybook that user can save and even print out at the end.
  • Inspired by The House of Dust by Alison Knowles, I imagined adding random words as the browser window extends, rather than simply re-aligning previous words in the sentence as I did on my initial sketch.
This way, every time the user shrinks and then re-extends the browser window, a new word would subtly replace an old one--one at a time, gradually transforming the sentence with each interaction(of peekaboo).


Word-corresponding background illustration




Storybook in pdf


  1. A button that allows users to save the current state of the browser window --not to the local computer, but within the browser itself.
  2. Another button would then enable users to export these saved states as a PDF file, allowing them to print out each saved version of the browser window in chronological order.



drawing html/css structure

the main prompter

html

 <p id="sentence">
   <span class="do">do</span>
   <span class="tigers">tigers</span>
   <span class="melt">melt</span>
   <span class="like">like</span>
   <span class="butter">butter</span>
   <span class="in">in</span>
   <span class="the">the</span>
   <span class="forest">forest</span>
   <span class="?">?</span>
 </p>

css

#sentence {
    position: fixed;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    z-index: 999999999;
    text-align: center;
    font-size: 29px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color:rgb(0, 0, 0);
    white-space: nowrap;
}


naked stage:

html

<div id="stage">
//all the children divs that goes on the stage//
</div>

css

#stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99999;
}



Resource

Targeting

Word combination algorithm



Storybook in pdf

recommended by Joseph



Reference

recommended by Joseph


David Hockney stage designs

Hockney stage0.jpg
Hockney stage1.jpg
Hockney stage2.png
Hockney stage3.jpg
Hockney stage4.jpg