--- /dev/null
+media_1920/
+media_1200/
+media_720/
<h2>04/02/26</h2>
</header>
<main>
- <p class="right">
- 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.
- </p>
+ <figure>
+ <img id="test" data-attribute="Photo by <a href='https://www.chesterrobertjones.com/'>Chester Robert Jones</a>"
+ src = "media_1920/feature1.jpg"
+ srcset="
+ media_1920/feature1.jpg w1920,
+ media_1200/feature1.jpg w1200,
+ media_720/feature1.jpg w720,
+ "></img>
+ <figcaption>Interaction with the exhibit using torches</figcaption>
+ </figure>
+
+ <!-- Todo:
+ - Finish copy
+ - Spell-check
+ - Possibly the audio version?
+ - Accessability
+ - alts for all images
+ - Mobile
+ - make clicking anywhere on the gray minimise the image
+ !-->
+
<p class="left">
- 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.
</p>
<div class="slideshow">
- <img src="/media/projection1.png">
- <img src="/media/code.jpg">
- <img src="/media/cube.jpg">
- <img src="/media/projection2.png">
- <img src="/media/will.jpg">
+ <img data-attribute="Photo by <a href='https://www.chesterrobertjones.com/'>Chester Robert Jones</a>"
+ src = "media_1920/install3.jpg"
+ srcset="
+ media_1920/install3.jpg w1920,
+ media_1200/install3.jpg w1200,
+ media_720/install3.jpg w720,
+ ">
+ <img data-attribute="Photo by <a href='https://www.chesterrobertjones.com/'>Chester Robert Jones</a>"
+ src = "media_1920/install6.jpg"
+ srcset="
+ media_1920/install6.jpg w1920,
+ media_1200/install6.jpg w1200,
+ media_720/install6.jpg w720,
+ ">
+ <img
+ src = "media_1920/install7.png"
+ srcset="
+ media_1920/install7.png w1920,
+ media_1200/install7.png w1200,
+ media_720/install7.png w720,
+ ">
+ <img data-attribute="Photo by <a href='https://www.chesterrobertjones.com/'>Chester Robert Jones</a>"
+ src = "media_1920/install5.jpg"
+ srcset="
+ media_1920/install5.jpg w1920,
+ media_1200/install5.jpg w1200,
+ media_720/install5.jpg w720,
+ ">
+ <img
+ src = "media_1920/install2.jpg"
+ srcset="
+ media_1920/install2.jpg w1920,
+ media_1200/install2.jpg w1200,
+ media_720/install2.jpg w720,
+ ">
+ <img
+ src = "media_1920/install8.jpg"
+ srcset="
+ media_1920/install8.jpg w1920,
+ media_1200/install8.jpg w1200,
+ media_720/install8.jpg w720,
+ ">
+ <img data-attribute="Photo by <a href='https://www.chesterrobertjones.com/'>Chester Robert Jones</a>"
+ src = "media_1920/install4.jpg"
+ srcset="
+ media_1920/install4.jpg w1920,
+ media_1200/install4.jpg w1200,
+ media_720/install4.jpg w720,
+ ">
+ <img
+ src = "media_1920/install1.jpg"
+ srcset="
+ media_1920/install1.jpg w1920,
+ media_1200/install1.jpg w1200,
+ media_720/install1.jpg w720,
+ ">
<p class="prev">
<span>Prev.<span>
</p><p class="next">
</div>
<p class="right">
- 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.
</p>
- <p class="left">
+
+ <div class="mediaside">
+ <p>
+ 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.<br>(Development video, 40 seconds)
+ </p><iframe src="https://www.youtube.com/embed/ukhuhW-WgaQ?si=639bPcpNdZDJUeZq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ </div>
+
+ <figure>
+ <img
+ src = "media_1920/feature2.png"
+ srcset="
+ media_1920/feature2.png w1920,
+ media_1200/feature2.png w1200,
+ media_720/feature2.png w720,
+ " />
+ </figure>
+
+ <p class="right">
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.
</p>
- <div class="mediaside">
- <iframe src="https://www.youtube.com/embed/acxykQsh8cw?si=mz3jVQs_bOdda2i3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><p>
- 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.
+
+ <div class="slideshow">
+ <img
+ src = "media_1920/bts_code.jpg"
+ srcset="
+ media_1920/bts_code.jpg w1920,
+ media_1200/bts_code.jpg w1200,
+ media_720/bts_code.jpg w720,
+ ">
+ <img
+ src = "media_1920/bts_cube.jpg"
+ srcset="
+ media_1920/bts_cube.jpg w1920,
+ media_1200/bts_cube.jpg w1200,
+ media_720/bts_cube.jpg w720,
+ ">
+ <img
+ src = "media_1920/bts_will.jpg"
+ srcset="
+ media_1920/bts_will.jpg w1920,
+ media_1200/bts_will.jpg w1200,
+ media_720/bts_will.jpg w720,
+ ">
+ <img
+ src = "media_1920/bts_desk.jpg"
+ srcset="
+ media_1920/bts_desk.jpg w1920,
+ media_1200/bts_desk.jpg w1200,
+ media_720/bts_desk.jpg w720,
+ ">
+ <img
+ src = "media_1920/bts_flat.jpg"
+ srcset="
+ media_1920/bts_flat.jpg w1920,
+ media_1200/bts_flat.jpg w1200,
+ media_720/bts_flat.jpg w720,
+ ">
+ <p class="prev">
+ <span>Prev.<span>
+ </p><p class="next">
+ <span>Next<span>
</p>
</div>
+
<p class="left">
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 <em>play</em>. 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.
</p>
+
+ <div class="mediaside">
+ <iframe src="https://www.youtube.com/embed/acxykQsh8cw?si=mz3jVQs_bOdda2i3" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><p>
+ 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.<br>(Origional proof-of-concept, 7 minutes)
+ </p>
+ </div>
</main>
<footer>
<p>
- © <a href="https://blog.ozva.co.uk">William Greenwood</a> and <a href="#">Lauren Briggs</a> 2026
+ © <a href="https://blog.ozva.co.uk">William Greenwood</a> and <a href="https://laurenevebriggs.myportfolio.com/">Lauren Briggs</a> 2026
</p>
</footer>
</div>
--- /dev/null
+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
-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);
+ });
+ }
}
}
padding-top: 10vh;
text-align: justify;
}
-footer, footer a { color: gray; }
+footer, footer a {
+ color: gray;
+ text-align: center;
+}
#wrapper {
position: absolute;
top: 0;
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;
width: 50vw;
margin: auto;
}
+footer { margin-top: 100px; }
+main > p { margin: 50px 0 50px 0; }
main p.left {
width: 35em;
margin-right: auto;
/* mediaside */
.mediaside iframe, .mediaside img {
- width: 55%;
+ width: 60%;
aspect-ratio: 16/9;
display: inline-block;
}
.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;
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;
}
#dim span {
position: absolute;
+ padding: 10px;
top: 20px;
left: 20px;
color: white;
projects / threshold / commitdiff
