{"id":1775,"date":"2023-04-07T09:49:47","date_gmt":"2023-04-07T16:49:47","guid":{"rendered":"https:\/\/www.coastalvectors.com\/blog\/?p=1775"},"modified":"2023-04-25T10:46:06","modified_gmt":"2023-04-25T17:46:06","slug":"phasmophobia-and-bezier-curves","status":"publish","type":"post","link":"https:\/\/www.coastalvectors.com\/blog\/2023\/04\/phasmophobia-and-bezier-curves\/","title":{"rendered":"Phasmophobia and B\u00e9zier Curves"},"content":{"rendered":"<p><a href=\"https:\/\/www.coastalvectors.com\/blog\/2023\/04\/phasmophobia-and-bezier-curves\/phasmophobia_vg\/\" rel=\"attachment wp-att-1782\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1782\" src=\"https:\/\/www.coastalvectors.com\/blog\/wp-content\/uploads\/2023\/03\/Phasmophobia_VG-450x210.jpg\" alt=\"\" width=\"450\" height=\"210\" srcset=\"https:\/\/www.coastalvectors.com\/blog\/wp-content\/uploads\/2023\/03\/Phasmophobia_VG-450x210.jpg 450w, https:\/\/www.coastalvectors.com\/blog\/wp-content\/uploads\/2023\/03\/Phasmophobia_VG.jpg 460w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<p>I&#8217;ve been playing a lot of <a href=\"https:\/\/en.wikipedia.org\/wiki\/Phasmophobia_(video_game)\">Phasmophobia<\/a> recently. It&#8217;s a ghost-hunting game where you, and a team of up-to 3 other investigators explore haunted properties looking for evidence in order to determine what type of ghost is present. At the same time you have to try to not get killed at the hands of said ghost.<\/p>\n<h3>So what does this game have to do with <a href=\"https:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\">B\u00e9zier curves<\/a>??<\/h3>\n<p>We&#8217;ll get there. Trust me.<\/p>\n<p>In the most recent release, the developers added in some riddles and clues to tease something coming in the next major revision. The problem I ran into was that if I had a question about a riddle I couldn&#8217;t solve, googling would only bring up spoiler-filled results. I don&#8217;t want answers, but little nudges in the correct direction.<\/p>\n<p>I decided to take it upon myself to create a repository of information about the clues so one can decide which information to be exposed to, thereby minimizing risk of unwanted spoilage. I give you, <a href=\"https:\/\/yingster.net\/misc\/runes\/\">Phasmophobia Rune Hints<\/a>.<\/p>\n<h3>This still has nothing to do with B\u00e9zier curves! Get on with it!<\/h3>\n<p>Dear reader, I am nearly there. Believe me!<\/p>\n<p>One of the evidences of ghost ghost activity in the game is what they call &#8220;Ghost Orbs&#8221;. They are floating balls of light that are only visible on video camera. (In reality these are specs of dust reflecting light close to a lens&#8230;) In any case, I wanted to spruce up my rune hinting website with some Phasmophobia appropriate ambiance. I wanted to add some ghost orbs.<\/p>\n<p>My first implementation was to take a PNG of a ghost orb and use javascript to move it in a specific direction while fading it in and out at the ends of the animation. This yielded a result and was <em>maybe<\/em> passable, but it wasn&#8217;t great. My brother suggested to use B\u00e9zier curves in order to have it follow a more natural curved path.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/apps\/bezier\/phas_demo.html\" width=\"100%\" height=\"500px\"><\/iframe><\/p>\n<p>In this example, the ghost orbs both start and end at the same location, however the one on the left follows a linear path while the one on the right follows a B\u00e9zier curve. (The points are chosen at random, so you may have to watch a few cycles to get an interesting comparison). Below is a simplified example of the code to demonstrate the minimal logic required to compute the curved path.<\/p>\n<pre><code>function find_point_on_line(p1, p2, percent){\r\n    let p3 = {\r\n        \"x\" : ((p2.x - p1.x) * percent) + p1.x,\r\n        \"y\" : ((p2.y - p1.y) * percent) + p1.y,\r\n    }\r\n    return p3;\r\n}\r\n\r\nfunction follow_bezier_curve(b1, b2, b3, percent){\r\n    if (percent &gt;= 1) return; \/\/ We finished\r\n    let p1 = find_point_on_line(b1, b2, percent);\r\n    let p2 = find_point_on_line(b2, b3, percent);\r\n    let p3 = find_point_on_line(p1, p2, percent);\r\n    move_orb(p3);\r\n    timer = setTimeout(() =&gt; follow_bezier_curve(percent+.001), 1000\/60);\r\n}<\/code><\/pre>\n<p>B\u00e9zier curves are pretty common. I&#8217;ve been using them for decades in software like Adobe Illustrator or Affinity Designer. I remember learning about them in college. But I&#8217;ve actually never had a need to program my own.<\/p>\n<p>As it turns out, they are really simple. A quadratic B\u00e9zier curve uses 3 points; a, b, and c. First you draw a path from a to b, and from b to c. Then you draw paths between points at equivalent subdivisions on these paths. The result is a really nice curve. It&#8217;s <em>really hard<\/em> to explain with words, so try out this interactive animation instead:<\/p>\n<p><iframe loading=\"lazy\" src=\"\/apps\/bezier\/animate_quad_demo.html\" width=\"100%\" height=\"500px\"><\/iframe><\/p>\n<p>This is the type of B\u00e9zier curve I used on the Phasmophobia site.<\/p>\n<p>There are also cubic B\u00e9zier curves. Cubic curves are basically two quadratic curves combined. Let&#8217;s say you have 4 paints; a, b, c, and d. You would create two quadratic curves; abc, bcd, then your final curve will be created by the same process along the resulting curves. <\/p>\n<p><iframe loading=\"lazy\" src=\"\/apps\/bezier\/animate_cubic_demo.html\" width=\"100%\" height=\"500px\"><\/iframe><\/p>\n<p>These 4-point quadratic curves are how vector drawing programs like Illustrator build paths. the outer two points act as nodes, and the inner two act as the handles.<\/p>\n<p><iframe loading=\"lazy\" src=\"\/apps\/bezier\/draw_demo.html\" width=\"100%\" height=\"500px\"><\/iframe><\/p>\n<p>Although not very complicated, I thought it was a fun diversion, and wanted to share.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve been playing a lot of Phasmophobia recently. It&#8217;s a ghost-hunting game where you, and a team of up-to 3 other investigators explore haunted properties looking for evidence in order to determine what type of ghost is present. At the same time you have to try to not get killed at the hands of said &hellip; <a href=\"https:\/\/www.coastalvectors.com\/blog\/2023\/04\/phasmophobia-and-bezier-curves\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Phasmophobia and B\u00e9zier Curves<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,11],"tags":[],"class_list":["post-1775","post","type-post","status-publish","format-standard","hentry","category-programming","category-projects"],"_links":{"self":[{"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/posts\/1775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/comments?post=1775"}],"version-history":[{"count":14,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/posts\/1775\/revisions"}],"predecessor-version":[{"id":1800,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/posts\/1775\/revisions\/1800"}],"wp:attachment":[{"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/media?parent=1775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/categories?post=1775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.coastalvectors.com\/blog\/wp-json\/wp\/v2\/tags?post=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}