+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Light.otf') format('opentype');
+ font-weight: 300;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Light Italic.otf') format('opentype');
+ font-weight: 300;
+ font-display: swap;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans.otf') format('opentype');
+ font-weight: 400;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Italic.otf') format('opentype');
+ font-weight: 400;
+ font-display: swap;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Medium.otf') format('opentype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Medium Italic.otf') format('opentype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Medium.otf') format('opentype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Medium Italic.otf') format('opentype');
+ font-weight: 500;
+ font-display: swap;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Bold.otf') format('opentype');
+ font-weight: 700;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Bold Italic.otf') format('opentype');
+ font-weight: 700;
+ font-display: swap;
+ font-style: italic;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Heavy.otf') format('opentype');
+ font-weight: 900;
+ font-display: swap;
+ font-style: normal;
+}
+@font-face {
+ font-family: 'Gill Sans';
+ src: url('/fonts/Gill Sans Heavy Italic.otf') format('opentype');
+ font-weight: 900;
+ font-display: swap;
+ font-style: italic;
+}
<meta charset="utf-8">
<title>Threshold Systems</title>
+ <script type="text/javascript" src="/slideshow.js" defer></script>
+
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
</head>
<body>
- <header>
- <h1>Threshold Systems</h1>
- </header>
- <main>
- <p class="left">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue. Cras ultricies, magna in auctor porta, lorem urna dapibus enim, ac tincidunt urna ipsum eu lacus. Fusce auctor quam in magna tincidunt, sed dictum purus pharetra. Integer ut nisl neque. Duis aliquet eros non fringilla placerat. Nulla facilisi. Phasellus ornare tempus tristique. Nullam at ultricies urna, id dignissim lorem. Sed eget ipsum ullamcorper, cursus urna non, luctus purus. In justo sapien, molestie sed ex non, pellentesque pulvinar purus. Ut egestas enim nec velit porta, cursus pretium libero dictum. Sed et vehicula massa.
- </p>
- <h2>A Heading</h2>
- <p class="right">
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue. Cras ultricies, magna in auctor porta, lorem urna dapibus enim, ac tincidunt urna ipsum eu lacus. Fusce auctor quam in magna tincidunt, sed dictum purus pharetra. Integer ut nisl neque. Duis aliquet eros non fringilla placerat. Nulla facilisi. Phasellus ornare tempus tristique. Nullam at ultricies urna, id dignissim lorem. Sed eget ipsum ullamcorper, cursus urna non, luctus purus. In justo sapien, molestie sed ex non, pellentesque pulvinar purus. Ut egestas enim nec velit porta, cursus pretium libero dictum. Sed et vehicula massa.
- </p>
- <div class="mediaside">
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vehicula sem id sapien ultrices tempor. Vivamus imperdiet suscipit magna, ac finibus massa ultricies vitae. Cras facilisis aliquet nisl, sed porta nibh aliquam a. Integer non ultrices leo, ac porta augue.</p><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>
- </div>
- </main>
- <footer>
- <p>
- © <a href="https://blog.ozva.co.uk">William Greenwood</a> and <a href="#">Lauren Briggs</a> 2026
- </p>
- </footer>
+ <div id="wrapper">
+ <header>
+ <h1>Threshold Systems</h1>
+ <h2>Interactive Exhibition</h2>
+ <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>
+ <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.
+ </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">
+ <p class="prev">
+ <span>Prev.<span>
+ </p><p class="next">
+ <span>Next<span>
+ </p>
+ </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.
+ </p>
+ <p class="left">
+ 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.
+ </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>
+ </main>
+
+ <footer>
+ <p>
+ © <a href="https://blog.ozva.co.uk">William Greenwood</a> and <a href="#">Lauren Briggs</a> 2026
+ </p>
+ </footer>
+ </div>
+ <div id="dim" style="pointer-events: none">
+ <span style="pointer-events: none">Close</span>
+ </div>
</body>
</html>
+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";
+ });
+ }
+ }
+ slideCount = i;
+ slideshow.children[0].style.display = "block";
+ s++;
+ }
+
+ // 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();
/* Platform independant element styling */
-:root { font-family: sans-serif; }
-h1, h2, h3, h4, h5, h6 { text-align: center; }
-main { text-align: justify; }
+:root { font-family: "Gill Sans", sans-serif; }
+h1, h2, h3, h4, h5, h6 {
+ text-align: center;
+ font-weight: 500;
+ font-style: italic;
+}
+main {
+ padding-top: 10vh;
+ text-align: justify;
+}
footer, footer a { color: gray; }
+#wrapper {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ overflow: scroll;
+}
+
+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-size: cover;
+ text-align: center;
+ color: white;
+}
+header h1 {
+ margin: 0;
+ font-size: 5em;
+}
/* Desktop/tablet device */
-body {
- width: 55vw;
+main, footer {
+ width: 50vw;
margin: auto;
}
main p.left {
padding: 20px;
display: inline-block;
vertical-align: top;
+ text-align: justify;
}
-.mediaside p:first-child { text-align: right; }
+
+/* slideshow styling */
+.slideshow {
+ margin: 50px 8% 25px 8%;
+ width: calc(84%);
+}
+.slideshow img { width: 100%; }
+.slideshow p {
+ display: inline-block;
+ width: 30%;
+ padding: 0 10% 0 10%;
+ color: var(--darkgray);
+ text-decoration: underline;
+}
+.slideshow p:hover { color: var(--mediumgray); }
+.slideshow p span { cursor: pointer; }
+.next { text-align: right; }
+.prev { text-align: left; }
+
+/* styling the dimmer */
+#dim {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: gray;
+ opacity: 0;
+ transition: opacity 0.5s;
+}
+#dim span {
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ color: white;
+ font-size: 1.2em;
+ cursor: pointer;
+ opacity: inherit;
+}
+#dim span:hover { color: lightgray; }
+
projects / threshold / commitdiff
