25:["$","title",null,{"children":"048 Blending ratios | Saneef H. Ansari | Observable"}] 4b:[] 47:{"id":"3c283e9f43efd2fc","slug":"048-blending-ratios","title":"048 Blending ratios","thumbnail":"e79788ff10dd90eb1d17dad2800e7a91980046ee9e2884647c98115afed02bf7","access_level":"public","create_time":"$D2022-03-25T18:49:22.247Z","update_time":"$D2022-09-29T11:52:59.469Z","view_time":null,"first_public_time":"$D2022-03-29T08:54:53.055Z","has_unpublished_edits":null,"fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024","bio":"Consultant Designer & Developer","followed_by_you":false,"follows_you":false},"version":785,"publish_version":785,"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,"bio":"Consultant Designer & Developer","followed_by_you":false,"follows_you":false}],"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":3,"collection":{"id":"1134e6403a7e016d","slug":"re-plicas-mixes","title":"re(plicas + mixes)","owner":{"id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari"}},"type":"notebook","body":{"titling":"auto","title":"048 Blending ratios","cells":[{"id":0,"value":"# 048 Blending ratios","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"viewof randomize = Inputs.button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"viewof canvasRatio = Inputs.select(ratios, {\n label: \"Canvas ratio\",\n format: (r) => r.name,\n value: defaultParams.canvasRatio\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"viewof dividingRatio = Inputs.select(ratios, {\n label: \"Dividing ratio\",\n format: (r) => r.name,\n value: defaultParams.dividingRatio\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"viewof fillShapes = Inputs.toggle({\n label: \"Fill shapes\",\n value: defaultParams.fillShapes\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"viewof shapedAlignedCenter = Inputs.toggle({\n label: \"Align shapes in middle\",\n value: defaultParams.shapedAlignedCenter\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"{\n const width = strokeWidth + canvasSize;\n const height = strokeWidth + canvasSize / canvasRatio.value;\n return svg`\n \n \n ${draw()}\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof strokeWidthUV = Inputs.range([0, 1], {\n label: \"Stroke Width\",\n step: 0.125,\n value: 0.25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"viewof marginUV = Inputs.range([0, 1], {\n label: \"Margin\",\n step: 0.125,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"rects = divideRectInRatio(0, 0, 1, 1 / canvasRatio.value, dividingRatio.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"canvasSize = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"maxMargin = canvasSize / canvasRatio.value / 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"margin = marginUV * maxMargin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"strokeWidth = math.lerp(0, 10, strokeWidthUV)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"divideRectInRatio = (\n x,\n y,\n width,\n height,\n ratio,\n divideHorizontally = width > height\n) => {\n const minSize = 1 / 16;\n\n const divideRect = (x, y, w, h, divideHorizontally) => {\n // return current rectangle if size is below minSize\n if (Math.min(w, h) < minSize) {\n return [[x, y, w, h]];\n }\n\n if (divideHorizontally) {\n const nextW = w / ratio;\n return [\n [x, y, nextW, h], // larger\n ...divideRect(x + nextW, y, w - nextW, h, !divideHorizontally) // smaller\n ];\n }\n\n // Divide vertically\n const nextH = h / ratio;\n return [\n [x, y, w, nextH], // larger\n ...divideRect(x, y + nextH, w, h - nextH, !divideHorizontally) // smaller\n ];\n };\n\n const rs = [...divideRect(x, y, width, height, divideHorizontally)];\n return rs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"draw = () => {\n const size = canvasSize - 2 * margin;\n\n return rects.map((r) => {\n const [u, v, w, h] = r;\n const rectX = math.lerp(0, size, u);\n const rectY = math.lerp(0, size, v);\n const rectWidth = math.lerp(0, size, w);\n const rectHeight = math.lerp(0, size, h);\n return svg`\n ${drawRect(rectX, rectY, rectWidth, rectHeight)}\n ${drawShape(rectX, rectY, rectWidth, rectHeight)}\n `;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"drawShape = (x, y, w, h) => {\n const r = Math.min(w, h) / 2 - strokeWidth / 2;\n const cx = shapedAlignedCenter ? x + w / 2 : x + r + strokeWidth / 2;\n const cy = shapedAlignedCenter ? y + h / 2 : y + r + strokeWidth / 2;\n const fill = fillShapes ? palette.fg : \"none\";\n const stroke = fillShapes ? \"none\" : palette.fg;\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"drawRect = (x, y, w, h) => svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"findRatioById = (id) => ratios.find((r) => id === r.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"defaultParams = {\n if (randomize === 0) {\n return {\n canvasRatio: findRatioById(\"augFourth\"),\n dividingRatio: findRatioById(\"octave\"),\n shapedAlignedCenter: false,\n fillShapes: true\n };\n }\n return {\n canvasRatio: random.pick(ratios),\n dividingRatio: random.pick(ratios),\n shapedAlignedCenter: random.boolean(),\n fillShapes: random.boolean()\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"palette = ({\n bg: `hsl(0,0%,95%)`,\n fg: `hsl(0,0%,5%)`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"svg = htl.svg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"import { ratios } from \"@saneef/ratios\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"import { CSRandom as random, CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"## Credits\n\nInspired by [the Dot poster by Fifty editions](https://www.fiftyeditions.com/product/101) showing sizes of A series paper sizes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":779,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null