{"id":204,"date":"2026-10-29T21:53:56","date_gmt":"2026-10-29T21:53:56","guid":{"rendered":"https:\/\/amarante.vdwoerd.com\/?post_type=compositie&#038;p=204"},"modified":"2026-10-29T22:22:07","modified_gmt":"2026-10-29T22:22:07","slug":"through-absence","status":"publish","type":"compositie","link":"https:\/\/amarante.vdwoerd.com\/nl\/compositie\/through-absence\/","title":{"rendered":"Through Absence"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"204\" class=\"elementor elementor-204\" data-elementor-post-type=\"compositie\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8f1730c animated-slow e-flex e-con-boxed elementor-invisible e-con e-parent\" data-id=\"8f1730c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8217ca3 elementor-widget elementor-widget-global elementor-global-226 elementor-widget-html\" data-id=\"8217ca3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<div class=\"title\">\n    <div class=\"through\">\n        <div class=\"cryptic\">\n            <span>*<\/span><span>t<\/span><span>r\u0325<\/span><span>h<\/span><span><sub>2<\/sub><\/span><span>(<\/span><span>h<\/span><span><sub>3<\/sub><\/span><span>)<\/span><span>k<\/span><span><sup>w<\/sup><\/span><span>-<\/span><\/div>\n        <div class=\"final\">\n            &nbsp;<span>t<\/span><span>h<\/span><span>r<\/span><span>o<\/span><span>u<\/span><span>g<\/span><span>h<\/span>\n        <\/div>\n    <\/div>\n    <div class=\"abscence\">\n        &nbsp;<span>a<\/span><span>b<\/span><span>s<\/span><span>e<\/span><span>n<\/span><span>c<\/span><span>e<\/span>\n    <\/div>\n<\/div>\n\n\n<script>\n    const $title = document.querySelector('.title')\n    const $lettersThroughCryptic = document.querySelectorAll('.title .through .cryptic span')\n    const $lettersNormal = document.querySelectorAll('.title .abscence span, .title .through .final span')\n\n\n    \/\/ Assign unique random ids to every <span> character ---------\n    assignRandomIndicesToElements($lettersThroughCryptic)\n    assignRandomIndicesToElements($lettersNormal)\n\n\n    \/\/ Update loop -----------------------------------------------\n    const bufferZoneX = 100\n    let startTimestamp = Date.now()\n    let currentTimestamp = startTimestamp\n\n    setInterval(() => {\n        currentTimestamp = Date.now()\n        const timeDifference = (currentTimestamp - startTimestamp) \/ 1000\n        \/\/ const progressNormalized = map(timeDifference, 0, 10, 0, 1)\n        const progressNormalized = map(Math.sin(currentTimestamp \/ 4000), -1, 1, 0, 1)\n        \/\/ console.log(timeDifference, progressNormalized)\n\n        updateAnimation(progressNormalized)\n    }, 16)\n\n    \/\/\/\/ mouse version\n    \/\/ addEventListener('mousemove', (e) => {\n    \/\/     const progressNormalized = map(e.clientX, bufferZoneX, innerWidth - bufferZoneX, 0, 1)\n    \/\/     updateAnimation(progressNormalized)\n    \/\/ })\n\n\n    function updateAnimation(progressNormalized) {\n        const distCryptic = Math.abs(progressNormalized - .3)\n        \/\/ console.log(distCryptic)\n\n        const lettersFadeoutCryptic = $lettersThroughCryptic.length - map(distCryptic, 0, .4, 0, $lettersThroughCryptic.length) \n        const lettersFadeinNormal = map(progressNormalized, .6, 1, 0, $lettersNormal.length)\n\n        for (const $letter of $lettersThroughCryptic) {\n            $letter.classList.toggle('visible', lettersFadeoutCryptic > $letter.dataset.i)\n        }\n\n        for (const $letter of $lettersNormal) {\n            $letter.classList.toggle('visible', lettersFadeinNormal > $letter.dataset.i)\n        }\n    }\n\n\n    \/\/ DOM Utils -------------------------------------------------\n    function assignRandomIndicesToElements($elements) {\n        let ids = [];\n        for (let index = 0; index < $elements.length; index++) {\n            ids.push(index)\n        }\n\n        for (const $el of $elements) {\n            let randomIndex = randomInt(ids.length)\n            let i = ids[randomIndex]\n            ids.splice(randomIndex, 1) \n\n            $el.dataset.i = i\n            $el.setAttribute('style', `--i: ${i}`);\n        }\n    }\n\n\n    \/\/ Math Utils ------------------------------------------------\n    function map(n, start1, stop1, start2, stop2, withinBounds) {\n        return clamp((n - start1) \/ (stop1 - start1) * (stop2 - start2) + start2, start2, stop2);\n    }\n\n    function lerp(start, stop, amt) {\n        return amt * (stop - start) + start;\n    }\n\n    function randomInt(max) {\n        return Math.floor(Math.random() * max);\n    }\n\n    function clamp(n, min, max) {\n        return Math.max(Math.min(n, max), min);\n    }\n<\/script>\n\n\n\n<style>\n\/*body {*\/\n\/*    height: 100vh;*\/\n\/*    margin: 0;*\/\n\/*    display: flex;*\/\n\/*}*\/\n\n.title {\n    position: relative;\n    font-family: monospace;\n    font-size: 60px;\n    width: max-content;\n    margin: auto;\n\n    letter-spacing: .5em;\n}\n\n\/* through *\/\n.through .final {\n    top: 0;\n    position: absolute;\n    top: .15lh;\n}\n\n.title span.visible {\n    transition: all 1s;\n}\n\n.title span:not(.visible) {\n    opacity: 0;\n    filter: blur(3px);\n    transition: all .2s;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d15554 e-flex e-con-boxed e-con e-parent\" data-id=\"1d15554\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e6dd3d animated-slow elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"2e6dd3d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:2000}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>In some cases, the title of a piece comes to me first, without any sound or strictly musical idea. Sometimes the feeling connected to such a word or combination of words is so strong that my intuition presses upon my heart that there is a meaning behind these words, and with that, a composition; a musical world. With T h rou gh A b sence, that was the case.<\/p><p>As the internet has been generous enough to tell me, a beautiful discovery in the etymology of the word t h rou gh is that it likely stems from the Pre-Germanic : *trh\u2082(h\u2083)k\u02b7- (do not ask me how to pronounce this, but doesn \u2019t it look fascinating?). This compound, as they call it, is rooted in the Proto-Indo-European elements *terh\u2082- (\u201cto cross \u201d) and *h\u2083ek\u02b7 &#8211; (\u201cto see \u201d). So, to see across something, perhaps? Then there is the word, ab sence, of course coming from latin ab (o\ufb00, away from) and esse (to be).<\/p><p>The title of this piece then seems to find its essence in the seeming friction between the meaning of these two definitions. Where absence implies a void, a state of being missing or away, through embodies the exact opposite: an active movement, a deliberate act of crossing over or seeing across a threshold.<\/p><p>A bridge between two \u201csomethings. \u201d<\/p><p class=\"p1\">The act of overcoming, of letting go, is rooted in something mystical\u2014mystical in the sense of that which can not be fully grasped. This piece consists of attempts to reunite that which is separate, of purposeful movements finding a presence in a \u201cthrough,\u201d a being in motion. Maybe, it is at the intersection of t h at where beauty can be found. A moment in which that what cannot be grasped shows the nature of its face and vanishes before we can truly understand.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"featured_media":0,"parent":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-204","compositie","type-compositie","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/compositie\/204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/compositie"}],"about":[{"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/types\/compositie"}],"version-history":[{"count":5,"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/compositie\/204\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/compositie\/204\/revisions\/254"}],"wp:attachment":[{"href":"https:\/\/amarante.vdwoerd.com\/nl\/wp-json\/wp\/v2\/media?parent=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}