![\"\"](\"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-content\/uploads\/2021\/09\/untitled.svg\")
<\/a>\n
<\/p>\nI think I spent too much time working at a small scale in this work. In the end I don’t feel like I captured the general feel because I focused on little segments. I also spent a lot of time fighting with texturesjs, which was probably time I should have spent in a tool with which I was more familiar. Overall this drawing feels too heavy and I don’t think I captured the angles or interactions all that well.<\/p>\n
\r\nconst width = 761;\r\nconst height = width;\r\n\r\nfunction generateRandomNumbers({ num_squares, N }) {\r\n const m = new Map();\r\n const out = [];\r\n while (out.length d[0]))\r\n .range([0, width]);\r\nconst sy = d3\r\n .scaleBand()\r\n .domain(idx.map((d) => d[1]))\r\n .range([height, 0]);\r\n\r\nconst t1 = textures.lines().size(5).strokeWidth(1).orientation(\"2\/8\");\r\nconst t2 = textures.lines().size(5).strokeWidth(1).orientation(\"6\/8\");\r\nconst t3 = textures.lines().size(25).strokeWidth(1).orientation(\"7\/8\");\r\nconst t4 = textures.lines().size(25).strokeWidth(1).orientation(\"1\/8\");\r\nconst t5 = textures.lines().size(50).strokeWidth(1).orientation(\"5\/8\");\r\nconst t6 = textures.lines().size(50).strokeWidth(1).orientation(\"3\/8\");\r\n\r\n\r\nfunction generate() {\r\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\r\n [t1, t2, t3, t4, t5, t6].forEach((t) => svg.call(t));\r\n\r\n svg.select(`pattern#${t4.id()}`).attr(\"patternTransform\", \"translate(3)\");\r\n\r\n svg\r\n .selectAll(\".rect38\")\r\n .data(generateRandomNumbers({ num_squares, N: 500 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t1.url())\r\n .attr(\"x\", ([x, _]) => sx(x))\r\n .attr(\"y\", ([_, y]) => sy(y))\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n svg\r\n .selectAll(\".rect78\")\r\n .data(generateRandomNumbers({ num_squares, N: 500 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t2.url())\r\n .attr(\"x\", ([x, _]) => sx(x))\r\n .attr(\"y\", ([_, y]) => sy(y))\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n svg\r\n .selectAll(\".rect2x\")\r\n .data(generateRandomNumbers({ num_squares, N: 300 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t3.url())\r\n .attr(\"x\", ([x, _]) => sx(x))\r\n .attr(\"y\", ([_, y]) => sy(y))\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n svg\r\n .selectAll(\".rect22x\")\r\n .data(generateRandomNumbers({ num_squares, N: 300 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t4.url())\r\n .attr(\"x\", ([x, _]) => sx(x))\r\n .attr(\"y\", ([_, y]) => sy(y))\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n svg\r\n .selectAll(\".rect4x\")\r\n .data(generateRandomNumbers({ num_squares, N: 300 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t5.url())\r\n .attr(\"x\", ([x, _]) => sx(x) * 2)\r\n .attr(\"y\", ([_, y]) => sy(y) * 2)\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n svg\r\n .selectAll(\".rect4x2\")\r\n .data(generateRandomNumbers({ num_squares, N: 300 }))\r\n .join(\"rect\")\r\n .attr(\"fill\", t6.url())\r\n .attr(\"x\", ([x, _]) => sx(x) * 2)\r\n .attr(\"y\", ([_, y]) => sy(y) * 2)\r\n .attr(\"width\", sx.bandwidth())\r\n .attr(\"height\", sy.bandwidth());\r\n\r\n return svg.node();\r\n}\r\n\r\ngenerate();\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"1. Some of the lines are orthogonal to each other. 2. Some of the lines make a triangle filling half of the cell. 3. Some lines seem to be darker than the others. 4. Some of the patterns seem to have the same “scale” but less distance between lines. 5. There seems to be multiple … Continue reading “lsh-MolnarRecode”<\/span><\/a><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/395"}],"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=395"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/395\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/posts\/395\/revisions\/401"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/media?parent=395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/categories?post=395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/60-428\/f2021\/wp-json\/wp\/v2\/tags?post=395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}