summaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
authorJules Laplace <julescarbon@gmail.com>2021-04-16 22:51:10 +0200
committerJules Laplace <julescarbon@gmail.com>2021-04-16 22:51:10 +0200
commit7266b71c35d235ae0dc47a22b8589af9d23d1ddf (patch)
tree3cd8aaeb8472931bf6f3b46f6a9169f0d50cefe1 /frontend
parent4581c702dc8ce97e9af1f13dbcd6a6e9351b8614 (diff)
charles texts
Diffstat (limited to 'frontend')
-rw-r--r--frontend/site/projects/museum/subtitles.js120
-rw-r--r--frontend/site/projects/museum/views/titles.css19
-rw-r--r--frontend/site/projects/museum/views/titles.overlay.js45
3 files changed, 76 insertions, 108 deletions
diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js
index 33186f3..d9fd17b 100644
--- a/frontend/site/projects/museum/subtitles.js
+++ b/frontend/site/projects/museum/subtitles.js
@@ -5,136 +5,52 @@ export const SUBTITLES = {
popup: "stars",
audio_url: "/last-museum/static/uploads/3/audio/Frame01-24sec.mp3",
cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-04.png",
- subtitles: [
- "This ‘mountain of the sun’, as it is also called,",
- "is the equivalent of Meru, also entitled ‘white mountain’.",
- "Meru is encircled by a green belt,",
- "by the fact of being situated in the middle of the sea,",
- "and a triangle of light radiates at its peak.",
- "We have said that the zodiac’s two gates",
- "which are respectively the entry to",
- "and exit from the ‘cosmic cave’,",
- "and which certain traditions designate as",
- "the ‘gate of men’ and the ‘gate of the gods’,",
- "inevitably must correspond to the two solstices.",
- "Rene Guenon, <i>Lord of the World</i>, 1927."
- ],
+ text: "This 'mountain of the sun', as it is also called, is the equivalent of Meru, also entitled 'white mountain'. Meru is encircled by a green belt, by the fact of being situated in the middle of the sea, and a triangle of light radiates at its peak. / We have said that the zodiac’s two gates which are respectively the entry to and exit from the ‘cosmic cave’, and which certain traditions designate as the ‘gate of men’ and the ‘gate of the gods’, inevitably must correspond to the two solstices.",
+ credit: "René Guénon",
+ next: "stankievech-2",
},
'stankievech-2': {
title: 'An Exhibition of Clammy Solitude',
popup: "temple",
audio_url: "/last-museum/static/uploads/3/audio/Frame02-33sec.mp3",
cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-133.png",
- subtitles: [
- "If an artist could see the world through the eyes of a caterpillar",
- "he might be able to make some fascinating art.",
- "Each one of these secret dens was also the entrance to the abyss.",
- "Dungeons that dropped away from the eyes",
- "into a damp cosmos of fungus and mold-",
- "an exhibition of clammy solitude.",
- "The double aspect of Quetzalcoatl is less a person",
- "than an operation of totemic perception.",
- "Quetzalcoatl becomes one half of an enantiomorph",
- "(coatl means twin)",
- "in search of the other half.",
- "A mirror looking for its reflection but never quite finding it.",
- "The morning star of Quetzal is apt to be polarized",
- "in the shadowy reflection of the evening star.",
- "Robert Smithson, <i>Incidents of Mirror-Travel in the Yucatan</i>, 1969"
- ],
+ text: "If an artist could see the world through the eyes of a caterpillar he might be able to make some fascinating art. Each one of these secret dens was also the entrance to the abyss. Dungeons that dropped away from the eyes into a damp cosmos of fungus and mold-an exhibition of clammy solitude. The double aspect of Quetzalcoatl is less a person than an operation of totemic perception. Quetzalcoatl becomes one half of an enantiomorph (coatl means twin) in search of the other half. A mirror looking for its reflection but never quite finding it. The morning star of Quetzal is apt to be polarized in the shadowy reflection of the evening star.",
+ credit: "Robert Smithson",
+ next: "stankievech-3",
},
'stankievech-3': {
title: 'Superpositionality of the Hidden People',
popup: "hypercard",
audio_url: "/last-museum/static/uploads/3/audio/Frame03-24sec.mp3",
cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-134.png",
- subtitles: [
- "Down where the “Hidden People” live, inside their private rock dwellings,",
- "where humans who visit them can be closed in and never find a way out again.",
- "Iceland spar is what hides the Hidden People,",
- "makes it possible for them to move through the world",
- "that thinks of itself as “era,”",
- "provides that all-important ninety-degree twist to their light,",
- "so they can exist alongside our own world but not be seen.",
- "They and others as well, visitors from elsewhere, of non-human aspect.",
- "Thomas Pynchon, <i>Against the Day</i>, 2006"
- ],
+ text: "Down where the “Hidden People” live, inside their private rock dwellings, where humans who visit them can be closed in and never find a way out again. Iceland spar is what hides the Hidden People, makes it possible for them to move through the world that thinks of itself as “era,” provides that all-important ninety-degree twist to their light, so they can exist alongside our own world but not be seen. They and others as well, visitors from elsewhere, of non-human aspect.",
+ credit: "Thomas Pynchon",
+ next: "stankievech-4",
},
'stankievech-4': {
title: 'They Simply Pointed to the Sky',
popup: "vr",
audio_url: "/last-museum/static/uploads/3/audio/Frame04-30sec.mp3",
cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-135.png",
- subtitles: [
- "The Sumerian word AN.BAR, the oldest word designating iron,",
- "is made up of the pictograms ‘sky’ and ‘fire.’",
- "We shall do well to bear in mind",
- "the early religious significance attaching to aeroliths.",
- "They fall to earth charged with celestial sanctity;",
- "in a way, they represent heaven.",
- "This suggests why so many meteorites were worshipped",
- "or identified with a deity.",
- "Peoples worked with meteoric iron for a long time",
- "before learning how to use ferrous ores.",
- "...When Cortez enquired of the Aztec chiefs",
- "whence they obtained their knives",
- "they simply pointed to the sky.",
- "Mircea Eliade, <i>The Forge and the Crucible</i>, 1956",
- ],
+ text: "The Sumerian word AN.BAR, the oldest word designating iron, is made up of the pictograms ‘sky’ and ‘fire.’ We shall do well to bear in mind the early religious significance attaching to aeroliths. They fall to earth charged with celestial sanctity; in a way, they represent heaven. This suggests why so many meteorites were worshipped or identified with a deity. Peoples worked with meteoric iron for a long time before learning how to use ferrous ores. When Cortez enquired of the Aztec chiefs whence they obtained their knives they simply pointed to the sky.",
+ credit: "Mircea Eliade",
+ next: "stankievech-5",
},
'stankievech-5': {
title: 'The Glass Key',
popup: "magritte",
audio_url: "/last-museum/static/uploads/3/audio/Frame05-36sec.mp3",
cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-136.png",
- subtitles: [
- "Seeing the egg is impossible:",
- "the egg is supervisible just as there are supersonic sounds.",
- "No one can see the egg.",
- "Does the dog see the egg?",
- "Only machines see the egg.",
- "The egg is invisible to the naked eye.",
- "From one egg to another one arrives at God,",
- "who is invisible to the naked eye.",
- "The egg could have been a triangle",
- "that rolled for so long in space that it became oval.",
- "Is the egg basically a vessel?",
- "Could it have been the first vessel sculpted by the Etruscans?",
- "No.",
- "The egg originated in Macedonia.",
- "There it was calculated, fruit of the most arduous spontaneity.",
- "In the sands of Macedonia a man holding a stick drew it.",
- "And then erased it with his bare foot.",
- "Clarice Lispector, <i>The Egg and the Chicken</i>, 1964"
- ],
+ text: "Seeing the egg is impossible: the egg is supervisible just as there are supersonic sounds. No one can see the egg. Does the dog see the egg? Only machines see the egg. —The egg is invisible to the naked eye. From one egg to another one arrives at God, who is invisible to the naked eye. —The egg could have been a triangle that rolled for so long in space that it became oval. —Is the egg basically a vessel? Could it have been the first vessel sculpted by the Etruscans? No. The egg originated in Macedonia. There it was calculated, fruit of the most arduous spontaneity. In the sands of Macedonia a man holding a stick drew it. And then erased it with his bare foot.",
+ credit: "Clarice Lispector",
+ next: "stankievech-6",
},
'stankievech-6': {
title: 'The Desert Turned to Glass',
popup: "trinity",
audio_url: "/last-museum/static/uploads/3/audio/Frame06-46sec.mp3",
- subtitles: [
- "My anarchy obeys subterraneously a law",
- "in which I deal occultly with astronomy, mathematics and mechanics.",
- "And my hunger is fed by these putrefying beings in decomposition.",
- "My rite is a purifier of forces.",
- "But malignancy exists in the jungle.",
- "I swallow a mouthful of blood that fills me entirely.",
- "I hear cymbals and trumpets and tambourines",
- "that fill the air with noise and uproar",
- "drowning out the silence of the disc of the sun and its marvel.",
- "I want a cloak woven from threads of solar gold.",
- "The sun is the magical tension of the silence.",
- "On my journey to the mysteries",
- "I hear the carnivorous plant that laments times immemorial:",
- "and I have obscene nightmares beneath the sick winds.",
- "I am enchanted, seduced, transfixed by furtive voices.",
- "The almost unintelligible cuneiform inscriptions",
- "speak of how to conceive and give formulae",
- "about how to feed from the force of darkness.",
- "They speak of naked and crawling females.",
- "And the solar eclipse causes secret terror",
- "that nonetheless announces a splendor of heart.",
- "Clarice Lispector, <i>Agua Viva</i>, 1973",
- ],
+ text: "My anarchy obeys subterraneously a law in which I deal occultly with astronomy, mathematics and mechanics. And my hunger is fed by these putrefying beings in decomposition. My rite is a purifier of forces. But malignancy exists in the jungle. I swallow a mouthful of blood that fills me entirely. I hear cymbals and trumpets and tambourines that fill the air with noise and uproar drowning out the silence of the disc of the sun and its marvel. I want a cloak woven from threads of solar gold. The sun is the magical tension of the silence. On my journey to the mysteries I hear the carnivorous plant that laments times immemorial: and I have obscene nightmares beneath the sick winds. I am enchanted, seduced, transfixed by furtive voices. The almost unintelligible cuneiform inscriptions speak of how to conceive and give formulae about how to feed from the force of darkness. They speak of naked and crawling females. And the solar eclipse causes secret terror that nonetheless announces a splendor of heart.",
+ credit: "Clarice Lispector",
+ next: "nora-1",
},
}
diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css
index a02ab26..dfa11f2 100644
--- a/frontend/site/projects/museum/views/titles.css
+++ b/frontend/site/projects/museum/views/titles.css
@@ -10,3 +10,22 @@
transition: opacity 0.5s;
opacity: 0;
}
+
+.charles-text {
+ position: absolute;
+ top: 12vh;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 65vw;
+ font-size: 3.2vh;
+ font-weight: bold;
+ font-family: 'Helvetica', sans-serif;
+ color: #fff;
+ text-shadow: 0px 2px 6px rgba(0,0,0,0.5);
+ opacity: 0;
+ pointer-events: none;
+}
+.charles-text.visible {
+ opacity: 1;
+ pointer-events: auto;
+} \ No newline at end of file
diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index a772559..b3d41e4 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -5,6 +5,8 @@ import { SUBTITLES } from '../subtitles.js'
import './titles.css'
+import { history } from "site/store"
+
const HEADPHONES_SHOW_DELAY = 500
const HEADPHONES_HIDE_DELAY = 3000
const TITLE_SHOW_DELAY = 1000
@@ -16,6 +18,8 @@ const LAST_SUBTITLE_DELAY = 5000
class TitlesOverlay extends Component {
state = {
content: null,
+ showText: false,
+ beating: false,
}
constructor(props) {
@@ -23,6 +27,7 @@ class TitlesOverlay extends Component {
this.titleRef = React.createRef()
this.showTitle = this.showTitle.bind(this)
this.showHeadphones = this.showHeadphones.bind(this)
+ this.advance = this.advance.bind(this)
}
componentDidMount() {
@@ -42,9 +47,12 @@ class TitlesOverlay extends Component {
this.props.popups !== prevProps.popups
&& this.state.content
&& this.state.content.popup
- && this.props.popups[this.state.content.popup]
) {
- this.startHeartbeat()
+ if (this.props.popups[this.state.content.popup]) {
+ this.startHeartbeat()
+ } else if (this.state.beating) {
+ this.setState({ showText: true })
+ }
}
}
@@ -55,13 +63,15 @@ class TitlesOverlay extends Component {
if (SUBTITLES[page_name]) {
this.setState({
content: SUBTITLES[page_name],
- open: false,
+ showText: false,
+ beating: false,
})
setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
} else {
this.setState({
content: null,
- open: false,
+ showText: false,
+ beating: false,
})
}
}
@@ -73,6 +83,7 @@ class TitlesOverlay extends Component {
id: "text-overlay",
url: this.state.content.audio_url,
})
+ this.setState({ beating: true })
}
}
@@ -103,8 +114,12 @@ class TitlesOverlay extends Component {
}, TITLE_SHOW_DELAY)
}
+ advance(){
+ history.push(`/last-museum/${this.state.content.next}/`)
+ }
+
render() {
- const { content } = this.state
+ const { content, showText } = this.state
const { popups, interactive } = this.props
if (!interactive || !content) return null
return (
@@ -112,7 +127,25 @@ class TitlesOverlay extends Component {
<div
ref={this.titleRef}
className="chapter-title"
- >{this.state.content.title}
+ >
+ {this.state.content.title}
+ </div>
+ <div
+ className={showText ? "charles-text visible" : "charles-text"}
+ style={{
+ cursor: `url(${this.state.content.cursor}) 50 50, pointer`
+ }}
+ onClick={this.advance}
+ >
+ {showText && (
+ <span>
+ <i>{this.state.content.title}</i>
+ <br/><br/>
+ {this.state.content.text}
+ <br/><br/>
+ {this.state.content.credit}
+ </span>
+ )}
</div>
</div>
)