Title: Theory / Unimportant / CS / Descriptive / Material / Design / Environment

Name: Surface
Definition: light
Page: https://material.io/design/introduction#theming
Context: Material
Definition2: cast shadows
Conjdef: shown with
Intuition: a real life surface in an app
DefType: A material which is 1dp thick, allowing to simulate depth in an app

Question: What is the resolution of material?
Answer: Infinite
Page: https://material.io/design/introduction#theming
Context: Material

Question: What is the depth of a content on a surface?
Answer: 0. No depth
Page: https://material.io/design/introduction#theming
Context: Material

Question: How does surface interaction impact its content
Answer: As we want. Content may follow or may remain constant
Page: https://material.io/design/introduction#theming
Context: Material

Question: How does input and interactions interact with a surface
Answer: All effect remains in the surface on which it occurs
Page: https://material.io/design/introduction#theming
Context: Material

Question: How does multiple surface interact
Answer: They can't be at the same place. They can be one on top of the other, or near one other
Page: https://material.io/design/introduction#theming
Context: Material
Answer2: They can't pass through each other. That is, the z-order is fixed
Answer3: They can coordinate their motion https://kstatic.googleusercontent.com/files/ea5e59f85009b288a3be84918b3d34c79d145abfdbdccfa96676f55f03ac6edf364ed618c846864b9cc0614cb68a18bcf4ab60266647ecbfc2e32959c512f3b4

Question: How to create new surfaces
Answer: Change in opacity
Page: https://material.io/design/introduction#theming
Context: Material
Answer2: Change in size
Answer3: Change in position

Question: What can change can affect a surface
Answer: Change opacity everywhere or on a portion
Page: https://material.io/design/introduction#theming
Context: Material
Answer2: Change shape
https://kstatic.googleusercontent.com/files/81ab4657305116c838f7bbba7cd02af157d6d25a2f651a256433a2b1bfbf56185a68a89e5e75080d7c5bda133cf8215fa8a3e562f820288edf44dd7f63fc17b8
Answer3: grows and shrinks alon its plane
https://kstatic.googleusercontent.com/files/bcc15a1e8164376b25f0988f3a88434ba20c4cf2538d2136646df69e168fb4fffdd57589276d4fa0f26f8864dd0b73b57b4af04cd5e8f8506cde8d00b4b0a99b
Answer4: Spliting and joining another surface https://kstatic.googleusercontent.com/files/e7aa09d23bebf7f9482f29e5d1d6473a67987098459cb7f2bf7bb530255701a5b14e3c59e824f1c679d20853971830ad29413a844f5ce83d1ecc0c1a9ad2f2cd
Answer5: Move along various axis https://kstatic.googleusercontent.com/files/5b2d8d9725f24ba28ca5c5b2dc8e6d0780da977c830cdb84fe3cbf221128532b410ad414b4a950bdeef167f8f2f15a3f8eb64e22c0e5598e39d331a2ce2cfe32

Question: What's the possible size of surface
Answer: Rigid surface
Page: https://material.io/design/introduction#theming
Context: Material
Answer2: Strechtable surface
Answer3: Panable surface

Name: Rigid surface
Definition: A surface that remain the same size through all interactions
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material

Name: Stretchable surface
Definition: A surface that can grow or shrink along one or more edges up to a size limit, then behave as rigid surfaces.
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material
Example: A button "read more" extend a card to show more text
Extra: https://kstatic.googleusercontent.com/files/d46e2ac32b8b9657cc1b37e4bd7795b446d05a3bafdb08194d934f6a09624165c59551a143c88c538e6f46c525d0ca9d2143386f7489e9fc32295b2b17ddb327

Name: Pannable surface
Definition: A surface that remain the same size throughout interactions. They can display additional content upon scrolling within the area, until reaching a content limit. When this limit is reached, they behave as rigid surfaces in that scroll direction.
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material

Name: Composite surface
Definition: A surface that contains multiple surfaces
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material

Question: How can surfaces move?
Answer: Either in all direction (e.g. click and drag)
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material
Answer2: in a single direction at a time (scrolling)
Answer3: not moving at all (top bar)

Question: Danger with transparent surfaces
Answer: It may be hard to see where surface start/end
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material
Answer2: If surface contains text, it may be hard to read

Name: Scrim
Definition: temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent
Page: https://material.io/design/environment/surfaces.html#attributes
Context: Material

Name: Elevation
Definition: the relative distance between two surfaces along the z-axis.
Page: https://material.io/design/environment/elevation.html
Context: Material surface
Intuition: Impact what hides what (and shadow)

Name: Resting elevation of the component C
Definition: Starting elevation values given to the component C by default
Page: https://material.io/design/environment/elevation.html
Variables: C a component
Context: Material surface
Intuition: Helps indicating whether something is interactive, e.g. by adding shadow to actionable elements on top of background

Name: Dynamic elevation offset of the component C
Definition: The change of elevation of C during an interaction
Page: https://material.io/design/environment/elevation.html
Variables: C a component
Context: Material surface
Example: When an element is clicked and dragged, it gets more elevated so that it is on top of everything else

Question: What occurs if, during a change in evalutaion, it leads to intersection in surfaces?
Answer: The surface that would be collided should disappear or move away
Page: https://material.io/design/environment/elevation.html
Variables: C a component
Context: Material surface
Example: A floating button will diminish up to size 0

Name: The edge of the surface C
Definition: What indicates the end of a surface
Page: https://material.io/design/environment/elevation.html
Variables: C a component
Context: Material surface
Example: Shadow
Example2: Having a color distinct from the surface below

Name: Shadow of C
Definition: A dark surface on the edge of C, which is projected on surface behind.
Page: https://material.io/design/environment/elevation.html
Variables: C a component
Context: Material surface

Question: When can a surface move another one
Answer: Both surfaces should have the same elevation
Page: https://material.io/design/environment/elevation.html
Context: Material surface

Question: How to show that a surface elevate itself
Answer: Scaling the below surface down
Page: https://material.io/design/environment/elevation.html
Context: Material surface
Answer2: having below surface overlapped
Answer3: Parallax

Name: Parallax
Definition: When two surfaces move, the one behind move more slowly, to indicate it is further away
Page: https://material.io/design/environment/elevation.html
https://kstatic.googleusercontent.com/files/3089f23326472c311f9984f2f05e1bd920bd79b75220bf112307d64f6836f5c8e573cc8440bdce2a09b3da1059262dd7e578645bb642c457e0d071c899de7a52
Context: Material surface

Name: Coplanar surfaces
Definition: Surfaces with the same elevation
Page: https://material.io/design/environment/elevation.html
Context: Material surface

Name: key shadow
Definition: A shadow created by a key light
Page: https://material.io/design/environment/light-shadows.html#light
Context: Material surface

Name: key light
Definition: Sharp
directional light
Page: https://material.io/design/environment/light-shadows.html#light
Context: Material surface

Name: ambiant light
Definition: Light coming from all angles
Page: https://material.io/design/environment/light-shadows.html#light
Context: Material surface

Name: ambiant shadow
Definition: A shadow of an ambiant light
Page: https://material.io/design/environment/light-shadows.html#light
Context: Material surface