{"id":1143,"date":"2026-02-18T17:23:34","date_gmt":"2026-02-18T16:23:34","guid":{"rendered":"https:\/\/samueljuliangrace.com\/?page_id=1143"},"modified":"2026-02-18T18:36:49","modified_gmt":"2026-02-18T17:36:49","slug":"untitled-system","status":"publish","type":"page","link":"https:\/\/samueljuliangrace.com\/?page_id=1143","title":{"rendered":"Untitled System"},"content":{"rendered":"\n<div class=\"wp-block-group work-page is-layout-flow wp-container-core-group-is-layout-e603688c wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group work-main is-layout-flow wp-container-core-group-is-layout-e603688c wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n\n    <div id=\"wrapper_video_69e608ca343cd\" style=\"\n        width:100%;\n        position:relative;\n        overflow:hidden;\n        background:#000;\n        cursor:pointer;\n    \">\n\n        <video \n            id=\"video_69e608ca343cd\" \n            preload=\"metadata\"\n            poster=\"\"\n            style=\"\n                width:100%;\n                height:auto;\n                display:block;\n            \"\n        >\n            <source src=\"https:\/\/samueljuliangrace.com\/wp-content\/uploads\/2026\/02\/front-on.mp4\" type=\"video\/mp4\">\n        <\/video>\n\n        <!-- Controls -->\n        <div id=\"controls_video_69e608ca343cd\" style=\"\n            position:absolute;\n            inset:0;\n            display:flex;\n            flex-direction:column;\n            justify-content:flex-end;\n            padding:18px;\n            box-sizing:border-box;\n            opacity:1;\n            transition:opacity .3s ease;\n        \">\n\n            <div style=\"\n                display:flex;\n                align-items:center;\n                gap:14px;\n            \">\n\n                <!-- Play Button -->\n                <div id=\"playbtn_video_69e608ca343cd\" style=\"\n                    width:28px;\n                    height:28px;\n                    display:flex;\n                    align-items:center;\n                    justify-content:center;\n                    color:#444;\n                    font-size:16px;\n                    user-select:none;\n                \">\n                    \u25b6\n                <\/div>\n\n                <!-- Custom Timeline -->\n                <div id=\"timeline_video_69e608ca343cd\" style=\"\n                    flex:1;\n                    height:2px;\n                    background:#dcdcdc;\n                    position:relative;\n                \">\n                    <div id=\"progress_video_69e608ca343cd\" style=\"\n                        width:0%;\n                        height:100%;\n                        background:#444;\n                    \"><\/div>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n\n        var video = document.getElementById(\"video_69e608ca343cd\");\n        var wrapper = document.getElementById(\"wrapper_video_69e608ca343cd\");\n        var controls = document.getElementById(\"controls_video_69e608ca343cd\");\n        var playBtn = document.getElementById(\"playbtn_video_69e608ca343cd\");\n        var timeline = document.getElementById(\"timeline_video_69e608ca343cd\");\n        var progress = document.getElementById(\"progress_video_69e608ca343cd\");\n\n        var hideTimeout;\n\n        function showControls() {\n            controls.style.opacity = \"1\";\n            clearTimeout(hideTimeout);\n            if (!video.paused) {\n                hideTimeout = setTimeout(function() {\n                    controls.style.opacity = \"0\";\n                }, 1500);\n            }\n        }\n\n        function togglePlay(e) {\n            if (e.target === timeline || timeline.contains(e.target)) return;\n\n            if (video.paused) {\n                video.play();\n                playBtn.innerHTML = \"\u275a\u275a\";\n            } else {\n                video.pause();\n                playBtn.innerHTML = \"\u25b6\";\n            }\n            showControls();\n        }\n\n        wrapper.addEventListener(\"click\", togglePlay);\n\n        video.addEventListener(\"timeupdate\", function() {\n            if(video.duration){\n                var percent = (video.currentTime \/ video.duration) * 100;\n                progress.style.width = percent + \"%\";\n            }\n        });\n\n        timeline.addEventListener(\"click\", function(e){\n            var rect = timeline.getBoundingClientRect();\n            var percent = (e.clientX - rect.left) \/ rect.width;\n            video.currentTime = percent * video.duration;\n        });\n\n        video.addEventListener(\"ended\", function(){\n            playBtn.innerHTML = \"\u25b6\";\n            showControls();\n        });\n\n        wrapper.addEventListener(\"mousemove\", showControls);\n\n    });\n    <\/script>\n    \n\n\n\n\n\n    <div id=\"wrapper_video_69e608ca343f8\" style=\"\n        width:100%;\n        position:relative;\n        overflow:hidden;\n        background:#000;\n        cursor:pointer;\n    \">\n\n        <video \n            id=\"video_69e608ca343f8\" \n            preload=\"metadata\"\n            poster=\"\"\n            style=\"\n                width:100%;\n                height:auto;\n                display:block;\n            \"\n        >\n            <source src=\"https:\/\/samueljuliangrace.com\/wp-content\/uploads\/2026\/02\/from-back.mp4\" type=\"video\/mp4\">\n        <\/video>\n\n        <!-- Controls -->\n        <div id=\"controls_video_69e608ca343f8\" style=\"\n            position:absolute;\n            inset:0;\n            display:flex;\n            flex-direction:column;\n            justify-content:flex-end;\n            padding:18px;\n            box-sizing:border-box;\n            opacity:1;\n            transition:opacity .3s ease;\n        \">\n\n            <div style=\"\n                display:flex;\n                align-items:center;\n                gap:14px;\n            \">\n\n                <!-- Play Button -->\n                <div id=\"playbtn_video_69e608ca343f8\" style=\"\n                    width:28px;\n                    height:28px;\n                    display:flex;\n                    align-items:center;\n                    justify-content:center;\n                    color:#444;\n                    font-size:16px;\n                    user-select:none;\n                \">\n                    \u25b6\n                <\/div>\n\n                <!-- Custom Timeline -->\n                <div id=\"timeline_video_69e608ca343f8\" style=\"\n                    flex:1;\n                    height:2px;\n                    background:#dcdcdc;\n                    position:relative;\n                \">\n                    <div id=\"progress_video_69e608ca343f8\" style=\"\n                        width:0%;\n                        height:100%;\n                        background:#444;\n                    \"><\/div>\n                <\/div>\n\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <script>\n    document.addEventListener(\"DOMContentLoaded\", function() {\n\n        var video = document.getElementById(\"video_69e608ca343f8\");\n        var wrapper = document.getElementById(\"wrapper_video_69e608ca343f8\");\n        var controls = document.getElementById(\"controls_video_69e608ca343f8\");\n        var playBtn = document.getElementById(\"playbtn_video_69e608ca343f8\");\n        var timeline = document.getElementById(\"timeline_video_69e608ca343f8\");\n        var progress = document.getElementById(\"progress_video_69e608ca343f8\");\n\n        var hideTimeout;\n\n        function showControls() {\n            controls.style.opacity = \"1\";\n            clearTimeout(hideTimeout);\n            if (!video.paused) {\n                hideTimeout = setTimeout(function() {\n                    controls.style.opacity = \"0\";\n                }, 1500);\n            }\n        }\n\n        function togglePlay(e) {\n            if (e.target === timeline || timeline.contains(e.target)) return;\n\n            if (video.paused) {\n                video.play();\n                playBtn.innerHTML = \"\u275a\u275a\";\n            } else {\n                video.pause();\n                playBtn.innerHTML = \"\u25b6\";\n            }\n            showControls();\n        }\n\n        wrapper.addEventListener(\"click\", togglePlay);\n\n        video.addEventListener(\"timeupdate\", function() {\n            if(video.duration){\n                var percent = (video.currentTime \/ video.duration) * 100;\n                progress.style.width = percent + \"%\";\n            }\n        });\n\n        timeline.addEventListener(\"click\", function(e){\n            var rect = timeline.getBoundingClientRect();\n            var percent = (e.clientX - rect.left) \/ rect.width;\n            video.currentTime = percent * video.duration;\n        });\n\n        video.addEventListener(\"ended\", function(){\n            playBtn.innerHTML = \"\u25b6\";\n            showControls();\n        });\n\n        wrapper.addEventListener(\"mousemove\", showControls);\n\n    });\n    <\/script>\n    \n\n\n\n\n    <div class=\"sjg-audio-player\" data-audio=\"https:\/\/samueljuliangrace.com\/wp-content\/uploads\/2026\/02\/Untitled_System_Contact_Mic.mp3\">\n        <div class=\"sjg-waveform\">\n            <div id=\"sjg_wave_69e608ca3440a\" class=\"sjg-wave-canvas\"><\/div>\n            <div class=\"sjg-loader\"><\/div>\n           <div class=\"sjg-audio-toggle\">\n    <span class=\"sjg-label\">LISTEN<\/span>\n<\/div>\n        <\/div>\n        <script>\n        (function () {\n            const wrapper = document.currentScript.closest(\".sjg-audio-player\");\n            if (!wrapper) return;\n            const canvas = wrapper.querySelector(\".sjg-wave-canvas\");\n            const loader = wrapper.querySelector(\".sjg-loader\");\n            const button = wrapper.querySelector(\".sjg-audio-toggle\");\n            const audioUrl = wrapper.dataset.audio;\n            let wavesurfer = null;\n\n            function setPlayingState(isPlaying) {\n                button.classList.toggle(\"is-playing\", isPlaying);\n                document.body.classList.toggle(\"sjg-audio-playing\", isPlaying);\n            }\n\n            button.addEventListener(\"click\", function () {\n                if (!wavesurfer) {\n                    loader.style.width = \"0%\";\n                    wavesurfer = WaveSurfer.create({\n                        container: canvas,\n                        height: canvas.clientHeight,\n                        waveColor: \"rgba(0,0,0,0.2)\",\n                        progressColor: \"rgba(0,0,0,0.9)\",\n                        barWidth: 2,\n                        barGap: 1,\n                        normalize: true,\n                        cursorWidth: 0,\n                    });\n                    wavesurfer.load(audioUrl);\n\n                    wavesurfer.on(\"loading\", (progress) => {\n                        loader.style.opacity = \"0.5\";\n                        loader.style.width = progress + \"%\";\n                    });\n\n                    wavesurfer.on(\"ready\", () => {\n                        loader.style.width = \"100%\";\n                        setTimeout(() => loader.style.opacity = \"0\", 200);\n                        wavesurfer.drawBuffer();\n                        wavesurfer.play();\n                    });\n\n                    wavesurfer.on(\"play\", () => {\n                        document.querySelectorAll(\".sjg-wave-canvas\").forEach(el => {\n                            if (el !== canvas && el.wavesurferInstance) {\n                                el.wavesurferInstance.pause();\n                            }\n                        });\n                        window.sjgActiveWaveSurfer = wavesurfer;\n                        window.sjgActiveToggleButton = button;\n                        setPlayingState(true);\n                    });\n\n                    wavesurfer.on(\"pause\", () => {\n                        setPlayingState(false);\n                    });\n\n                    canvas.wavesurferInstance = wavesurfer;\n                    return;\n                }\n                wavesurfer.playPause();\n            });\n        })();\n        <\/script>\n    <\/div>\n    \n\n\n\n    <div class=\"sjg-audio-player\" data-audio=\"https:\/\/samueljuliangrace.com\/wp-content\/uploads\/2026\/02\/Untitled_System_Normal_Mic.mp3\">\n        <div class=\"sjg-waveform\">\n            <div id=\"sjg_wave_69e608ca34424\" class=\"sjg-wave-canvas\"><\/div>\n            <div class=\"sjg-loader\"><\/div>\n           <div class=\"sjg-audio-toggle\">\n    <span class=\"sjg-label\">LISTEN<\/span>\n<\/div>\n        <\/div>\n        <script>\n        (function () {\n            const wrapper = document.currentScript.closest(\".sjg-audio-player\");\n            if (!wrapper) return;\n            const canvas = wrapper.querySelector(\".sjg-wave-canvas\");\n            const loader = wrapper.querySelector(\".sjg-loader\");\n            const button = wrapper.querySelector(\".sjg-audio-toggle\");\n            const audioUrl = wrapper.dataset.audio;\n            let wavesurfer = null;\n\n            function setPlayingState(isPlaying) {\n                button.classList.toggle(\"is-playing\", isPlaying);\n                document.body.classList.toggle(\"sjg-audio-playing\", isPlaying);\n            }\n\n            button.addEventListener(\"click\", function () {\n                if (!wavesurfer) {\n                    loader.style.width = \"0%\";\n                    wavesurfer = WaveSurfer.create({\n                        container: canvas,\n                        height: canvas.clientHeight,\n                        waveColor: \"rgba(0,0,0,0.2)\",\n                        progressColor: \"rgba(0,0,0,0.9)\",\n                        barWidth: 2,\n                        barGap: 1,\n                        normalize: true,\n                        cursorWidth: 0,\n                    });\n                    wavesurfer.load(audioUrl);\n\n                    wavesurfer.on(\"loading\", (progress) => {\n                        loader.style.opacity = \"0.5\";\n                        loader.style.width = progress + \"%\";\n                    });\n\n                    wavesurfer.on(\"ready\", () => {\n                        loader.style.width = \"100%\";\n                        setTimeout(() => loader.style.opacity = \"0\", 200);\n                        wavesurfer.drawBuffer();\n                        wavesurfer.play();\n                    });\n\n                    wavesurfer.on(\"play\", () => {\n                        document.querySelectorAll(\".sjg-wave-canvas\").forEach(el => {\n                            if (el !== canvas && el.wavesurferInstance) {\n                                el.wavesurferInstance.pause();\n                            }\n                        });\n                        window.sjgActiveWaveSurfer = wavesurfer;\n                        window.sjgActiveToggleButton = button;\n                        setPlayingState(true);\n                    });\n\n                    wavesurfer.on(\"pause\", () => {\n                        setPlayingState(false);\n                    });\n\n                    canvas.wavesurferInstance = wavesurfer;\n                    return;\n                }\n                wavesurfer.playPause();\n            });\n        })();\n        <\/script>\n    <\/div>\n    \n<\/div>\n\n\n\n<div class=\"wp-block-group work-meta is-layout-flow wp-container-core-group-is-layout-e603688c wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-group work-meta-single is-layout-flow wp-container-core-group-is-layout-e603688c wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<h2 class=\"wp-block-heading has-text-align-right\">Untitled System  <em>202<\/em>4<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-group work-description-wrap is-layout-flow wp-container-core-group-is-layout-e603688c wp-block-group-is-layout-flow\" style=\"margin-top:0;margin-bottom:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"work-description\">At the 2024 Rundgang of the Kunsthochschule Kassel. Samuel present the work &#8220;Untitled System&#8221; consisting of an architectural intervention to the department of Sound&#8217;s building. Shaking the building with sub-sonic frequencies the piece was aimed at challenging the status quo of the art scene and questioning what is accepted at these type of artistic shows. Presented right next to more traditional artistic mediums the artwork quite literally shook the art college.<br>The first audio heard is a recording using a contact microphone placed on a part of the shaking building to record the sound of the structure vibrating. The frequencies are extremely low and may be at times hard to perceive.<br>The second audio is a recording of the rattling aluminium frames of the windows, the doors moving in their frames and the metal handrailings vibrating opposite the classrooms windows.<\/p>\n\n\n\n<p class=\"work-description\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Untitled System 2024 At the 2024 Rundgang of the Kunsthochschule Kassel. Samuel present the work &#8220;Untitled System&#8221; consisting of an architectural intervention to the department of Sound&#8217;s building. Shaking the building with sub-sonic frequencies the piece was aimed at challenging the status quo of the art scene and questioning what is accepted at these type [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"content-page-wide","meta":{"_uag_custom_page_level_css":"","_swt_meta_header_display":false,"_swt_meta_footer_display":false,"_swt_meta_site_title_display":false,"_swt_meta_sticky_header":false,"_swt_meta_transparent_header":false,"footnotes":""},"class_list":["post-1143","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"samueljuliangrace@gmail.com","author_link":"https:\/\/samueljuliangrace.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Untitled System 2024 At the 2024 Rundgang of the Kunsthochschule Kassel. Samuel present the work &#8220;Untitled System&#8221; consisting of an architectural intervention to the department of Sound&#8217;s building. Shaking the building with sub-sonic frequencies the piece was aimed at challenging the status quo of the art scene and questioning what is accepted at these type&hellip;","_links":{"self":[{"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/pages\/1143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1143"}],"version-history":[{"count":19,"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/pages\/1143\/revisions"}],"predecessor-version":[{"id":1177,"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=\/wp\/v2\/pages\/1143\/revisions\/1177"}],"wp:attachment":[{"href":"https:\/\/samueljuliangrace.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}