{"id":171,"date":"2024-02-17T18:48:59","date_gmt":"2024-02-17T17:48:59","guid":{"rendered":"https:\/\/trauma.empty.am\/?p=171"},"modified":"2024-02-17T18:49:00","modified_gmt":"2024-02-17T17:49:00","slug":"identity","status":"publish","type":"post","link":"https:\/\/trauma.empty.am\/?p=171","title":{"rendered":"Identity"},"content":{"rendered":"\n<style>\n.text {\n  font-size: 28px\n}\n.dud {\n  color: #BFBFBF\n}\n<\/style>\n<div class=\"text\"><\/div>\n<script>\/\/ \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r\n\/\/ TextScramble\r\n\/\/ \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r\n\r\nclass TextScramble {\r\n  constructor(el) {\r\n    this.el = el\r\n    this.chars = '\u0561\u0562\u0563\u0564\u0565\u0566\u0567\u0568\u0569\u056a\u056b\u056c\u056d\u056e\u056f\u0570\u0571\u0572\u0573\u0574\u0575\u0576\u0577\u0578\u0579\u057a\u057b\u057c\u057d\u057e\u057f\u0580\u0581\u0578\u0582\u0583\u0584\u0587\u0585\u0586'\r\n    this.update = this.update.bind(this)\r\n  }\r\n  setText(newText) {\r\n    const oldText = this.el.innerText\r\n    const length = Math.max(oldText.length, newText.length)\r\n    const promise = new Promise((resolve) => this.resolve = resolve)\r\n    this.queue = []\r\n    for (let i = 0; i < length; i++) {\r\n      const from = oldText[i] || ''\r\n      const to = newText[i] || ''\r\n      const start = Math.floor(Math.random() * 200)\r\n      const end = start + Math.floor(Math.random() * 200)\r\n      this.queue.push({ from, to, start, end })\r\n    }\r\n    cancelAnimationFrame(this.frameRequest)\r\n    this.frame = 0\r\n    this.update()\r\n    return promise\r\n  }\r\n  update() {\r\n    let output = ''\r\n    let complete = 0\r\n    for (let i = 0, n = this.queue.length; i < n; i++) {\r\n      let { from, to, start, end, char } = this.queue[i]\r\n      if (this.frame >= end) {\r\n        complete++\r\n        output += to\r\n      } else if (this.frame >= start) {\r\n        if (!char || Math.random() < 0.1) {\r\n          char = this.randomChar()\r\n          this.queue[i].char = char\r\n        }\r\n        output += `<span class=\"dud\">${char}<\/span>`\r\n      } else {\r\n        output += from\r\n      }\r\n    }\r\n    this.el.innerHTML = output\r\n    if (complete === this.queue.length) {\r\n      this.resolve()\r\n    } else {\r\n      this.frameRequest = requestAnimationFrame(this.update)\r\n      this.frame++\r\n    }\r\n  }\r\n  randomChar() {\r\n    return this.chars[Math.floor(Math.random() * this.chars.length)]\r\n  }\r\n}\r\n\r\n\/\/ \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r\n\/\/ Example\r\n\/\/ \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\r\n\r\nconst phrases = [\r\n  'I try to find words',\r\n  'To write about my identity.',\r\n  'It\\'s fluid.',\r\n  'It\\'s unknown.',\r\n  'Who am I?',\r\n  'Where do I belong?',\r\n  'Why do I live for?',\r\n  'I try to find the language',\r\n  'To write about my identity.'\r\n]\r\n\r\nconst el = document.querySelector('.text')\r\nconst fx = new TextScramble(el)\r\n\r\nlet counter = 0\r\nconst next = () => {\r\n  fx.setText(phrases[counter]).then(() => {\r\n    setTimeout(next, 1500)\r\n  })\r\n  counter = (counter + 1) % phrases.length\r\n}\r\n\r\nnext()<\/script>\n","protected":false},"excerpt":{"rendered":"","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-171","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/171","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=171"}],"version-history":[{"count":6,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=\/wp\/v2\/posts\/171\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trauma.empty.am\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}