User:Zuhui/SI26/Storybook: Difference between revisions
< User:Zuhui | SI26
(→To do) |
|||
Line 77: | Line 77: | ||
! words !! grammarly feature !! semantic | ! words !! grammarly feature !! semantic | ||
|- | |- | ||
| do || style="background-color: #ffffff;" | auxiliary verb || style="background-color: #ffe5fe;" | | do || style="background-color: #ffffff;" | auxiliary verb || style="background-color: #ffe5fe;" | check for action | ||
|- | |- | ||
| tigers || style="background-color: #ffffff;" | noun || style="background-color: #d4ffd4 ;" | agenct | | tigers || style="background-color: #ffffff;" | noun || style="background-color: #d4ffd4 ;" | agenct |
Revision as of 18:42, 8 March 2025
Progress
first sketch
Simple structure
- Using
display: flex
- Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count.
- 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?
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
- 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.
- 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 structuring 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.
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 |
Permutational variables
Resource
Word combination algorithm
- look for Permutation function
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