{"id":501,"date":"2021-09-08T13:32:32","date_gmt":"2021-09-08T17:32:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/?p=501"},"modified":"2021-09-08T19:22:52","modified_gmt":"2021-09-08T23:22:52","slug":"gabagoo-molnarrecode","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/gabagoo\/09\/08\/gabagoo-molnarrecode\/","title":{"rendered":"gabagoo-MolnarRecode"},"content":{"rendered":"<pre>Observations: \r\n1. grid of equally spaced squares\r\n2. some squares are split\r\n3. areas are shaded by 'hatching'\r\n4. some areas are split into a triangle\r\n5. the hatching concentration varies\r\n6. sometimes there is no hatching (blank area)\r\n7. hatched areas overlap into cross-hatches\r\n8. there stroke color is black\r\n9. there are some inconsistencies with the hatching\r\n10. the hatching direction is variable\r\n\r\n<a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/plot-7.svg\"><img decoding=\"async\" loading=\"lazy\" class=\" wp-image-508 aligncenter\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/plot-7.svg\" alt=\"\" width=\"525\" height=\"525\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/plot-7.svg 150w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/plot-7.svg 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/\/2021\/09\/plot-7.svg 573w\" sizes=\"(max-width: 525px) 85vw, 525px\" \/><\/a>^^ SVG ^^\r\n \r\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-510\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM-640x466.png\" alt=\"\" width=\"640\" height=\"466\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM-640x466.png 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM-1024x745.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM-768x559.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM-1200x873.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.14.22-AM.png 1490w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/>\r\n\r\n^^ pixel image (from before I messed up the code) ^^\r\n\r\n<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-515\" src=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-640x467.png\" alt=\"\" width=\"640\" height=\"467\" srcset=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-640x467.png 640w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-1024x747.png 1024w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-768x561.png 768w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-1536x1121.png 1536w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM-1200x876.png 1200w, https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-04-at-10.15.12-AM.png 1548w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/>\r\n^^ I also experimented with color ^^\r\n<a href=\"https:\/\/preview.p5js.org\/coolbeans\/present\/KlaKj1hRD\" target=\"_blank\" rel=\"noopener\">LIVE EXAMPLE<\/a> + <a href=\"https:\/\/editor.p5js.org\/coolbeans\/sketches\/KlaKj1hRD\" target=\"_blank\" rel=\"noopener\">CODE<\/a><\/pre>\n<pre>let rows, cols, grain = 15\r\nlet colors = ['#eb4034', '#3459eb', '#ffe019', '#404040']\r\n\r\nfunction setup() {\r\n  var SQ_SIZE = min(windowWidth, windowHeight) * .75\r\n  createCanvas(SQ_SIZE, SQ_SIZE, SVG).position((windowWidth - width) \/ 2, (windowHeight - height) \/ 2)\r\n\r\n  rows = int(width \/ grain)\r\n  cols = int(height \/ grain)\r\n  stroke(0)\r\n  strokeWeight(map(grain, 10, 100, .1, 5))\r\n  strokeCap(ROUND)\r\n  noLoop()\r\n}\r\n\r\nfunction draw() {\r\n  background(255)\r\n\r\n  for (var i = 0; i &lt; rows; i++) {\r\n    for (var j = 0; j &lt; cols; j++) {\r\n\r\n      if (random(0, 1) &lt; .2) {\r\n        drawHatchedRect(i * grain, j * grain, 2 * grain, 2 * grain)\r\n      }\r\n      else {\r\n        if (random(0, 1) &lt; .5) drawHatchedRect(i * grain, j * grain, grain, 2 * grain)\r\n        if (random(0, 1) &lt; .5) drawHatchedRect(i * grain, j * grain, 2 * grain, grain)\r\n      }\r\n\r\n    }\r\n  }\r\n}\r\n\r\nfunction drawHatchedRect(x, y, w, h) {\r\n\r\n  let divisions = int(random(-3, 10))\r\n  let hatch_dir = random(0, 1) &lt; 0.5\r\n  let sided = random(0, 1) &lt; 0.5\r\n\r\n  push()\r\n  translate(x, y)\r\n  if (hatch_dir) {\r\n    rotate(PI\/2)\r\n    var temp = w\r\n    w = h\r\n    h = temp\r\n    translate(0, -h)\r\n  }\r\n  \r\n  \/\/ define points\r\n  var top = new p5.Vector(0, 0)\r\n  var bot = new p5.Vector(w, h)\r\n  var rand = random(0, 1) &lt; 0.5\r\n  \/\/ stroke(color(random(colors)))\r\n\r\n  for (var i = 0; i &lt; divisions; i++) {\r\n\r\n    var x_off = i * (w \/ divisions)\r\n    var y_off = i * (h \/ divisions)\r\n\r\n    if (sided) {\r\n      if (rand) line(top.x, top.y + y_off, bot.x - x_off, bot.y)\r\n      else line(top.x + x_off, top.y, bot.x, bot.y - y_off)\r\n    }\r\n    else {\r\n      line(top.x, top.y + y_off, bot.x - x_off, bot.y)\r\n      line(top.x + x_off, top.y, bot.x, bot.y - y_off)\r\n    }\r\n  }\r\n  pop()\r\n\r\n}\r\n\r\nfunction reDraw() {\r\n  grain = int(random(10, 50))\r\n  setup()\r\n  redraw()\r\n}\r\n\r\nfunction mousePressed() {reDraw()}\r\n\r\nfunction keyPressed() {\r\n  if (key == 'd') {\r\n      save('plot.svg')\r\n  }\r\n}\r\n\r\nfunction windowResized() {\r\n  setup()\r\n  reDraw()\r\n}\r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Observations: 1. grid of equally spaced squares 2. some squares are split 3. areas are shaded by &#8216;hatching&#8217; 4. some areas are split into a triangle 5. the hatching concentration varies 6. sometimes there is no hatching (blank area) 7. hatched areas overlap into cross-hatches 8. there stroke color is black 9. there are some &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/gabagoo\/09\/08\/gabagoo-molnarrecode\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;gabagoo-MolnarRecode&#8221;<\/span><\/a><\/p>\n","protected":false},"author":19,"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\/501"}],"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\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"predecessor-version":[{"id":558,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/501\/revisions\/558"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}