User:Zuhui/SI26/Storybook

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 randomly, reconstructing the sentence into a new structure each time.

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

Do tigers melt like butter in the forest?

[context here]

How I want to develop it

• I'm envisioning a kind of storybook that users can save the screens they like in the browser. once they're done, they can export them as a multi-paged pdf file containing all the screens they've saved in the browser. even print them out in 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.

Word-corresponding background illustration

Storybook in pdf

1. A button(or a key) 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/key 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.

To do

Code to work 1

▲workflow
I made the first sketch by using an ai chatbot but I want to write the code without it from the beginning.

Code to work 2

▲with help from Doriane and Joseph
try with the simplest approach to structure html/java script, and richer iterations in CSS



For CSS drawing, following analysis is needed:

• identify the basic structure and elements of the sentence
• define the possible permutational variables

↳ structure these permutational variables in a way that CSS can correspond

↳ plus, I’d like to try incorporating the theatre metaphor from ‘Why CSS is so weird’ into the work:

regarding the browser window as a stage and apply the sentence analysis and structure accordingly.

identification

words	grammarly feature	semantic
do	auxiliary verb	check for action
tigers	noun	agenct
melt	verb	action
like	preposition	comparison standard
butter	noun	comparison target(object)
in	preposition	spatial relationship
the	determiner	-
forest	noun	context
?	punctuation	sentence type

• cambridge dictionary #grammar

Permutational variables

▲ a long list of css selectors just using next sibling combinators, assigning them lexical significance so that css can interpret and reflect these meaning somehow.

Resource

Word combination algorithm

• look for Permutation function
  • Step-by-Step Guide to Array Permutation Using Recursion in JavaScript

Storybook in pdf

recommended by Joseph

• try html2canvas for taking screenshot of the browser
• look for javascript: Window: localStorage property for storage. (this one stores locally, but try it anyway)

Reference

recommended by Joseph

• Little Blue and Little Yellow by Leo Lionni
• The Fable Game by Enzo Mari
• Autoprogettazione? by Enzo Mari

▲