From: Max Value Date: Thu, 12 Feb 2026 15:34:23 +0000 (+0000) Subject: Big ol commit X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=31592ea7edf204eece9208f1b23e4087dbaa5f62;p=threshold Big ol commit --- diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..994b381 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +media_1920/ +media_1200/ +media_720/ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..b1d398b Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 621847e..7fea3d8 100644 --- a/index.html +++ b/index.html @@ -17,19 +17,88 @@

04/02/26

-

- Threshold Systems is an immersive installation exploring the transient and evolving relationship between art and technology, foregrounding investigative technical processes. It examines moments of interaction and disruption as thresholds for change within a responsive system. The viewer’s presence activates the work, positioning them not as observer but as subject, immersed in light and leaving a digital imprint. The installation exposes a shifting boundary between the individual and the system itself. -

+
+ +
Interaction with the exhibit using torches
+
+ + +

- Autonomous processes translate person-driven interaction into system response. Within an auditory automated data feedback loop, human presence, monitored through shadow, triggers visual shifts in the pixelated colour and movement. Participants become unauthorised authors of the work, their actions absorbed and reinterpreted by a system whose logic remains partially obscured. Questions of control and agency remain unresolved. + Threshold Systems is an immersive installation exploring the transient and evolving relationship between art and technology, foregrounding investigative technical processes. It examines moments of interaction and disruption as thresholds for change within a responsive system. The viewer’s presence activates the work, positioning them not as observer but as subject, immersed in light and leaving a digital imprint. The installation exposes a shifting boundary between the individual and the system itself.

- - - - - + + + + + + + +

Prev.

@@ -38,24 +107,86 @@

- The exhibition comprises three freestanding obelisks, each presenting projection-mapped, pixel-based visuals. Operating as interconnected channels, each structure responds to its own distinct soundscape. These soundscapes, composed of subtle, near-indistinguishable tones, act as an automated, generative force, delicately shaping the visual output in real time. Layered together, they form a baseline cognition of the system, ready to be disrupted by human presence. The translation from sound to image remains unstable and unpredictable, creating a delicate balance between machine-driven processes and audience interaction. + Autonomous processes translate person-driven interaction into system response. Within an auditory automated data feedback loop, human presence, monitored through shadow, triggers visual shifts in the pixelated colour and movement. Participants become unauthorised authors of the work, their actions absorbed and reinterpreted by a system whose logic remains partially obscured. Questions of control and agency remain unresolved. The exhibition comprises three freestanding obelisks, each presenting projection-mapped, pixel-based visuals. Operating as interconnected channels, each structure responds to its own distinct soundscape.

-

+ +

+

+ These soundscapes, composed of subtle, near-indistinguishable tones, act as an automated, generative force, delicately shaping the visual output in real time. Layered together, they form a baseline cognition of the system, ready to be disrupted by human presence. The translation from sound to image remains unstable and unpredictable, creating a delicate balance between machine-driven processes and audience interaction.
(Development video, 40 seconds) +

+
+ +
+ +
+ +

​​The pixel, as the smallest visible unit of the digital image, offers a way to understand this system at a human scale. Individually minimal yet structurally essential, pixels accumulate to form larger images, reflecting how presence and perception gain meaning through relation and repetition. In this way, Threshold Systems situates the viewer at the boundary between self and system, where agency is continuously negotiated rather than resolved.

-
-

- The project was conceived in 2023, on a purely technical level, from the idea that audio might be somehow "transmitted" over some visuals, that the initial information could be wholly recovered with no loss and no cheating. + +

+ + + + + +

+ Prev. +

+ Next

+

This developed into the idea that some novel kind of visual interaction with the sound could take place, allowing one to step into the sound and play. Many forms of visual data, like QR Codes or binary images, proved unintuitive before spectrograms where considered; allowing an axis of both pitch and time, both intuitive concepts without knowledge or appreciation of audio encoding.

+ +
+

+ The project was conceived in 2023, on a purely technical level, from the idea that audio might be somehow "transmitted" over some visuals, that the initial information could be wholly recovered with no loss and no cheating.
(Origional proof-of-concept, 7 minutes) +

