27:null 28:["$","title",null,{"children":"CC 03 - Cubic Disarray | Vivek Shrinivasan | Observable"}] 2d:T5c6,2e:[] 2b:{"id":"7098fbebe08eb8f6","slug":null,"title":"CC 03 - Cubic Disarray","thumbnail":"1a66b0fc000089e41ad4338114beb887cb9d757f181e79efb730bf347afb69a9","access_level":"public","create_time":"$D2025-09-06T09:08:10.058Z","update_time":"$D2025-09-06T15:17:05.250Z","view_time":null,"first_public_time":"$D2025-09-06T09:08:10.058Z","has_unpublished_edits":null,"fork":{"id":"bb8eb068e7f3a642","slug":null,"title":"CC 02 - Joy Division","owner":{"id":"f9cb08f574e6da06","login":"kaizer1v","name":"Vivek Shrinivasan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f9cb08f574e6da06","login":"kaizer1v","name":"Vivek Shrinivasan","avatar_url":"https://avatars-next.observableusercontent.com/f55439b84097cccb0372059f1097ed65352c54139b9336efa8da0f2cc361adb2","tier":"starter_2024"},"version":522,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"70d04619b721a45b","login":"kaizer1v","name":"Vivek S","avatar_url":"https://avatars-next.observableusercontent.com/f55439b84097cccb0372059f1097ed65352c54139b9336efa8da0f2cc361adb2","tier":null}],"members":[{"type":"individual","id":"70d04619b721a45b","login":"kaizer1v","name":"Vivek S","avatar_url":"https://avatars-next.observableusercontent.com/f55439b84097cccb0372059f1097ed65352c54139b9336efa8da0f2cc361adb2","tier":null,"role":"editor"},{"type":"team","id":"f9cb08f574e6da06","login":"kaizer1v","name":"Vivek Shrinivasan","avatar_url":"https://avatars-next.observableusercontent.com/f55439b84097cccb0372059f1097ed65352c54139b9336efa8da0f2cc361adb2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"4dee739249a33ebc","slug":"creative-coding","title":"Creative coding","owner":{"id":"f9cb08f574e6da06","login":"kaizer1v","name":"Vivek Shrinivasan"}},"type":"notebook","body":{"title":"CC 03 - Cubic Disarray","cells":[{"id":0,"value":"# CC 03 - Cubic Disarray","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"viewof rectSize = Inputs.range([50, 200], { label: 'Size of the square', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"viewof margin = Inputs.range([1, 10], { label: 'Gap b/w squares', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"viewof cols = Inputs.range([1, 10], { label: 'No. of columns', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof rows = Inputs.range([1, 10], { label: 'No. of rows', step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"viewof distortion = Inputs.range([-15, 30], { step: 1, label: 'Distortion'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"/* given an array of coordinates for the 4 corners of a box, render the square */\nfunction renderQuad(\n corners = [\n { x: 0, y: 0 }, // top left\n { x: 100, y: 0 }, // top right\n { x: 100, y: 100 }, // bottom right\n { x: 0, y: 100 } // bottom left\n ]\n) {\n const [c1, c2, c3, c4] = corners;\n return svg`\n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"/**\n given the size of the rect \n and a distortion variance\n generate 4 coordinates of a square & return it\n**/\nfunction getCoords(size, distrotion) {\n const getOffset = d => (Math.random() - 1) * d;\n\n // top-left (0, 0): but distorted randomly left/up\n const c1 = { x: getOffset(distrotion), y: getOffset(distrotion) }\n\n // top-right (size, 0): plus some random horizontal and vertical distortion\n const c2 = { x: c1.x + size + getOffset(distrotion), y: c1.y + getOffset(distrotion) }\n\n // bottom-right (size, size): plus some random horizontal and vertical distortion\n const c3 = { x: c2.x + getOffset(distrotion), y: c2.y + size + getOffset(distrotion) }\n\n // bottom-left (size, 0): plus some random horizontal and vertical distortion\n const c4 = { x: c3.x - size - getOffset(distrotion), y: c3.y + getOffset(distrotion) }\n return [c1, c2, c3, c4]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"## Styles & Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"displayPalettes(palette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"palette = getRandomPalette()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"import {getRandomPalette, displayPalettes} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"$2d","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"