User:Zuhui/SI26/Storybook: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(27 intermediate revisions by the same user not shown)
Line 6: Line 6:
: Using <code style="font-size: 13px;>display: flex</code><br>
: Using <code style="font-size: 13px;>display: flex</code><br>
#Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count.
#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 at random, reconstructing the sentence into a new structure each time—never quite the same as before.
#Expanding the window brings words back, also randomly, reconstructing the sentence into a new structure each time.
<br>
<br>
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
Line 20: Line 20:
</div>
</div>
<br><br><br>
<br><br><br>
<center><h4 style="font-size: 16px;">Peekaboo</h4></center>
<center><h4 style="font-size: 16px;">Do tigers melt like butter in the forest?</h4></center>
<br>
In our last Monday class discussion([[User:Zuhui/SI26/Weekly log#WEEK 2 |SI26 WEEK2]]) on <code style="font-size: 13px;>display: flex</code>, 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 '''[[User:Zuhui//Glossary#Peekaboo| Peekaboo]]'''.
: As the face disappears and reappears, its expression constantly shifts(🙂→🤪→🤨→😆→🙄).
:: Similarly in my initial sketch of <code style="font-size: 13px;>display:flex</code>, the alignment of words in the sentence shifts as it disappears and reappears.
::: Expanding and shrinking the browser window can reveal, hide, reorder information, and creating compositions that change dynamically.
<br>
<br>
<br>
<center><h4 style="font-size: 16px;">Do tigers melt like butter in the forest?</h4></center><br>
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.
<br>
<br>
<br>
<br>
<center>[more context to come]</center>
<center>'''[[User:Zuhui//Drafts/Do Tigers Melt Like Butter in the Forest? |[context here]]]'''</center>
<br>
<br>
</div>
</div>
Line 46: Line 32:
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
<div style="text-align: left; border: 1px solid black; padding: 30px;" >
* 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.<br>
* 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.<br>
* Inspired by [[User:Zuhui//Personal Reader/House of dust |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.
* Inspired by [[User:Zuhui//Personal Reader/House of dust |The House of Dust by Alison Knowles]], <s>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.</s>
:: 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).
<br>
<br>
<div style="display: flex; flex-wrap: wrap; width: 100%; height: auto;">
<div style="display: flex; flex-wrap: wrap; width: 100%; height: auto;">
Line 59: Line 44:
<center><h4 style="font-size: 16px;">Storybook in pdf</h4></center>
<center><h4 style="font-size: 16px;">Storybook in pdf</h4></center>
<br>
<br>
# A button that allows users to save the current state of the browser window --not to the local computer, but within the browser itself.
# 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 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.
# 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.
</div>
</div>
</div>
</div>
</div>
</div>
==To do==
==To do==
I should treat the continuously restructured sentences(the main prompter) not just as a block of text, but understand as a flexible, variable-based structure that logically aligns with CSS’s spatial and contextual interpretation.
 
<br><br>
===[[/Code to work |Code to work 1]]===
The following analysis is needed:
▲workflow<br>
I made the first sketch by using an ai chatbot but I want to write the code without it from the beginning.
<br>
<br>
 
===[[/Code to work 2 |Code to work 2]]===
▲with help from Doriane and Joseph<br>
try with the simplest approach to structure html/java script, and richer iterations in CSS
<br>
<br>
<br>
<br>
'''For CSS drawing, following analysis is needed:'''
* identify the basic structure and elements of the sentence
* identify the basic structure and elements of the sentence
* define the possible combinatorial variables  
* define the possible permutational variables  
* structure these combinatory variables in a way that CSS can correspond  
: ↳ structure these permutational variables in a way that CSS can correspond  
* plus, I’d like to try incorporating the theatre metaphor from [[User:Zuhui/SI26/Weekly log/Why is CSS So Weird | ‘Why CSS is so weird’]] into the work:
: ↳ <s>plus, I’d like to try incorporating the theatre metaphor from [[User:Zuhui/SI26/Weekly log/Why is CSS So Weird | ‘Why CSS is so weird’]] into the work:
: regarding the browser window as a stage and apply the sentence analysis and structure accordingly.
:: regarding the browser window as a stage and apply the sentence analysis and structure accordingly.</s>
<br>
<br>
{| class="wikitable"
{| class="wikitable"
|+ identification
|+ identification
|-
|-
! words !! grammarly feature !! semantic !! stage role
! words !! grammarly feature !! semantic
|-
|-
| do || style="background-color: #ffffff;" | auxiliary verb || style="background-color: #ffe5fe;" | check for action || ??
| 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 || object
| tigers || style="background-color: #ffffff;" | noun || style="background-color:  #d4ffd4 ;" | agenct
|-
|-
| melt || style="background-color: #ffffff;" | verb || style="background-color:  #d4ffd4 ;" | action || effect
| melt || style="background-color: #ffffff;" | verb || style="background-color:  #d4ffd4 ;" | action
|-
|-
| like || style="background-color: #ffffff;" | preposition || style="background-color: #f3ffc8;" | comparison standard || condition modifier?
| like || style="background-color: #ffffff;" | preposition || style="background-color: #f3ffc8;" | comparison standard  
|-
|-
| butter || style="background-color: #ffffff;" | noun || style="background-color: #f3ffc8;" | comparison target(object) || object
| butter || style="background-color: #ffffff;" | noun || style="background-color: #f3ffc8;" | comparison target(object)  
|-
|-
| in || style="background-color: #ffffff;" | preposition || style="background-color: #ffeade;" | spatial relationship || positioning
| in || style="background-color: #ffffff;" | preposition || style="background-color: #ffeade;" | spatial relationship  
|-
|-
| the || style="background-color: #ffffff;" | determiner || style="background-color: #ffeade;" | - || -
| the || style="background-color: #ffffff;" | determiner || style="background-color: #ffeade;" | -  
|-
|-
| forest || style="background-color: #ffffff;" | noun || style="background-color: #ffeade;" | context || backdrop
| forest || style="background-color: #ffffff;" | noun || style="background-color: #ffeade;" | context  
|-
|-
| ? || style="background-color: #ffffff;" | punctuation || style="background-color: #ffe5fe;" | sentence type || ??
| ? || style="background-color: #ffffff;" | punctuation || style="background-color: #ffe5fe;" | sentence type
|}
|}
* [https://dictionary.cambridge.org/grammar/british-grammar/# cambridge dictionary #grammar]
* [https://dictionary.cambridge.org/grammar/british-grammar/# cambridge dictionary #grammar]
<br>
<br>
<br>
<br>
===drawing html/css structure===
 
<div style="float:right; font-size:25px;">[[:#top|▲]]</div>
===[[/Permutational variables|Permutational variables]]===
====the main prompter <code>p id="sentence"</code>====
▲ a long list of css selectors just using next sibling combinators, assigning them with lexical significance so that css can interpret and reflect these meaning somehow.<br>
'''html'''
<syntaxhighlight lang="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>
</syntaxhighlight>
'''css'''
<syntaxhighlight lang="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;
}
</syntaxhighlight>
<br>
<br>
====naked stage: <code>div id="stage"</code>====
'''html'''
<syntaxhighlight lang="html">
<div id="stage">
//all the children divs that goes onto the stage//
</div>
</syntaxhighlight>
'''css'''
<syntaxhighlight lang="css">
#stage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99999;
}
</syntaxhighlight>
<br>
<br>
====what goes onto the stage (child divs of id="stage")====
'''html'''<br>
using both data-* selector and class to target better in css and javascript
<syntaxhighlight lang="html">
<div data-space="forest" class="forest"> //or, data-object="forest" for the occasion when forest becomes an object//
  <div data-object="celestial" class="celestial"></div>
  <div data-object="tigers" class="tigers"></div>
  <div data-object="butter" class="butter"></div>
  <div data-effect="melt" class="melt"></div>
</div>
</syntaxhighlight>
'''css data-*selector'''<br>
<syntaxhighlight lang="css">
[data-space="forest"] {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    z-index: -99998;
    background-color: green;
}
[data-object="forest"] {
    width: 300px;
    height: 300px;
    margin: auto;
    /*margin-top: 50%;*/
    background-color: green;
}
[data-object="celestial"]{


}
===[[/CSS 1|CSS 1]]===
 
[data-object="tiger"]{
 
}
 
[data-object="butter"]{
 
}
 
[data-effect="melt"]{
 
}
</syntaxhighlight>
'''css .hide[data-*]''' for javascript to target
<syntaxhighlight lang="css">
.hide[data-space]{
  background-color: transparent;
  background-image: none;
}
.hide[data-object]{
  display:none;
}
.hide[data-effect]{
 
}
</syntaxhighlight>
<br>
<br>
<br>
<br>
===javascript 1===
I made the first sketch by using an ai chatbot but I want to write javascript without it from the beginning. As Fred recommended, write down what needs to be done step by step and try to translate the logic into javascript language.<br><br>
: 1. store all <code>span</code> element in a variable (I'm using <code>span</code> under <code>p</code> tag only for the words).
: 2. make another variable to store the (randomly)removed words.
:: ↳ so that I can bring them back(randomly) whenever the screen size increases.
: 3. make javascript aware of the browser screen size changes, so the words respond accodringly.
:: ↳ the words should disappear when the screen size decreases and reappear when it increases.
::: ↳ look up <code>window.innerWidth</code>, I'm only going to decrease and increase the width.
:::: ↳ look up <code>"resize"</code> function in <code>window.addEventListner()</code>
:::: ↳ need variables for screen size calculation. also look up <code>Math.-</code> methods.
: 4. make two different functions, one for removing random words as the screen size decreases, and the other for bringing back random words as the screen size increases. it has to work with resize eventlistener.
:: ↳ cap the minimal amount of word to at least 1, so the screen doesn't remove all the words.
::: ↳ if word > 1, keep on removing the words, but if the word is == 1, then stop removing the words, and start bring the words back as the screen increases.


=Resource=
=Resource=
<div style="float:right; font-size:25px;">[[:#top|▲]]</div>
===Javascript===
* [https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Classlist-add,remove,replace,toggle]
* [https://developer.mozilla.org/ko/docs/Web/API/Window/innerWidth window.innerWidth (its unit is pixel)]
* [https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event window.addEventListener "resize" mdn]
: [https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_dom window.addEventListener "resize" w3c]
* [https://www.w3schools.com/js/js_random.asp Math.random()]
* [https://www.w3schools.com/jsref/jsref_pop.asp pop()]
* [https://www.w3schools.com/jsref/jsref_push.asp push()]
<br>
<br>
===Targeting===
* [https://www.w3schools.com/tags/att_data-.asp html data-* attribute]
* [https://www.w3schools.com/cssref/css_selectors.php css selectors]
* [https://www.w3schools.com/cssref/css_ref_pseudo_classes.php css pseudo classes]
* [https://www.w3schools.com/cssref/css_ref_pseudo_elements.php css pseudo elements]
<br>
<br>
===Word combination algorithm===
===Word combination algorithm===
* look for Permutation function
* look for Permutation function
Line 276: Line 126:
* [https://www.yvon-lambert.com/products/enzo-mari-autoprogettazione?srsltid=AfmBOoohphcrCHGLBSDrn5bsJboX2pSp--Y0_kV7_If3j6tT64TKqt_D Autoprogettazione? by Enzo Mari]
* [https://www.yvon-lambert.com/products/enzo-mari-autoprogettazione?srsltid=AfmBOoohphcrCHGLBSDrn5bsJboX2pSp--Y0_kV7_If3j6tT64TKqt_D Autoprogettazione? by Enzo Mari]
<br>
<br>
David Hockney stage designs
<div style="display: flex; flex-wrap: wrap;">
<div style="margin: 5px;">[[File:Hockney stage0.jpg|thumb]]</div>
<div style="margin: 5px;">[[File:Hockney stage1.jpg|thumb]]</div>
<div style="margin: 5px;">[[File:Hockney stage2.png|thumb]]</div>
<div style="margin: 5px;">[[File:Hockney stage3.jpg|thumb]]</div>
<div style="margin: 5px;">[[File:Hockney stage4.jpg|thumb]]</div>
</div>
<div style="float:right; font-size:25px;">[[:#top|▲]]</div>
<div style="float:right; font-size:25px;">[[:#top|▲]]</div>

Latest revision as of 10:11, 15 March 2025

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



Permutational variables

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

CSS 1



Resource

Word combination algorithm



Storybook in pdf

recommended by Joseph



Reference

recommended by Joseph


Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Zuhui/SI26/Storybook&oldid=291056"