diff options
| -rw-r--r-- | frontend/site/projects/museum/constants.js | 8 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.css | 4 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/petros.nav.js | 25 |
3 files changed, 20 insertions, 17 deletions
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js index 10ba851..346c384 100644 --- a/frontend/site/projects/museum/constants.js +++ b/frontend/site/projects/museum/constants.js @@ -23,16 +23,16 @@ export const ARTISTS = { }, statement: { en: `<p> - <i>Oracle</i> is set in a derelict textile factory in Laurium—a seaside town in Attica, associated with silver mining since antiquity. Long a source of Athenian wealth and naval power, in the late 19th Century its mines were re-worked for ore extraction, with grave environmental consequences. Later, at the turn of the millennium, this industry collapsed and its massive industrial facilities laid in ruin, awaiting an uncertain future. This new artwork responds to that future: According to leaked information, the site will soon house a data-center complex to be built a “Big Five” multinational information technology corporation (for the purpose of running dedicated Cloud, IoT and AI services). Conceptually locating his work between Larium’s past and its future, <i>Oracle</i> is a response to the context – and to the mythos of the oracle in Greek culture. + <i>Oracle</i> is set in a derelict textile factory in Laurium, a seaside town in Attica that used to be a significant silver mine territory since antiquity, the main source of ancient Athenian wealth and naval power. Those mines were reworked from the late 19th century to the 1980’s for ore extraction, an activity that left its grave environmental impact on the area’s soil to this day. Once part of the local industrial economy that collapsed before the turn of the millennium, this industrial ruin was recently leaked to be the future site of a data center complex to be built by one of the so-called “Big Five” multinational information technology corporations, for the purpose of running dedicated Cloud, IoT and AI services. </p> <p> - <i>Oracle</i>’s sculptures inhabit the entropic spaces of Larium’s industrial ghost site. Resembling hybrids between human and non-human faces, these mask-like objects are chimeric compositions that borrow from archaeological photogrametric scans and ‘found’ three-dimensional models gathered online. Their metallic sheen reflects the local geological heritage. Additionally, their mineral composition references how electronic hardware enables uncanny machinic intelligence, and the haunting abstraction of computational operations. + Sculptural appearances inhabit the entropic spaces of this industrial ghost site, hybrids between human-resembling and non-human facial forms, seeding from chimeric compositions between archaeological photogrammetric scans and online-found threedimensional models referencing contemporary technocultures. Their metallic materiality reflects the local geological heritage and the mineral composition of the electronic hardware that enables the uncanny machinic intelligence of computational operations. The interface of <i>Oracle</i> is permeated by a haunting soundtrack composed by Bill Kouligas, and becomes infiltrated by formations of visual coding and synthetic language generated by predictive models of simulated mutation and automated apophenia. </p> <p> - Both the setting and the digital interface of <i>Oracle</i> are permeated by visual coding, and soundscapes generated by simulated processes. In this work, Larium’s physical and psychic underground space is still the origin of contemporary oracular production—where ancient practices of hallucination deriving from subterranean chemical fumes give way to the extractivism of minerals and psychosocial data, powering the deep-dreaming of the algorithmic Cloud. + The physical and psychic underground space is still the origin of such forms of contemporary oracular production, where the ancient practices of hallucination deriving from subterranean chemical fumes gave their place to the extractivism of minerals and psychosocial data that feeds the deep-dreaming of the algorithmic Cloud. </p> <p> - As a place of memory and a place of becoming (and an assemblage of myth, history, and technology) <i>Oracle</i> meditates on entangled timelines, imaginaries, and anxieties bound up with socioeconomic and environmental transformation. + As a place of memory and a place to become, an assemblage of mythological, historical, and technological entities, a generative process, or a resulting outcome left for interpretation, <i>Oracle</i> becomes a mediative entanglement of collapsing timelines, of imaginaries and anxieties bound to technological, socioeconomic and environmental transformation. </p>`, de: `<p> <i>Oracle</i> befindet sich in einer verfallenen Textilfabrik in der attikanischen Küstenstadt Lavrio, in der seit der Antike Silber abgebaut wurde. Lange Zeit Quelle des Reichtums und der Seemacht Athens, wurden die Minen im späten 19. Jahrhundert zur Erzgewinnung umgewidmet - mit gravierenden Folgen für die Umwelt. Um die Jahrtausendwende brach diese Industrie zusammen. Die Zukunft der verbliebenen riesigen Ruinen ist ungewiss. Angeblich will hier demnächst ein multinationales IT-Unternehmen der "Big Five" ein Rechenzentrum für spezialisierte Cloud-, IoT- und KI-Dienste bauen. <i>Oracle</i> zeigt eine andere Option für den Standort auf. Konzeptionell zwischen der Vergangenheit und der Zukunft von Lavrio angesiedelt, interagiert die Arbeit mit dem Kontext und thematisiert den Mythos des Orakels in der griechischen Kultur. diff --git a/frontend/site/projects/museum/views/petros.nav.css b/frontend/site/projects/museum/views/petros.nav.css index a23c657..2dd3c29 100644 --- a/frontend/site/projects/museum/views/petros.nav.css +++ b/frontend/site/projects/museum/views/petros.nav.css @@ -30,8 +30,8 @@ .petros-text svg { pointer-events: none; - width: 100px; - height: 101px; + width: 130px; + height: 131px; } .petros-text svg path { fill: none; diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js index 7a54c72..7c7dbd2 100644 --- a/frontend/site/projects/museum/views/petros.nav.js +++ b/frontend/site/projects/museum/views/petros.nav.js @@ -21,6 +21,7 @@ const RESET_STATE = { textPrep: false, textActive: false, textDone: false, + textAgain: false, textOpacity: 0.0, iconFade: false, text: null, @@ -54,10 +55,10 @@ const INITIAL_VIEW = { const FASTFORWARD = 1.0 const LOOP_TIMEOUT = 2000 * FASTFORWARD -const MOVEMENT_TIMEOUT = 41000 * FASTFORWARD +const MOVEMENT_TIMEOUT = 45000 * FASTFORWARD const TEXT_LOAD_TIMEOUT = 6000 * FASTFORWARD const SHOW_NAV_TIMEOUT = 2000 * FASTFORWARD -const TEXT_HIDE_TIMEOUT = 20000 * FASTFORWARD +const TEXT_HIDE_TIMEOUT = 7000 * FASTFORWARD const SUBTITLE_COUNT = 12 @@ -111,8 +112,6 @@ class PetrosNav extends Component { }) return } - preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}-White.png`) - preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/OracleTextButton${index}.png`) preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/NavBW${index}.png`) preloadImage(`/thelastmuseum/static/media/last-museum/petros-moris/Loading Animation ${index}.png`) this.setState({ @@ -156,11 +155,12 @@ class PetrosNav extends Component { /** Start text generation sequence */ handleClickText() { - if (this.state.textActive || this.state.text) return + if (!this.state.textAgain && (this.state.textActive || this.state.text)) return this.setState({ textPrep: false, textActive: true, textDone: false, + textAgain: false, hovering: false, textOpacity: 0.0, text: null @@ -207,7 +207,10 @@ class PetrosNav extends Component { this.setState({ iconFade: true }) // After a longer delay, hide the text this.textTimeout = setTimeout(() => { - this.setState({ textOpacity: 0.0 }) + this.setState({ textOpacity: 0.0}) + this.textTimeout = setTimeout(() => { + this.setState({ textAgain: true }) + }, 500) }, TEXT_HIDE_TIMEOUT) }, SHOW_NAV_TIMEOUT) } @@ -259,7 +262,7 @@ class PetrosNav extends Component { const { index, ready, hovering, iconFade, - textPrep, textActive, textDone, textOpacity, text, + textPrep, textActive, textDone, textAgain, textOpacity, text, glyphTransform, } = this.state if (!this.props.interactive || (!index)) return null @@ -278,8 +281,8 @@ class PetrosNav extends Component { <div className={[ "petros-text", - ready && !(textActive || textDone) ? "visible" : "", - hovering === "text" || textActive || textDone ? "white" : "", + ready && (textAgain || !(textActive || textDone)) ? "visible" : "", + hovering === "text" || (!textAgain && (textActive || textDone)) ? "white" : "", ].join(" ")} style={glyphTransform} onMouseEnter={this.handleEnter} @@ -295,7 +298,7 @@ class PetrosNav extends Component { (textDone && iconFade) ? "petros-left visible" : "petros-left", index === 1 ? "noclick" : "" ].join(" ")} - src={(hovering === "left" || textActive || index === 1) + src={(hovering === "left" || (!textAgain && textActive) || index === 1) ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${leftIndex}.png` : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${leftIndex}.png` } @@ -307,7 +310,7 @@ class PetrosNav extends Component { {ready && ( <img className={(textDone && iconFade) ? "petros-right visible" : "petros-right"} - src={(hovering === "right" || textActive) + src={(hovering === "right" || (!textAgain && textActive)) ? `/thelastmuseum/static/media/last-museum/petros-moris/NavBW${rightIndex}.png` : `/thelastmuseum/static/media/last-museum/petros-moris/NavB${rightIndex}.png` } |