2b:null 2c:["$","title",null,{"children":"039 Deformed Rectangles | Saneef H. Ansari | Observable"}] 31:[] 2f:{"id":"036772a1f2d2d316","slug":"039-deformed-rectangles","title":"039 Deformed Rectangles","thumbnail":"56cdb8af9f1cd3f726f5930fc2396078dd8d22da3888cce6ab1128e6614bf1c2","access_level":"public","create_time":"$D2021-07-24T17:13:11.317Z","update_time":"$D2022-10-05T14:42:13.033Z","view_time":null,"first_public_time":"$D2021-07-25T06:59:47.430Z","fork":false,"stars":25,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":236,"publish_version":236,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"title":"039 Deformed Rectangles","cells":[{"id":147,"value":"# 039 Deformed Rectangles\n\nOriginal artwork: [201216a](https://openprocessing.org/sketch/1045334) by [Okazz](https://openprocessing.org/user/128718)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"output = html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof randomize = Inputs.button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof skewness = Inputs.range([0, 1], {\n label: \"Skewness\",\n value: initialValues.skewness, // 1 / 8,\n step: 0.005\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof passes = Inputs.range([1, 12], {\n label: \"Recursive Levels\",\n value: initialValues.passes, // 9,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n value: 1 / 3,\n step: 0.05\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof hasStroke = Inputs.toggle({\n label: \"Draw Stroke\",\n value: initialValues.hasStroke //true,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof strokeWidth = Inputs.range([0, 10], {\n label: \"Stroke Width\",\n value: 3,\n step: 0.5,\n disabled: !hasStroke\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"initialValues = {\n randomize;\n\n return {\n skewness: CSRandom.range(0.1, 0.7),\n passes: CSRandom.rangeFloor(4, 10),\n hasStroke: CSRandom.boolean()\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"function drawPolygons() {\n const margin = (marginUV * minSize) / 5;\n const minMaxes = [margin, width - margin, margin, height - margin];\n const stroke = colors.stroke || colors.background;\n return polygons.reduce((acc, p) => {\n const { p1, p2, p3, p4, fill } = p;\n return `${acc}\n`;\n }, \"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"uv2xy = (u, v, xMin, xMax, yMin, yMax) => {\n return [CSMath.lerp(xMin, xMax, u), CSMath.lerp(yMin, yMax, v)];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"polygons = {\n const first = {\n p1: [0, 0],\n p2: [1, 0],\n p3: [1, 1],\n p4: [0, 1]\n };\n return divideRect(first.p1, first.p2, first.p3, first.p4, passes);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"function divideRect(p1, p2, p3, p4, n) {\n if (n <= 1) {\n return [\n {\n p1,\n p2,\n p3,\n p4,\n fill: CSRandom.pick(colors.colors)\n }\n ];\n } else {\n const w = distance(...p1, ...p2) + distance(...p3, ...p4);\n const h = distance(...p1, ...p4) + distance(...p2, ...p3);\n const t = 2 + 8 * skewness;\n const r1 = (1 / t) * CSRandom.rangeFloor(1, t);\n const r2 = (1 / t) * CSRandom.rangeFloor(1, t);\n\n if (w < h) {\n const v1 = divideLine(...p1, ...p4, r1);\n const v2 = divideLine(...p2, ...p3, r2);\n return [\n ...divideRect(p1, p2, v2, v1, n - 1),\n ...divideRect(v1, v2, p3, p4, n - 1)\n ];\n } else {\n const v1 = divideLine(...p1, ...p2, r1);\n const v2 = divideLine(...p3, ...p4, r2);\n return [\n ...divideRect(p1, v1, v2, p4, n - 1),\n ...divideRect(v1, p2, p3, v2, n - 1)\n ];\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"distance = (x1, y1, x2, y2) =>\n Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"divideLine = (x1, y1, x2, y2, ratio) => [\n x1 + ratio * (x2 - x1),\n y1 + ratio * (y2 - y1)\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"colors = {\n randomize;\n\n const palette = chromotome.getRandom();\n const background = palette.background || \"#000\";\n const colors = palette.colors; //.filter((c) => c !== background);\n return {\n ...palette,\n background,\n colors,\n size: colors.length\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"minSize = Math.min(width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"maxSize = Math.max(width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"chromotome = require(\"chromotome\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"import { CSRandom, CSMath } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":232,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"