2f:T5c6,30:[] 2d:{"title":"CC 03 - Cubic Disarray","cells":[{"id":0,"value":"# CC 03 - Cubic Disarray","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"viewof rectSize = Inputs.range([50, 200], { label: 'Size of the square', step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"viewof margin = Inputs.range([1, 10], { label: 'Gap b/w squares', step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"viewof cols = Inputs.range([1, 10], { label: 'No. of columns', step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"viewof rows = Inputs.range([1, 10], { label: 'No. of rows', step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"viewof distortion = Inputs.range([-15, 30], { step: 1, label: 'Distortion'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":78,"value":"## Styles & Variables","pinned":false,"hidden":false,"mode":"md"},{"id":492,"value":"displayPalettes(palette)","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"palette = getRandomPalette()","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"import {getRandomPalette, displayPalettes} from \"@makio135/give-me-colors\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"$2f","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}