+
diff --git a/media.sh b/media.sh new file mode 100755 index 0000000..063f0a9 --- /dev/null +++ b/media.sh @@ -0,0 +1,14 @@ +mkdir media_1920 +mkdir media_1200 +mkdir media_720 + +shopt -s extglob + +for f in media_full/!(*.gif); + do + convert -resize 1920 $f "media_1920/$(basename $f)" + convert -resize 1200 $f "media_1200/$(basename $f)" + convert -resize 720 $f "media_720/$(basename $f)"; +done + +shopt -u extglob diff --git a/media/code.jpg b/media/code.jpg deleted file mode 100644 index c2253d2..0000000 Binary files a/media/code.jpg and /dev/null differ diff --git a/media/cube.jpg b/media/cube.jpg deleted file mode 100644 index e8e1f64..0000000 Binary files a/media/cube.jpg and /dev/null differ diff --git a/media/header.gif b/media/header.gif deleted file mode 100644 index 832c9d6..0000000 Binary files a/media/header.gif and /dev/null differ diff --git a/media/projection1.png b/media/projection1.png deleted file mode 100644 index fb1ae4f..0000000 Binary files a/media/projection1.png and /dev/null differ diff --git a/media/projection2.png b/media/projection2.png deleted file mode 100644 index 75a1b24..0000000 Binary files a/media/projection2.png and /dev/null differ diff --git a/media/will.jpg b/media/will.jpg deleted file mode 100644 index 7ba77f6..0000000 Binary files a/media/will.jpg and /dev/null differ diff --git a/media_full/bts_code.jpg b/media_full/bts_code.jpg new file mode 100644 index 0000000..c2253d2 Binary files /dev/null and b/media_full/bts_code.jpg differ diff --git a/media_full/bts_cube.jpg b/media_full/bts_cube.jpg new file mode 100644 index 0000000..e8e1f64 Binary files /dev/null and b/media_full/bts_cube.jpg differ diff --git a/media_full/bts_desk.jpg b/media_full/bts_desk.jpg new file mode 100644 index 0000000..16b3b0c Binary files /dev/null and b/media_full/bts_desk.jpg differ diff --git a/media_full/bts_flat.jpg b/media_full/bts_flat.jpg new file mode 100644 index 0000000..4723ce5 Binary files /dev/null and b/media_full/bts_flat.jpg differ diff --git a/media_full/bts_will.jpg b/media_full/bts_will.jpg new file mode 100644 index 0000000..7ba77f6 Binary files /dev/null and b/media_full/bts_will.jpg differ diff --git a/media_full/feature1.jpg b/media_full/feature1.jpg new file mode 100644 index 0000000..6b8c46b Binary files /dev/null and b/media_full/feature1.jpg differ diff --git a/media_full/feature2.png b/media_full/feature2.png new file mode 100644 index 0000000..fb1ae4f Binary files /dev/null and b/media_full/feature2.png differ diff --git a/media_full/header.gif b/media_full/header.gif new file mode 100644 index 0000000..832c9d6 Binary files /dev/null and b/media_full/header.gif differ diff --git a/media_full/install1.jpg b/media_full/install1.jpg new file mode 100644 index 0000000..8ce8a47 Binary files /dev/null and b/media_full/install1.jpg differ diff --git a/media_full/install2.jpg b/media_full/install2.jpg new file mode 100644 index 0000000..d870711 Binary files /dev/null and b/media_full/install2.jpg differ diff --git a/media_full/install3.jpg b/media_full/install3.jpg new file mode 100644 index 0000000..08ca81e Binary files /dev/null and b/media_full/install3.jpg differ diff --git a/media_full/install4.jpg b/media_full/install4.jpg new file mode 100644 index 0000000..a51f460 Binary files /dev/null and b/media_full/install4.jpg differ diff --git a/media_full/install5.jpg b/media_full/install5.jpg new file mode 100644 index 0000000..abbc547 Binary files /dev/null and b/media_full/install5.jpg differ diff --git a/media_full/install6.jpg b/media_full/install6.jpg new file mode 100644 index 0000000..cc5e5dd Binary files /dev/null and b/media_full/install6.jpg differ diff --git a/media_full/install7.png b/media_full/install7.png new file mode 100644 index 0000000..75a1b24 Binary files /dev/null and b/media_full/install7.png differ diff --git a/media_full/install8.jpg b/media_full/install8.jpg new file mode 100644 index 0000000..6ae0835 Binary files /dev/null and b/media_full/install8.jpg differ diff --git a/slideshow.js b/slideshow.js index 4281e50..61a8356 100644 --- a/slideshow.js +++ b/slideshow.js @@ -1,104 +1,149 @@ -let slideCount = 0; -let slideCurrent = 0 - function setup () { - // setup the slideshows - slideshows = document.getElementsByClassName("slideshow"); - let s = 0; - for (slideshow of slideshows) { - let i = 0; - for (child of slideshow.children) { - if (child.tagName == "IMG") { - child.style.display = "none"; - child.id = `show${s}slide${i}`; - i++; - } else if (child.classList.contains("next")) { - var si = s; - child.addEventListener("click", (e) => { - e.preventDefault(); - document.getElementById(`show${si}slide${slideCurrent}`) - .style.display = "none"; - slideCurrent ++; - if (slideCurrent >= slideCount) { - slideCurrent = 0; - } - document.getElementById(`show${si}slide${slideCurrent}`) - .style.display = "block"; - }); - } else { - var si = s; - child.addEventListener("click", (e) => { - e.preventDefault(); - document.getElementById(`show${si}slide${slideCurrent}`) - .style.display = "none"; - slideCurrent --; - if (slideCurrent < 0) { - slideCurrent = slideCount - 1; - } - document.getElementById(`show${si}slide${slideCurrent}`) - .style.display = "block"; - }); + { + // convert attribution images into figures + const images = document.getElementsByTagName("img"); + for (e of images) { + if ("attribute" in e.dataset) { + const figure = document.createElement("figure"); + const figcaption = document.createElement("figcaption"); + const image = e.cloneNode(); + + figure.classList.add("attributionFigure") + figcaption.innerHTML = e.dataset.attribute; + + figure.append(image); + figure.append(figcaption); + e.before(figure); + e.remove(); } } - slideCount = i; - slideshow.children[0].style.display = "block"; - s++; } + // new context + { + // setup the slideshows + slideshows = document.getElementsByClassName("slideshow"); + let s = 0; + for (slideshow of slideshows) { + slideshow.dataset.slideCount = 0; + slideshow.dataset.slideCurrent = 0; + slideshow.dataset.index = s; + + let i = 0; + for (child of slideshow.children) { + // id each image by the slideshow index and the slide index + if (child.tagName == "IMG" || child.tagName == "FIGURE") { + child.style.display = "none"; + child.id = `show${s}slide${i}`; + i++; + } + + // add the next button event listener + else if (child.classList.contains("next")) { + child.addEventListener("click", (e) => { + var current = e.target.parentNode.parentNode; + var si = current.dataset.index; + var slideCurrent = Number(current.dataset.slideCurrent); + var slideCount = Number(current.dataset.slideCount); + + e.preventDefault(); + document.getElementById(`show${si}slide${slideCurrent}`) + .style.display = "none"; + if (slideCurrent >= slideCount - 1) { + current.dataset.slideCurrent = 0; + } else { + current.dataset.slideCurrent = slideCurrent + 1; + } + document.getElementById(`show${si}slide${current.dataset.slideCurrent}`) + .style.display = "block"; + }); + } + + // add the prev button event listener + else { + child.addEventListener("click", (e) => { + var current = e.target.parentNode.parentNode; + var si = current.dataset.index; + var slideCurrent = Number(current.dataset.slideCurrent); + var slideCount = Number(current.dataset.slideCount); + + e.preventDefault(); + document.getElementById(`show${si}slide${slideCurrent}`) + .style.display = "none"; + if (slideCurrent <= 0) { + current.dataset.slideCurrent = slideCount - 1; + } else { + current.dataset.slideCurrent = slideCurrent - 1; + } + document.getElementById(`show${si}slide${current.dataset.slideCurrent}`) + .style.display = "block"; + }); + } + } - // sets up the dimmer close button - const dim = document.getElementById("dim"); - const close = document.querySelector("#dim span"); - close.addEventListener("click", (e) => { - dim.style.opacity = 0; - dim.style.pointerEvents = "none"; - close.style.pointerEvents = "none"; - try { - let copy = document.getElementById("enlargeCopy"); - copy.style.opacity = 0; - setTimeout(function () { copy.remove() }, 500); - } catch {} - }); - - // sets up the image enlarge - const images = document.getElementsByTagName("img"); - for (image of images) { - image.addEventListener("click", (e) => { - // dim the lights - dim.style.opacity = 0.7; - dim.style.pointerEvents = "auto"; - close.style.pointerEvents = "auto"; - - // get origional image position - let rect = e.target.getBoundingClientRect(); - - // bring up the image - let copy = e.target.cloneNode(); - copy.id = "enlargeCopy"; - copy.style.position = "absolute"; - copy.style.top = `${rect.top}px`; - copy.style.left = `${rect.left}px`; - copy.style.width = `${rect.width}px`; - copy.style.height = `${rect.height}px`; - - copy.style.opacity = 1; - copy.style.transition = ` - opacity 0.3s, - top 0.3s, - left 0.3s, - width 0.3s, - height 0.3s - `; - - dim.after(copy); - - setTimeout(function () { - copy.style.objectFit = "contain"; - copy.style.top = "3vh"; - copy.style.left = "3vw"; - copy.style.width = "94vw"; - copy.style.height = "94vh"; - }, 50); + // setup some slideshow variables & make block to keep space + // doing this with js so that noscript works + slideshow.dataset.slideCount = i; + slideshow.children[0].style.display = "block"; + s++; + } + } + // new context + { + // sets up the dimmer close button + const dim = document.getElementById("dim"); + const close = document.querySelector("#dim span"); + close.addEventListener("click", (e) => { + dim.style.opacity = 0; + dim.style.pointerEvents = "none"; + close.style.pointerEvents = "none"; + try { + let copy = document.getElementById("enlargeCopy"); + copy.style.opacity = 0; + setTimeout(function () { copy.remove() }, 500); + } catch {} }); + + // sets up the image enlarge + const images = document.getElementsByTagName("img"); + for (image of images) { + image.addEventListener("click", (e) => { + // dim the lights + dim.style.opacity = 0.7; + dim.style.pointerEvents = "auto"; + close.style.pointerEvents = "auto"; + + // get origional image position + let rect = e.target.getBoundingClientRect(); + + // bring up the image + let copy = e.target.cloneNode(); + copy.id = "enlargeCopy"; + copy.style.position = "absolute"; + copy.style.top = `${rect.top}px`; + copy.style.left = `${rect.left}px`; + copy.style.width = `${rect.width}px`; + copy.style.height = `${rect.height}px`; + + copy.style.opacity = 1; + copy.style.transition = ` + opacity 0.3s, + top 0.3s, + left 0.3s, + width 0.3s, + height 0.3s + `; + + dim.after(copy); + + setTimeout(function () { + copy.style.objectFit = "contain"; + copy.style.top = "3vh"; + copy.style.left = "8vw"; + copy.style.width = "84vw"; + copy.style.height = "94vh"; + }, 50); + }); + } } } diff --git a/style.css b/style.css index d37175d..a0ad53c 100644 --- a/style.css +++ b/style.css @@ -9,7 +9,10 @@ main { padding-top: 10vh; text-align: justify; } -footer, footer a { color: gray; } +footer, footer a { + color: gray; + text-align: center; +} #wrapper { position: absolute; top: 0; @@ -22,7 +25,7 @@ footer, footer a { color: gray; } header { padding: 10vw 0 10vw 0; - background-image: linear-gradient(to bottom, rgba(255,255,255,0) 75%, rgba(255,255,255,1)), url("/media/header.gif"); + background-image: linear-gradient(to bottom, rgba(255,255,255,0) 75%, rgba(255,255,255,1)), url("/media_full/header.gif"); background-size: cover; text-align: center; color: white; @@ -37,6 +40,8 @@ main, footer { width: 50vw; margin: auto; } +footer { margin-top: 100px; } +main > p { margin: 50px 0 50px 0; } main p.left { width: 35em; margin-right: auto; @@ -48,7 +53,7 @@ main p.right { /* mediaside */ .mediaside iframe, .mediaside img { - width: 55%; + width: 60%; aspect-ratio: 16/9; display: inline-block; } @@ -56,7 +61,7 @@ main p.right { .mediaside iframe:last-child, .mediaside img:last-child { margin-right: -5%; } .mediaside p { - width: calc(50% - 40px); + width: calc(45% - 40px); margin: 0; padding: 20px; display: inline-block; @@ -64,15 +69,53 @@ main p.right { text-align: justify; } +/* figure / feature image styling */ +figure { + margin: 50px 0 25px 0; +} +figure img { + display: block; + width: 100%; +} +figcaption { + text-align: center; + padding: 20px; +} + +.attributionFigure { margin-bottom: -1.4em; } +.attributionFigure figcaption { + display: inline-block; + height: 1em; + width: auto; + margin: 0; + margin-bottom: -1.4em; + padding: 0.2em; + transform: translate(20px, calc(-20px - 1em)); + + color: rgba(255,255,255,0.5); + background-color: rgba(0,0,0,0.5); + font-style: italic; +} +.attributionFigure a { color: rgba(255,255,255,0.7); } + +/* attribution styling */ +img::after { + display: inline-block; + color: red; + background-color: green; + content: "TEST" attr(data-attribute); +} + /* slideshow styling */ .slideshow { margin: 50px 8% 25px 8%; - width: calc(84%); + width: 84%; } .slideshow img { width: 100%; } .slideshow p { display: inline-block; width: 30%; + margin-bottom: 0; padding: 0 10% 0 10%; color: var(--darkgray); text-decoration: underline; @@ -95,6 +138,7 @@ main p.right { } #dim span { position: absolute; + padding: 10px; top: 20px; left: 20px; color: white;