{"id":405,"date":"2021-09-08T02:07:25","date_gmt":"2021-09-08T06:07:25","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=405"},"modified":"2021-09-08T02:07:25","modified_gmt":"2021-09-08T06:07:25","slug":"lsh-linewalk","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/lsh\/09\/08\/lsh-linewalk\/","title":{"rendered":"lsh-LineWalk"},"content":{"rendered":"<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-1.svg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-1.svg\" alt=\"\" width=\"640\" height=\"480\" class=\"alignnone size-medium wp-image-407\" \/><\/a><br \/>\n<img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-480x480.png\" alt=\"\" width=\"480\" height=\"480\" class=\"alignnone size-medium wp-image-409\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-480x480.png 480w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-1024x1024.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-150x150.png 150w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-768x768.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled-1200x1200.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled.png 1522w\" sizes=\"(max-width: 480px) 85vw, 480px\" \/><\/p>\n<p>As I worked on these, I began to think of them as pinwheels. Getting the right &#8220;flutter&#8221; out was a challenge, and I also had a bug for a little where content ended up mostly off the page. I ended up trying to &#8220;weave&#8221; in the iteration by flipping whether I add or subtract it in the simplex noise for the x or y.<\/p>\n<pre>\r\nconst Simplex = require(\"https:\/\/unpkg.com\/simplex-noise@2.4.0\/simplex-noise.js\");\r\nconst simplex = new Simplex();\r\nconst width = 761;\r\nconst height = width;\r\n\/\/ source: https:\/\/rosettacode.org\/wiki\/Map_range#ES6\r\nconst rangeMap = (a, b) =&gt; (s) =&gt; {\r\n  const [a1, a2] = a;\r\n  const [b1, b2] = b;\r\n  \/\/ Scaling up an order, and then down, to bypass a potential,\r\n  \/\/ precision issue with negative numbers.\r\n  return ((((b2 - b1) * (s - a1)) \/ (a2 - a1)) * 10 + 10 * b1) \/ 10;\r\n}\r\n\r\nfunction generatePaths() {\r\n  const start = [Math.random() * width, Math.random() * height];\r\n  const step = 200.0;\r\n  const path = [start];\r\n  for (let i = 0; i &lt; 100; i++) {\r\n    const [px, py] = path.at(-1);\r\n    const theta = simplex.noise2D(px * px * 10 * +i * i, py * py * 10 - i * i);\r\n    const t = rangeMap([-1, 1], [-Math.PI, Math.PI])(theta);\r\n    const x =\r\n      Math.cos(t) * step + simplex.noise2D(px + i, py - i) * 100 + width \/ 2;\r\n    const y =\r\n      Math.sin(t) * step + simplex.noise2D(px - i, py + i) * 100 + height \/ 2;\r\n    path.push([x, y]);\r\n  }\r\n  return path;\r\n}\r\n\r\nfunction draw() {\r\n  const svg = d3.create(&quot;svg&quot;).attr(&quot;width&quot;, width).attr(&quot;height&quot;, height);\r\n  svg\r\n    .append(&quot;path&quot;)\r\n    .attr(&quot;d&quot;, d3.line()(generatePaths()))\r\n    .attr(&quot;fill&quot;, &quot;none&quot;)\r\n    .attr(&quot;stroke&quot;, &quot;black&quot;);\r\n  return svg.node();\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>As I worked on these, I began to think of them as pinwheels. Getting the right &#8220;flutter&#8221; out was a challenge, and I also had a bug for a little where content ended up mostly off the page. I ended up trying to &#8220;weave&#8221; in the iteration by flipping whether I add or subtract it &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/lsh\/09\/08\/lsh-linewalk\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;lsh-LineWalk&#8221;<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/405"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=405"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/405\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/405\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}