{"id":163,"date":"2021-09-08T09:35:58","date_gmt":"2021-09-08T13:35:58","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=163"},"modified":"2021-09-08T12:56:22","modified_gmt":"2021-09-08T16:56:22","slug":"marimonda-linewalk","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/marimonda\/09\/08\/marimonda-linewalk\/","title":{"rendered":"marimonda &#8211; LineWalk"},"content":{"rendered":"<p>a perfectly ordered line gets tickled <\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/cdn.discordapp.com\/attachments\/720701646077952116\/885155204037754890\/tickle_order_7_moderatechaos.gif\" \/><\/p>\r\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-437\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_4.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\r\n<p>I have been recently interested in space-filling structures, in particular fractals and reaction-diffusion patterns. For my project, I decided to code a <a href=\"https:\/\/github.com\/CodingTrain\/website\/blob\/main\/challenges\/coding-in-the-cabana\/003_hilbert_curve\/Processing\/Hilbert\/Hilbert.pde\">Hilbert Curve<\/a> and play around with its structural integrity with Perlin noise and mouse input. This way, the resulting curve was also an interactive experience.<\/p>\r\n<p>What I found hard: finding the perfect amount of chaos and order proved to be the hardest part, I spent a really long time trying to alter each parameter.<\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/cdn.discordapp.com\/attachments\/720701646077952116\/885155177903042620\/tickle_order_6_lesschaos.gif\" \/><\/p>\r\n<p>A few more images, gifs + code\u00a0 under the cut:<\/p>\r\n<p><!--more--><\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/cdn.discordapp.com\/attachments\/720701646077952116\/885155202217431080\/tickle_order_7_lesschaos.gif\" \/><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-438\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_5.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\r\n<p><!--more--><\/p>\r\n<p><img decoding=\"async\" src=\"https:\/\/cdn.discordapp.com\/attachments\/720701646077952116\/885155201143668757\/tickle_order_7.gif\" \/><\/p>\r\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-441\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_8.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_1.svg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-434\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_1.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/a> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-435\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_2.svg\" alt=\"\" width=\"640\" height=\"480\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-436\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_3.svg\" alt=\"\" width=\"640\" height=\"480\" \/>\u00a0\u00a0 <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-439\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_6.svg\" alt=\"\" width=\"640\" height=\"480\" \/> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-440\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_7.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\r\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_9.svg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-483\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_9.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/a> <img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-484\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/linewalk_10.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/p>\r\n<p>&nbsp;<\/p>\r\n<p>&nbsp;<\/p>\r\n<pre>import processing.svg.*;\r\nint order = 8;\r\nint size = int(pow(2, order));\r\nint total = size * size;\r\nfloat noise_x_dimension = 0.0;\r\nfloat noise_y_dimension = 0.0;\r\nPVector[] path = new PVector[total];\r\nint closest_power = 512;\r\nint w = 600;\r\nint offset = (w - closest_power)\/2;\r\n\r\nvoid setup() {\r\n  size(600, 600);\r\n  background(255);\r\n}\r\n\r\nvoid draw() {\r\n  background(255);\r\n  noise_x_dimension = map(mouseX, 0, w, 0.0,1.0);\r\n  noise_y_dimension = map(mouseY, 0, w, 0.0,1.0);\r\n  float len = closest_power \/ size;\r\n\r\n  for (int i = 0; i &lt; total; i++) {\r\n    path[i] = hilbertCurve(i);\r\n    path[i].mult(len);\r\n    path[i].add(len\/2, len\/2);\r\n  }\r\n  stroke(0);\r\n  strokeWeight(1);\r\n  noFill();\r\n  \r\n  if(mousePressed){\r\n    beginRecord(SVG, \"linewalk.svg\");\r\n  }\r\n  beginShape();\r\n  float x, y;\r\n  float map_x = 45;\r\n  float map_y = 45;\r\n  vertex(offset+path[0].x + map(noise(noise_x_dimension),0,1,-map_x,map_x),offset\/2);\r\n  for (int i = 0; i &lt; path.length; i++) {\r\n    stroke(0);\r\n    if ((noise(noise_x_dimension) &gt; 0.6)\/*&amp;&amp;(noise(noise_y_dimension) &gt; 0.5)*\/) {\r\n      x = offset+path[i].x + map(noise(noise_x_dimension),0,1,-map_x,map_x);\r\n      y = offset+ path[i].y + map(noise(noise_y_dimension),0,1, -map_y,map_y);\r\n    } else{\r\n      x = offset+path[i].x;\r\n      y = offset+ path[i].y;\r\n    }\r\n    curveVertex(x,y);\r\n    noise_x_dimension = noise_x_dimension + 0.5;\r\n    noise_y_dimension = noise_y_dimension + 0.001;\r\n    \/\/noise_x_dimension = tan(map(i,0,path.length,3,-1));\r\n    \/\/noise_y_dimension = tan(map(i,0,path.length,-1,3));\r\n  }\r\n  vertex(offset+path[path.length - 1].x + map(noise(noise_x_dimension),0,1,-2,2),offset\/2); \r\n  \/\/ WIDTH\r\n  \/*for (int i = 0; i &lt; path.length; i++) {\r\n    stroke(0);\r\n    if (noise(noise_x_dimension) &gt; 0.75) {\r\n      x = closest_power - (path[i].x + map(noise(noise_x_dimension),0,1,-map_x,map_x) - offset);\r\n      y = offset+ path[i].y + map(noise(noise_y_dimension),0,1,-map_y,map_y);\r\n    } else{\r\n      x = closest_power - (path[i].x - offset);\r\n      y = offset+ path[i].y;\r\n    }\r\n    curveVertex(x,y);\r\n    noise_x_dimension = noise_x_dimension + 0.5;\r\n    noise_y_dimension = noise_y_dimension + 0.001;\r\n    \/\/noise_x_dimension = tan(map(i,0,path.length,3,-1));\r\n    \/\/noise_y_dimension = tan(map(i,0,path.length,-1,3));\r\n  }*\/\r\n  \/\/vertex(closest_power - (path[path.length-1].x +map(noise(noise_x_dimension),0,1,-2,2) - offset),offset\/2);\r\n  endShape();\r\n  if(mousePressed){\r\n    endRecord();\r\n    noLoop();\r\n  }\r\n  \r\n}\r\n\r\n\r\nPVector hilbertCurve(int i) {\r\n  PVector[] points = {\r\n    new PVector(0, 0), \r\n    new PVector(0, 1), \r\n    new PVector(1, 1), \r\n    new PVector(1, 0)\r\n  };\r\n\r\n  int index = i &amp; 3;\r\n  PVector v = points[index];\r\n\r\n  for (int j = 1; j &lt; order; j++) {\r\n    i = i &gt;&gt;&gt; 2;\r\n    index = i &amp; 3;\r\n    float len = pow(2, j);\r\n    if (index == 0) {\r\n      float prev = v.x;\r\n      v.x = v.y;\r\n      v.y = prev;\r\n    } else if (index == 1) {\r\n      v.y += len;\r\n    } else if (index == 2) {\r\n      v.x += len;\r\n      v.y += len;\r\n    } else if (index == 3) {\r\n      float prev = len - 1 - v.x;\r\n      v.x = len - 1 - v.y;\r\n      v.y = prev;\r\n      v.x += len;\r\n    }\r\n  }\r\n  return v;\r\n}<\/pre>\r\n<p>&nbsp;<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>a perfectly ordered line gets tickled I have been recently interested in space-filling structures, in particular fractals and reaction-diffusion patterns. For my project, I decided to code a Hilbert Curve and play around with its structural integrity with Perlin noise and mouse input. This way, the resulting curve was also an interactive experience. What I &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/marimonda\/09\/08\/marimonda-linewalk\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;marimonda &#8211; LineWalk&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"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\/163"}],"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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"predecessor-version":[{"id":490,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/163\/revisions\/490"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}