45:["$","title",null,{"children":"Generative Art Grids | Brett Cooper | Observable"}] 4d:Tcaa,draw_svg = { constructGrid([5,5]) // start with large block constructGrid([4,4]) // and work the way down in sizes constructGrid([3,3]) constructGrid([2,2]) constructGrid([2,3]) constructGrid([3,2]) constructGrid([2,1]) constructGrid([1,2]) constructGrid([1,1]) // fill in the last of the unused blocks const svg = d3.create("svg") .attr("viewBox", [0, 0, w, w]) .style('background', '#000') .attr('width',w) .attr('height',w); // make masks ----- let msk = svg.append('defs') for(let n = 0; n d3.randomInt(min,max+1)() // random number for where to put the circle center in a grid element","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"# Make the grid\n\ntodo:\n\ncompute to full positions as it currently has to be computed in the draw.\n\n```\n .attr('x', r.posX * gridSpacingX + padding)\n .attr('y', r.posY * gridSpacingY + padding)\n .attr('width', r.dimX * gridSpacingX)\n .attr('height', r.dimY * gridSpacingY)\n```\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"function constructGrid(sizesArr){\n for(let x = 0; x gridDivsX || y + ydim > gridDivsY)? false : true // check if within bounds\n \n if(fits){ // check if rectangle overlaps with any other rectangle\n for(let xc = x; xc < x + xdim; xc++){\n for(let yc = y; yc < y + ydim; yc++){\n if(bools[xc][yc] == false){\n fits = false\n }}}}\n\n if(fits){ // mark area as occupied\n for(let xc = x; xc < x + xdim; xc++){\n for(let yc = y; yc < y + ydim; yc++){\n bools[xc][yc] = false\n }\n }\n rectInfo.push({posX:x, posY:y, dimX:xdim, dimY:ydim}) // todo change this structure to be in pixel cords x0,y0, y0,y1 to reduce math in drawing??.\n }\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"# future thoughts\n\nI would like to look at the circle center placement with the idea if they are all in the center lower half, the rings would make rainbows. Having all look similar would be interesting. \n\nI want to Lerp the gap between the rings.\n\nWant to try to use other SVG shapes and maybe custom paths.\n\nAlso want to explore other fill concepts.\n\n## looking a colours\n\nA Colour palette picker. \n\nInstead of random the gradients could be used. \nUsing chroma to do the colour generation.\n\n## cleaner svg\n\nThe fills for each rect should be grouped and not blobbed.\n\n# Add more UI control\n\nThat could be for a colour palate selection, or to redo the random of a rect, which would need the cleaning done from above.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"todo","database":"$undefined"},{"id":367,"value":"chroma = require('chroma-js@2.4.2/chroma.js') // https://www.npmjs.com/package/chroma-js ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"# [chroma.brewer](https://colorbrewer2.org/)\n\nThe colour palates from color Brewer. https://colorbrewer2.org/export/colorbrewer.json","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"colorbrewer = FileAttachment(\"colorbrewer.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"brews = _.keys(colorbrewer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"colours = (revcp%2)?chroma.scale(brewColour).colors(numColurs):chroma.scale(brewColour).colors(numColurs).reverse() //chroma.brewer[brewColour]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"# colour palette generation\n\nPass an array of colours and returns an SVG \nonly shows first 36 colours","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":763,"value":"csvg = (p) => {\n\n let ch = 40\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, ch])\n .style('background', '#fff')\n .attr('width',width)\n .attr('height',ch); \n\n const out = svg.append('g')\n \n for(let i = 0; i < p.length; i++){\n \n out.append('rect')\n .attr('x', i*ch)\n .attr('y', 0)\n .attr('width', ch)\n .attr('height', ch)\n .attr('fill',p[i])\n }\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"$${csvg(colours)} \n\n${csvg(chroma.scale('OrRd').colors(35))}\n\n${csvg(chroma.scale(['white', 'black']).colors(36))}\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":850,"value":"chroma.scale(['white', 'black']).colors(12);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"chroma.scale('OrRd').colors(12); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"\n# chromajs functions\n\n---\n\nhttps://vis4.net/chromajs/#chroma-limits\n\n---\n\nchroma('red').alpha(0.5); \nchroma('hotpink').darken(2); \nchroma('hotpink').brighten(2); \nchroma('slategray').saturate(2); \nchroma('hotpink').desaturate(2); \n\ncolor.luminance([lum, mode='rgb']) \nIf called without arguments color.luminance returns the relative brightness, according to the WCAG definition. Normalized to 0 for darkest black and 1 for lightest white.\nchroma('white').luminance(); == 1 \nchroma('black').luminance(); == 0 \n\n// set lumincance to 50% for all colors \nchroma('white').luminance(0.5);\n\n---\n\nhttps://vis4.net/chromajs/#color-temperature\n\n---\n\nhttps://vis4.net/chromajs/#color-scales\n\n\nchroma.scale('OrRd').colors(5); \nchroma.scale(['white', 'black']).colors(12);\n\nchroma.scale('OrRd'); \n// class breaks \nchroma.scale('OrRd').classes(5); \nchroma.scale('OrRd').classes(8); \n\n[chroma.contrast(color1, color2)](https://vis4.net/chromajs/#chroma-contrast)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"f =chroma.scale(['red','goldenrod'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"# some random number generators","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":381,"value":"rnd = (c) => d3.randomInt(0,c)()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"r =d3.randomUniform(0, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"# outer utils\ndistance between two points \n\nand Makio135's lerp","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"function dist(x0,y0,x1,y1) {\n return Math.sqrt( (x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1) );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"import {lerp} from \"@makio135/utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null