From: Max Value Date: Wed, 4 Feb 2026 00:26:42 +0000 (+0000) Subject: Did some changes X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=HEAD;p=threshold Did some changes NOT sleeping! --- diff --git a/fonts.css b/fonts.css index e69de29..cd10fcd 100644 --- a/fonts.css +++ b/fonts.css @@ -0,0 +1,84 @@ +@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; +} diff --git a/fonts/Gill Sans Bold Italic.otf b/fonts/Gill Sans Bold Italic.otf new file mode 100644 index 0000000..28086fd Binary files /dev/null and b/fonts/Gill Sans Bold Italic.otf differ diff --git a/fonts/Gill Sans Bold.otf b/fonts/Gill Sans Bold.otf new file mode 100644 index 0000000..5932e74 Binary files /dev/null and b/fonts/Gill Sans Bold.otf differ diff --git a/fonts/Gill Sans Heavy Italic.otf b/fonts/Gill Sans Heavy Italic.otf new file mode 100644 index 0000000..8fb512e Binary files /dev/null and b/fonts/Gill Sans Heavy Italic.otf differ diff --git a/fonts/Gill Sans Heavy.otf b/fonts/Gill Sans Heavy.otf new file mode 100644 index 0000000..251397d Binary files /dev/null and b/fonts/Gill Sans Heavy.otf differ diff --git a/fonts/Gill Sans Italic.otf b/fonts/Gill Sans Italic.otf new file mode 100644 index 0000000..5851d3c Binary files /dev/null and b/fonts/Gill Sans Italic.otf differ diff --git a/fonts/Gill Sans Light Italic.otf b/fonts/Gill Sans Light Italic.otf new file mode 100644 index 0000000..fc41108 Binary files /dev/null and b/fonts/Gill Sans Light Italic.otf differ diff --git a/fonts/Gill Sans Light.otf b/fonts/Gill Sans Light.otf new file mode 100644 index 0000000..f120ba0 Binary files /dev/null and b/fonts/Gill Sans Light.otf differ diff --git a/fonts/Gill Sans Medium Italic.otf b/fonts/Gill Sans Medium Italic.otf new file mode 100644 index 0000000..a85acdc Binary files /dev/null and b/fonts/Gill Sans Medium Italic.otf differ diff --git a/fonts/Gill Sans Medium.otf b/fonts/Gill Sans Medium.otf new file mode 100644 index 0000000..b1f6177 Binary files /dev/null and b/fonts/Gill Sans Medium.otf differ diff --git a/fonts/Gill Sans.otf b/fonts/Gill Sans.otf new file mode 100644 index 0000000..264a177 Binary files /dev/null and b/fonts/Gill Sans.otf differ diff --git a/index.html b/index.html index 4483262..621847e 100644 --- a/index.html +++ b/index.html @@ -4,29 +4,63 @@ Threshold Systems + + -
-

Threshold Systems

-
-
-

- 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. -

-

A Heading

-

- 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. -

-
-

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.

-
-
- +
+
+

Threshold Systems

+

Interactive Exhibition

+

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. +

+

+ 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. +

+ +
+ + + + + +

+ Prev. +

+ Next +

+
+ +

+ 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. +

+

+ ​​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. +

+
+

+ 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. +

+
+ + +
+
+ Close +
diff --git a/media/code.jpg b/media/code.jpg new file mode 100644 index 0000000..c2253d2 Binary files /dev/null and b/media/code.jpg differ diff --git a/media/cube.jpg b/media/cube.jpg new file mode 100644 index 0000000..e8e1f64 Binary files /dev/null and b/media/cube.jpg differ diff --git a/media/header.gif b/media/header.gif new file mode 100644 index 0000000..832c9d6 Binary files /dev/null and b/media/header.gif differ diff --git a/media/projection1.png b/media/projection1.png new file mode 100644 index 0000000..fb1ae4f Binary files /dev/null and b/media/projection1.png differ diff --git a/media/projection2.png b/media/projection2.png new file mode 100644 index 0000000..75a1b24 Binary files /dev/null and b/media/projection2.png differ diff --git a/media/will.jpg b/media/will.jpg new file mode 100644 index 0000000..7ba77f6 Binary files /dev/null and b/media/will.jpg differ diff --git a/slideshow.js b/slideshow.js index e69de29..4281e50 100644 --- a/slideshow.js +++ b/slideshow.js @@ -0,0 +1,106 @@ +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(); diff --git a/style.css b/style.css index bce8db2..d37175d 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,40 @@ /* 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 { @@ -33,6 +61,47 @@ main p.right { 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; } +