{"id":43,"date":"2024-02-15T13:18:17","date_gmt":"2024-02-15T12:18:17","guid":{"rendered":"https:\/\/trauma.empty.am\/?p=43"},"modified":"2024-02-28T13:08:31","modified_gmt":"2024-02-28T12:08:31","slug":"destruction","status":"publish","type":"post","link":"https:\/\/trauma.empty.am\/?p=43","title":{"rendered":"Destruction"},"content":{"rendered":"\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/matter-js\/0.19.0\/matter.min.js\"><\/script>\n<script>const splitWords = () => {\r\n  const textNode = document.querySelector(\".text\");\r\n  const text = textNode.textContent;\r\n  const newDomElements = text.split(\" \").map((text) => {\r\n    const highlighted =\r\n      text.startsWith(`self`) ||\r\n      text.startsWith(`storm`) ||\r\n      text.startsWith(`boat`);\r\n    return `<span class=\"word ${\r\n      highlighted ? \"highlighted\" : null\r\n    }\">${text}<\/span>`;\r\n  });\r\n  textNode.innerHTML = newDomElements.join(\"\");\r\n};\r\n\r\nconst renderCanvas = () => {\r\n  const Engine = Matter.Engine;\r\n  const Render = Matter.Render;\r\n  const World = Matter.World;\r\n  const Bodies = Matter.Bodies;\r\n  const Runner = Matter.Runner;\r\n  const params = {\r\n    isStatic: true,\r\n    render: {\r\n      fillStyle: \"transparent\"\r\n    }\r\n  };\r\n  const canvasSize = {\r\n    width: window.innerWidth,\r\n    height: window.innerHeight \/ 8,\r\n  };\r\n  const engine = Engine.create({});\r\n\r\n  const render = Render.create({\r\n    element: document.body,\r\n    engine: engine,\r\n    options: {\r\n      ...canvasSize,\r\n      background: \"transparent\",\r\n      wireframes: false\r\n    }\r\n  });\r\n  const floor = Bodies.rectangle(\r\n    canvasSize.width \/ 2,\r\n    canvasSize.height * 8,\r\n    canvasSize.width,\r\n    50,\r\n    params\r\n  );\r\n  const wall1 = Bodies.rectangle(\r\n    0,\r\n    canvasSize.height,\r\n    50,\r\n    canvasSize.height,\r\n    params\r\n  );\r\n  const wall2 = Bodies.rectangle(\r\n    canvasSize.width,\r\n    canvasSize.height \/ 2,\r\n    50,\r\n    canvasSize.height,\r\n    params\r\n  );\r\n  const top = Bodies.rectangle(\r\n    canvasSize.width \/ 2,\r\n    0,\r\n    canvasSize.width,\r\n    50,\r\n    params\r\n  );\r\n  const wordElements = document.querySelectorAll(\".word\");\r\n  const wordBodies = [...wordElements].map((elemRef) => {\r\n    const width = elemRef.offsetWidth;\r\n    const height = elemRef.offsetHeight;\r\n\r\n    return {\r\n      body: Matter.Bodies.rectangle(canvasSize.width \/ 2, 0, width, height, {\r\n        render: {\r\n          fillStyle: \"transparent\"\r\n        }\r\n      }),\r\n      elem: elemRef,\r\n      render() {\r\n        const { x, y } = this.body.position;\r\n        this.elem.style.top = `${y - 20}px`;\r\n        this.elem.style.left = `${x - width \/ 2}px`;\r\n        this.elem.style.transform = `rotate(${this.body.angle}rad)`;\r\n      }\r\n    };\r\n  });\r\n\r\n  const mouse = Matter.Mouse.create(document.body);\r\n  const mouseConstraint = Matter.MouseConstraint.create(engine, {\r\n    mouse,\r\n    constraint: {\r\n      stiffness: 0.2,\r\n      render: {\r\n        visible: false\r\n      }\r\n    }\r\n  });\r\n  mouse.element.removeEventListener(\"mousewheel\", mouse.mousewheel);\r\n  mouse.element.removeEventListener(\"DOMMouseScroll\", mouse.mousewheel);\r\n\r\n  World.add(engine.world, [\r\n    floor,\r\n    ...wordBodies.map((box) => box.body),\r\n    wall1,\r\n    wall2,\r\n    top,\r\n    mouseConstraint\r\n  ]);\r\n  render.mouse = mouse;\r\n  Runner.run(engine);\r\n  Render.run(render);\r\n\r\n  (function rerender() {\r\n    wordBodies.forEach((element) => {\r\n      element.render();\r\n    });\r\n    Matter.Engine.update(engine);\r\n    requestAnimationFrame(rerender);\r\n  })();\r\n};\r\n\r\nwindow.addEventListener(\"DOMContentLoaded\", (event) => {\r\n  splitWords();\r\n  renderCanvas();\r\n});<\/script>\n<style class=\"wpcode-css-snippet\">.word {\r\n  position: absolute;\r\n  cursor: grab;\r\n  font-size: 30px;\r\n}\r\n.word.highlighted {\r\n  font-weight: bold;\r\n}<\/style>\n<div class=\"text\">\nI am sailing in a new waters with my memory of past destruction the boat is still the same but hope is different will the storm appear again will I avoid it or face it will I have courage to accept it I am sailing in a new waters with my memory of past self\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:380px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>I am sailing in a new waters with my memory of past destruction the boat is still the same but hope is different will the storm appear again will I avoid it or face it will I have courage to accept it I am sailing in a new waters with my memory of past self<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43"}],"version-history":[{"count":14,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/43\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}