{"id":349,"date":"2021-09-07T18:08:31","date_gmt":"2021-09-07T22:08:31","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=349"},"modified":"2021-09-07T18:08:31","modified_gmt":"2021-09-07T22:08:31","slug":"miniverse-molnarrecode","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/miniverse\/09\/07\/miniverse-molnarrecode\/","title":{"rendered":"miniverse &#8211; MolnarRecode"},"content":{"rendered":"<ol>\n<li>the piece is composed mostly of diagonals across rectangles<\/li>\n<li>the rectangles are 1:2<\/li>\n<li>there are no squares<\/li>\n<li>most diagonal sections are parallel lines spaced equally apart<\/li>\n<li>here are some exceptions\n<ol>\n<li><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-350\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/vera-molnar-paul-klee-plotter1-2000x1333-1.jpeg\" alt=\"\" width=\"129\" height=\"53\" \/><\/li>\n<li><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-351\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee.jpeg\" alt=\"\" width=\"126\" height=\"61\" \/><\/li>\n<li><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-352\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnar-klee-2.jpeg\" alt=\"\" width=\"73\" height=\"105\" \/><\/li>\n<li>(I was lazy and did not implement these)<\/li>\n<\/ol>\n<\/li>\n<li>As seen in image one the middle line is thicker than the neighbouring ones in part probably due to rounding errors<\/li>\n<li>Some of the diagonals across rectangles fill up to the half the space<\/li>\n<li>the space between the lines selected per rectangle<\/li>\n<li>The code was potentially run twice as the rectangles overlap<\/li>\n<li>there are multiple orientations for the lines. They either run left top to right bottom or right top corner to left bottom corner<\/li>\n<\/ol>\n<p>here&#8217;s what I generated<\/p>\n<p><a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnarsvg.svg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-353\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/molnarsvg.svg\" alt=\"\" width=\"640\" height=\"480\" \/><\/a><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-354\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-5.54.24-PM-640x423.png\" alt=\"\" width=\"640\" height=\"423\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-5.54.24-PM-640x423.png 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-07-at-5.54.24-PM.png 724w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/p>\n<p>My work I feel is sort of close to the artists. However, I didn&#8217;t implement those small exceptions because I was lazy and tired. This work was hard to make because it took me a while just to generate the individual component of a random rectangle section and on top of that the math to produce the diagonals within it. Easily took me 5 hours because of that.<\/p>\n<p>My code<\/p>\n<p><a href=\"https:\/\/editor.p5js.org\/miniverse\/sketches\/gV2HWWueA\">https:\/\/editor.p5js.org\/miniverse\/sketches\/gV2HWWueA<\/a><\/p>\n<pre>\/* export SVG\r\nDDF 2019\r\nneed to have p5.svg.js in project and in index.html\r\nsee -https:\/\/github.com\/zenozeng\/p5.js-svg\r\nthis will save an SVG file in your download folder\r\n*\/\r\n\r\nfunction setup() {\r\n  createCanvas(800, 800, SVG);\r\n  strokeWeight(1); \/\/ do 0.1 for laser\r\n  stroke(0, 0, 0); \/\/ red is good for laser\r\n  nSquares = 20;\r\n  strokeWeight(0.4)\r\n  noFill(); \/\/ better not to have a fill for laser\r\n}\r\n\r\n\r\nfunction distance(x1, y1, x2, y2){\r\n  return (y1 - y2)*(y1 - y2) + (x1 - x2)*(x1 - x2)\r\n}\r\n\r\nfunction fillSquare(squareW, startX,startY,  box1, box2, percentOptions){\r\n  orientation = random([0, 1])\r\n  percent = random(percentOptions)\r\n  threshold = squareW * 7 * percent;\r\n  if(orientation){\r\n    point1 = [(box1[0] * squareW) + startX, (box1[1] * squareW) +startY]\r\n    point2 = [(box2[0] * squareW) + startX, (box2[1] * squareW) +startY]\r\n    \r\n    spacingX = abs(point1[0] - point2[0]) * percent;\r\n    spacingY = abs(point1[1] - point2[1]) * percent;\r\n    if(random() &lt; 0.7){ while(distance(point1[0], point1[1], point2[0], point2[1]) &gt; threshold ){\r\n        line( point1[0], point1[1], point2[0], point2[1]);\r\n        point1 = [point1[0] + spacingX, point1[1]]\r\n        point2 = [point2[0], point2[1] - spacingY]\r\n      }\r\n    }\r\n    point1 = [(box1[0] * squareW) + startX, (box1[1] * squareW) +startY]\r\n    point2 = [(box2[0] * squareW) + startX, (box2[1] * squareW) +startY]\r\n    if(random() &lt; 0.9){ while(distance(point1[0], point1[1], point2[0], point2[1]) &gt; threshold ){\r\n        point1 = [point1[0], point1[1] + spacingY]\r\n        point2 = [point2[0] - spacingX, point2[1]]\r\n        line( point1[0], point1[1], point2[0], point2[1]);\r\n      }\r\n    }\r\n    return;\r\n  }\r\n  \r\n  point1 = [(box2[0] * squareW) + startX, (box1[1] * squareW) +startY]\r\n  point2 = [(box1[0] * squareW) + startX, (box2[1] * squareW) +startY]\r\n  \r\n  spacingX = abs(point1[0] - point2[0]) * percent;\r\n  spacingY = abs(point1[1] - point2[1]) * percent;\r\n\r\n  while(distance(point1[0], point1[1], point2[0], point2[1]) &gt; threshold ){\r\n    line( point1[0], point1[1], point2[0], point2[1]);\r\n    point1 = [point1[0] - spacingX, point1[1]]\r\n    point2 = [point2[0], point2[1] - spacingY]\r\n\r\n  }\r\n  point1 = [(box2[0] * squareW) + startX, (box1[1] * squareW) +startY]\r\n  point2 = [(box1[0] * squareW) + startX, (box2[1] * squareW) +startY]\r\n  if(random() &lt; 0.7){ while(distance(point1[0], point1[1], point2[0], point2[1]) &gt; threshold ){\r\n      \r\n      point1 = [point1[0], point1[1] + spacingY]\r\n      point2 = [point2[0] + spacingX, point2[1]]\r\n      line( point1[0], point1[1], point2[0], point2[1]);\r\n    }\r\n  }\r\n}\r\nfunction makeGrid(percentOptions){\r\n  squareW = width \/ nSquares;\r\n  for (var r = 0; r &lt; nSquares; r++ ) {\r\n    for (var c = 0; c &lt; nSquares; c++) {\r\n      box1 = random([[0, 0.0, 0.0], [1, 0.5, 0.0], [2, 0, 0.5]])\r\n      if(box1[0] == 0){\r\n        box2 = random([[ 1.0, 0.5], [0.5, 1.0]])\r\n      }\r\n      if(box1[0] == 1 || box1[0] == 2){\r\n        box2 = [1.0, 1.0]\r\n      }\r\n      box1 = [box1[1], box1[2]]\r\n      fillSquare(squareW, r * squareW, c * squareW, box1, box2, percentOptions);\r\n    }\r\n  }\r\n}\r\nfunction draw() {\r\n  makeGrid([0.1, 0.2, 0.5]);\r\n  makeGrid([0.1, 0.2, 0.5]);\r\n  makeGrid([ 0.2, 0.5]);\r\n  save(\"mySVG.svg\"); \/\/ give file name\r\n  print(\"saved svg\");\r\n  noLoop(); \/\/ we just want to export once\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>the piece is composed mostly of diagonals across rectangles the rectangles are 1:2 there are no squares most diagonal sections are parallel lines spaced equally apart here are some exceptions (I was lazy and did not implement these) As seen in image one the middle line is thicker than the neighbouring ones in part probably &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/miniverse\/09\/07\/miniverse-molnarrecode\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;miniverse &#8211; MolnarRecode&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/349"}],"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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=349"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/349\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/349\/revisions\/357"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}