31:T46d,viewof color_theme = { const color_theme = radio({ title: "Color theme", options: [ { label: "Mondrian", value: "mondrian" }, { label: "Yellow/Red", value: "interpolateYlOrRd" }, { label: "Yellow/Brown", value: "interpolateYlOrBr" }, { label: "Blue/Green", value: "interpolateBuGn" }, { label: "Blue/Purple", value: "interpolateBuPu" }, { label: "Green/Blue", value: "interpolateGnBu" }, { label: "Red", value: "interpolateReds" }, { label: "Blue", value: "interpolateBlues" }, { label: "Green", value: "interpolateGreens" }, { label: "Grey", value: "interpolateGreys" }, { label: "Purple/Blue", value: "interpolatePuBu" }, { label: "Red/Purple", value: "interpolateRdPu" }, { label: "Facebook", value: "facebook" }, { label: "Pastelle rainbow", value: "pastelle_rainbow" }, { label: "Beautiful blues", value: "beautiful_blues" }, { label: "Underwater", value: "underwater" }, { label: "Only Gold", value: "gold" } ], value: "interpolateGreens" }); color_theme.style.marginTop = "8px"; return color_theme; }32:T42f,Box = { class Box { constructor(xA, yA, xB, yB, color = 'rgb(255,255,255)') { this.xA = xA; this.xB = xB; this.yA = yA; this.yB = yB; this.color = color; this.mask = ""; if (xA === xB || yA === yB) throw new Error("Box area shouldn't be zero"); else if (xA > xB || yA > yB) throw new Error( "Please create box in directions top->bottom and left->right" ); } get width() { return this.xB - this.xA; } get height() { return this.yB - this.yA; } get area() { return this.width * this.height; } get borders() { const { xA, yA, xB, yB } = this; return [ //lines are always left -> right and top -> bottom new Line(xA, yA, xA, yB), // left line new Line(xA, yB, xB, yB), // bottom line new Line(xB, yA, xB, yB), // right line new Line(xA, yA, xB, yA) //top line ]; } get string() { return `Box (${this.xA},${this.yA}),(${this.xB},${this.yB})`; } } return Box; }33:T8f3,Line = { class Line { constructor(xA, yA, xB, yB) { this.xA = xA; this.xB = xB; this.yA = yA; this.yB = yB; if (xA !== xB && yA !== yB) throw new Error( "Only vertical or horizontal lines (same X coordinate or same Y)" ); else if (xA === xB && yA === yB) throw new Error("Line must not be empty (difference on X or on Y)"); else if (xA > xB || yA > yB) throw new Error( "Please create line in directions top->bottom and left->right" ); } intersect(line) { if (line.orientation === this.orientation) return null; //No intersection for parallel lines if (this.orientation === 0) { const containsX = line.xA >= this.xA && line.xA <= this.xB; const containsY = this.yA >= line.yA && this.yA <= line.yB; if (containsX && containsY) return { x: this.orientation === 1 ? this.xA : line.xA, y: this.orientation === 0 ? this.yA : line.yA }; else return null; //No intersection } else { return line.intersect(this); } } equals(otherLine) { return ( this.xA === otherLine.xA && this.yA === otherLine.yA && this.xB === otherLine.xB && this.yB === otherLine.yB ); } get oobLine() { let oobLine = new Line(this.xA, this.yA, this.xB, this.yB); ///Out Of Border Line if (this.orientation === 0) { //horizontal let oobY = Math.round(this.yA / H) * (H + 2 * strokeWidth) - strokeWidth; oobLine.yA = oobY; oobLine.yB = oobY; oobLine.xA = 0; oobLine.xB = W; } else { //vertical let oobX = Math.round(this.xA / W) * (W + 2 * strokeWidth) - strokeWidth; oobLine.yA = 0; oobLine.yB = H; oobLine.xA = oobX; oobLine.xB = oobX; } return oobLine; } get string() { return `Line (${this.xA},${this.yA}),(${this.xB},${this.yB})`; } get orientation() { return this.xB > this.xA ? 0 : 1; //0 for horizontal 1 for vertical } get length() { return this.orientation === 1 ? this.yB - this.yA : this.xB - this.xA; } } return Line; }34:T743,lines = { toggleGeneration; var linesH = initialBox.borders.filter(l => l.orientation === 0); var linesV = initialBox.borders.filter(l => l.orientation === 1); function split(iter = 0) { let o = Math.round(random()); if (o === 0) { // horizontal line let nH = 0, pad = padding; while (linesH.findIndex(l => Math.abs(l.yA - nH) < pad) !== -1) { nH = Math.round(random() * H); pad *= 0.95; if (pad < 0.6 * padding) { if (iter < 5) split(iter + 1); return; } } let nLine = new Line(0, nH, W, nH); //intersections let cross = intersections(linesV, nLine); let indexA = Math.floor(random() * (cross.length - 1)); let indexB = Math.ceil(random() * (cross.length - 1 - indexA)) + indexA; if (cross[indexA] && cross[indexB]) { nLine.xA = cross[indexA].x; nLine.xB = cross[indexB].x; } linesH.push(nLine); linesH.sort((a, b) => a.yA - b.yA); } else { // vertical line let nW = 0, pad = padding; while (linesV.find(l => Math.abs(l.xA - nW) < pad)) { nW = Math.round(random() * W); pad *= 0.95; if (pad < 0.6 * padding) { if (iter < 5) split(iter + 1); return; } } let nLine = new Line(nW, 0, nW, H); //intersections let cross = intersections(linesH, nLine); let indexA = Math.floor(random() * (cross.length - 1)); let indexB = Math.ceil(random() * (cross.length - 1 - indexA)) + indexA; if (cross[indexA] && cross[indexB]) { nLine.yA = cross[indexA].y; nLine.yB = cross[indexB].y; } linesV.push(nLine); linesV.sort((a, b) => a.xA - b.xA); } } for (let i = 0; i < N_Lines; i++) split(); return linesH.concat(linesV); }35:T58d,boxes = { var linesH = lines.filter(l => l.orientation === 0); var linesV = lines.filter(l => l.orientation === 1); var boxes = []; texture_effect; linesH.forEach((line, j) => { if (j === linesH.length) return; //border bottom let cross = intersections(linesV, line); cross.forEach((initialCross, i) => { if (i === cross.length - 1) return; //it is last intersection //find vertical line corresponding to intersection let lineV = linesV.find(l => l.xA === initialCross.x); if (lineV.yB < line.yB) return; //line doesn't continues down so no box let nextCrossH = intersections(linesH, lineV).filter(c => c.y > line.yA); if (!nextCrossH || nextCrossH.length === 0) return; let nextLineH = linesH.find(l => l.yA === nextCrossH[0].y); while (nextLineH.xB <= lineV.xB) { if (nextCrossH.length === 0) return; nextCrossH.shift(); nextLineH = linesH.find(l => l.yA === nextCrossH[0].y); } let finalCross = intersections(linesV, nextLineH).find( c => c.x > lineV.xA && cross.find(cr => cr.x > initialCross.x && cr.x === c.x) //right to intersection + is part of initial H line cross ); if (initialCross && finalCross) { boxes.push( new Box(initialCross.x, initialCross.y, finalCross.x, finalCross.y) ); } }); }); return boxes; }36:T597,masks = { if (texture_effect && maskH && maskW) { const wt = await wc_texture.image(); const filter = DOM.uid("bw"); const masks = []; for (let i = 0; i < 4; i++) masks.push(DOM.uid("mask" + i)); masks.forEach((mask, i) => { defs.select(`#${mask.id}`).remove(); }); defs.select(`#${filter.id}`).remove(); const filter_content = defs .append("filter") .attr("id", filter.id) .attr("x", 0) .attr("y", 0) .attr("width", '100%') .attr("height", '100%'); filter_content .append("feColorMatrix") .attr("in", "SourceGraphic") .attr("type", "matrix") .attr( "values", "0 0 0 0 1 " + " 0 0 0 0 1 " + " 0 0 0 0 1 " + " -0.2 -0.2 -0.2 0 1" ); masks.forEach((mask, i) => { const mask_content = defs .append("mask") .attr("id", mask.id) .attr("maskContentUnits", "userSpaceOnUse"); const xS = i % 2 === 0 ? -1 : 1; const yS = i < 2 ? 1 : -1; mask_content .append("image") .attr("x", -maskW / 2) .attr("y", -maskH / 2) .attr("width", maskW) .attr("height", maskH) .attr("href", wt.src) .attr( "transform", `scale(${xS},${yS}) translate(${(xS * maskW) / 2},${(yS * maskH) / 2})` ) .attr("filter", filter); }); yield masks; } else yield undefined; }37:T85d,old_svg_boxes = { return null; d3.shuffle(color_boxes); return show_boxes ? boxes_group .selectAll("rect") .data(color_boxes, d => d.string) .join( enter => { const white_box = enter .append("rect") .lower() .attr("x", d => d.xA - 1) .attr("y", d => d.yA - 1) .attr("width", d => d.width + 1) .attr("height", d => d.height + 1) .attr("opacity", 1) .attr("fill", "white"); return enter .append("rect") .lower() .attr("x", d => d.xA) .attr("y", d => d.yA) .attr("width", d => d.width) .attr("height", d => d.height) .attr("fill", d => d.color) .attr("opacity", 0) .call(enter => { white_box .transition() .delay( (d, i, nodes) => (600 * delay_boxes * i) / nodes.length + 500 * delay_lines ) .duration((d, i) => 500 * delay_boxes) .attr("opacity", 0) .remove(); enter .transition() .delay( (d, i, nodes) => (600 * delay_boxes * i) / nodes.length + 500 * delay_lines ) .duration((d, i) => 500 * delay_boxes) .attr("opacity", 1); }); }, update => update.call(update => update .transition() .duration((d, i) => (Math.random() * 300 + 400) * delay_boxes) .attr("fill", d => d.color) ), exit => exit.raise().call(exit => exit .transition() .duration((d, i) => (Math.random() * 50 + 30) * delay_boxes) .attr("fill", "white") .remove() ) ) : boxes_group.selectAll("rect").remove(); }38:T756,svg_lines = { let display_lines = lines.filter( l => !initialBox.borders.find(b => l.equals(b)) ); //Remove borders if no border const blur_filter = DOM.uid("blur_filter"); return lines_group .raise() .selectAll("line") .attr('filter', blur_filter.id) .data(display_lines, (d, i) => (update_lines ? i : d.string)) .join( enter => { return enter .append("line") .attr("x1", d => d.oobLine.xA) .attr("y1", d => d.oobLine.yA) .attr("x2", d => d.oobLine.xB) .attr("y2", d => d.oobLine.yB) .call(enter => enter .transition() .duration(d => (Math.random() * 300 + 400) * delay_lines) .attr("x1", d => d.xA) .attr("y1", d => d.yA) .attr("x2", d => d.xB) .attr("y2", d => d.yB) .attr("stroke", "black") .attr("shape-rendering", "crispEdges") ); }, update => { return update.call(update => update .transition() .duration(d => (Math.random() * 300 + 400) * delay_lines) .attr("x1", d => d.xA) .attr("y1", d => d.yA) .attr("x2", d => d.xB) .attr("y2", d => d.yB) ); }, exit => { return exit .attr("x1", d => d.xA) .attr("y1", d => d.yA) .attr("x2", d => d.xB) .attr("y2", d => d.yB) .call(exit => exit .transition() .duration(d => (Math.random() * 300 + 400) * delay_lines) .attr("x1", d => d.oobLine.xA) .attr("y1", d => d.oobLine.yA) .attr("x2", d => d.oobLine.xB) .attr("y2", d => d.oobLine.yB) .remove() ); } ) .raise(); }39:[{"id":"5b18e3a467f55f37deb22224d8a06c9f2c0d32f7fa94d2c15578c28637f9cce2c98eee95999ad50c0914a235d8ed81af4caff3f1ef96b43a50794a0f285d33cd","href":"https://static.observableusercontent.com/files/5b18e3a467f55f37deb22224d8a06c9f2c0d32f7fa94d2c15578c28637f9cce2c98eee95999ad50c0914a235d8ed81af4caff3f1ef96b43a50794a0f285d33cd","name":"cropped_gold.jpg","type":"image/jpeg","lastModified":1582130143378.065,"size":13744714},{"id":"2ba27ee7848da176478c509d42b98b880fabb77c37ffbc867d46f60c320db135088b850798e6b35513bb40cd698d98265f65ba50423ac4581148d1cc76a28225","href":"https://static.observableusercontent.com/files/2ba27ee7848da176478c509d42b98b880fabb77c37ffbc867d46f60c320db135088b850798e6b35513bb40cd698d98265f65ba50423ac4581148d1cc76a28225","name":"cropped_green.jpg","type":"image/jpeg","lastModified":1582130143378.065,"size":9636574}] 2f:{"title":"Mondrian is overrated ?","cells":[{"id":0,"value":"md`# Mondrian is overrated ?\n\nI wanted to learn Observable / d3.js tools, my idea was to try to create a Mondrian-like generator. Very fun to do ! \\n\n\nI didn't use a tree-map method because results are often really weird and also because this way I was able to create a smooth line-animation. Used [this ref](https://scipython.com/blog/computer-generated-mondrian-art-1/) for algorithm. \n\nTexture from [@pierreleripoll/watercolor-texture](https://observablehq.com/@pierreleripoll/watercolor-texture).\\n \nStill need to implement line texture + blurring effect around line simulating real paint \\n\nAlso added some animation, enjoy!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":935,"value":"mondrian = {\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof toggleGeneration = button({ value: \"Generate\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"viewof toggleColoring = button({ value: \"Color generation\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"viewof seed_string = {\n const seed_string = text({\n title: \"Seed\",\n placeholder: \"Type anything\",\n description: \"Painting will be generated from this seed\",\n value: \"Piet Mondrian\"\n });\n\n seed_string.input.style.marginTop = \"4px\";\n return seed_string;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"viewof toggleSeedGeneration = button({ value: \"Reset with seed value\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"md`## Animation parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":932,"value":"viewof speed_lines = slider({\n min: 0.1,\n max: 2.5,\n value: 1,\n precision: 2,\n title: \"Speed of lines\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"viewof speed_boxes = slider({\n min: 0.1,\n max: 2.5,\n value: 1,\n precision: 2,\n title: \"Speed of color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"viewof show_boxes = checkbox({\n label: \"Show boxes\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"viewof update_lines = checkbox({\n label: \"Update lines\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"md`## Color parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":751,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":675,"value":"viewof prob_color_box = slider({\n min: 0,\n max: 1,\n value: 1,\n step: 0.05,\n title: \"Probability of box being colored\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"viewof gradient = checkbox({\n label: \"Gradient\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":925,"value":"md`## Texture` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"viewof texture_effect = checkbox({\n label: \"Texture\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"viewof scale = slider({\n min: 1,\n max: 2,\n value: 1,\n title: \"Scale texture\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":922,"value":"viewof which_texture = checkbox({\n label: \"Stronger watercolor effect\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`## Parameters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"viewof N_Lines = slider({\n min: 0,\n max: 30,\n value: 6,\n step: 1,\n title: \"Number of lines\",\n description: \"Use it to watch lines change !\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof H = slider({\n min: 50,\n max: 1000,\n step: 10,\n value: width / 2,\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof W = slider({\n min: 5,\n max: width,\n value: width,\n step: 10,\n title: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":250,"value":"viewof strokeWidth = slider({\n min: 3,\n max: 15,\n value: 8,\n step: 1,\n title: \"Stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof padding = slider({\n min: strokeWidth * 2,\n max: 100,\n value: 35,\n step: 1,\n title: \"Padding\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"viewof border = checkbox({\n label: \"Border\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`## Generative code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"initialBox = new Box(0, 0, W, H)","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"intersections = {\n function intersections(lines, line) {\n let cross = lines.reduce((res, l) => {\n let i = l.intersect(line);\n if (i !== null) res.push(i);\n return res;\n }, []);\n return cross.sort((a, b) => a.x - b.x + (a.y - b.y));\n }\n return intersections;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":735,"value":"random = {\n toggleSeedGeneration;\n return seedrandom ? seedrandom(seed_string) : Math.random;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"md`## Coloring`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"palettes = {\n return {\n mondrian: [\"#e5d800\", \"#e50000\", \"#0000e3\", \"#303033\"],\n facebook: [\"#3b5998\", \"#8b9dc3\", \"#dfe3ee\", \"#f7f7f7\", \"#ffffff\"],\n pastelle_rainbow: [\"#ffb3ba\", \"#ffdfba\", \"#ffffba\", \"#baffc9\", \"#bae1ff\"],\n beautiful_blues: [\"#011f4b\", \"#03396c\", \"#005b96\", \"#6497b1\", \"#b3cde0\"],\n underwater: [\"#daf8e3\", \"#97ebdb\", \"#00c2c7\", \"#0086ad\", \"#005582\"],\n gold: [\"#d4af37\"]\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"color_boxes = {\n toggleColoring;\n texture_effect;\n\n return boxes.map((b, i) => {\n let t = i / boxes.length;\n let cRandom = gradient ? t + random() * 0.2 : random();\n\n if (random() > 1 - prob_color_box) {\n if (d3.hasOwnProperty(color_theme)) {\n b.color = d3[color_theme](cRandom);\n } else if (Array.isArray(palettes[color_theme])) {\n b.color =\n palettes[color_theme][\n Math.round(cRandom * (palettes[color_theme].length - 1))\n ];\n } else {\n b.color = \"white\";\n }\n } else b.color = \"white\";\n return b;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"textured_boxes = {\n d3.shuffle(color_boxes);\n texture_effect;\n toggleColoring;\n return texture_effect ? color_boxes.map(setTextureBox) : color_boxes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"random_number_texture = {\n toggleColoring;\n texture_effect;\n return Math.round(random() * 10);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"md`## SVG Rendering`","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"svg = {\n const svg = d3\n .create(\"svg\")\n .attr(\n \"viewBox\",\n border\n ? [\n -strokeWidth / 2,\n -strokeWidth / 2,\n width + strokeWidth,\n H + strokeWidth\n ]\n : [0, 0, width, H]\n )\n .attr(\"stroke-width\", strokeWidth);\n svg.append(\"defs\");\n\n return svg;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"defs = {\n const defs = svg.select(\"defs\");\n\n const blur_filter = DOM.uid(\"blur_filter\");\n\n defs.selectAll(\"filter\").remove();\n\n defs.append(\"filter\").attr(\"id\", blur_filter.id).html(`\n \n `);\n\n defs\n .selectAll(\"filter\")\n .data(filters_boxes, d => d)\n .enter()\n .append(\"filter\")\n .attr(\"id\", d => d.id)\n .html(\n (d, i) => `\n \n\n \n \n `\n );\n defs.lower();\n\n return defs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"ratioMask = {\n yield undefined;\n const wt = await wc_texture.image();\n yield wt.width / width;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"maskW = width * scale","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"maskH = {\n yield undefined;\n if (!ratioMask) return undefined;\n const wt = await wc_texture.image();\n yield (wt.height * scale) / ratioMask;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"filters_boxes = {\n const filters_boxes = [];\n for (let i = 0; i < N_Lines; i++) {\n filters_boxes.push(DOM.uid(\"filter_boxe\" + i));\n }\n return filters_boxes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"borderBox = {\n svg.select(\"rect\").remove();\n const bbox = svg\n .append(\"rect\")\n .lower()\n .attr(\"x\", initialBox.xA)\n .attr(\"y\", d => initialBox.yA)\n .attr(\"width\", initialBox.width)\n .attr(\"height\", initialBox.height)\n .attr(\"fill\", 'white')\n .attr(\"shape-rendering\", \"crispEdges\");\n\n if (border) bbox.attr(\"stroke\", border ? 'black' : 'white');\n return bbox;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"boxes_group = {\n return svg.append(\"g\").attr(\"class\", \"boxes\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":897,"value":"lines_group = {\n return svg\n .append(\"g\")\n .attr('class', 'lines')\n .raise();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":896,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"svg_boxes = {\n d3.shuffle(color_boxes);\n // console.log(\"RENDERING SVG\");\n return boxes_group\n .selectAll(\"rect\")\n .data(textured_boxes, d => d.string)\n .join(\n enter =>\n enter\n .append(\"rect\")\n .lower()\n .attr(\"width\", d => d.width)\n .attr(\"fill\", d => d.color)\n .attr(\"height\", d => d.height)\n .attr(\"x\", d => d.xA)\n .attr(\"y\", d => d.yA)\n .attr(\"opacity\", 0)\n .call(enter =>\n enter\n .transition()\n .delay((d, i, nodes) => 20 * delay_boxes * i + 500 * delay_lines)\n .duration((d, i) => 800 * delay_boxes)\n .attr(\"opacity\", 1)\n ),\n\n update => update.attr(\"fill\", d => d.color),\n exit =>\n exit.raise().call(exit =>\n exit\n .transition()\n .duration((d, i) => (Math.random() * 50 + 30) * delay_boxes)\n .attr(\"fill\", \"white\")\n .remove()\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"{\n if (texture_effect && masks !== undefined) {\n svg_boxes.attr(\"mask\", d => {\n return d.mask;\n });\n } else {\n svg_boxes.attr(\"mask\", null);\n }\n if (noise_effect) {\n svg_boxes.attr('filter', (d, i) =>\n noise_effect ? filters_boxes[i % N_Lines] : null\n );\n } else {\n svg_boxes.attr(\"filter\", null);\n }\n // svg_boxes._groups.forEach(g => g.forEach(r => console.log(\"Rect\", r)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"setTextureBox = (box, i) => {\n // box.yTexture = Math.round(random() * (maskH - box.height));\n // box.xTexture = Math.round(random() * (maskW - box.width));\n // box.transform = `translate(${box.xA - box.xTexture},${box.yA -\n // box.yTexture})`;\n if (masks) box.mask = masks[(i + random_number_texture) % masks.length];\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"delay_lines = rangeSpeed(speed_lines)","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"delay_boxes = rangeSpeed(speed_boxes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"md`## Watercolor effects \\nThey do not work very well with animation...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"viewof noise_effect = checkbox({\n label: \"Noise \",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"viewof noise = slider({\n min: 0,\n max: 0.01,\n format: v => `${Math.round(v * 10000)}%`,\n value: 0.005,\n precision: 4,\n title: \"Quantity of noise\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"viewof blur_boxes = slider({\n min: 0,\n max: 1,\n format: v => `${Math.round(v * 100)}%`,\n value: 0.5,\n precision: 2,\n title: \"Blurring effect on rectangles\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"viewof blur_lines = slider({\n min: 0,\n max: 1,\n format: v => `${Math.round(v * 100)}%`,\n value: 0.2,\n precision: 3,\n title: \"Blurring effect on lines\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"import { slider, button, text, select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":797,"value":"import { checkbox } from \"@nitaku/checkbox\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":884,"value":"wc_texture = {\n return which_texture\n ? FileAttachment(\"cropped_green.jpg\")\n : FileAttachment(\"cropped_gold.jpg\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"line_texture = FileAttachment(\"cropped_green.jpg\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"rangeSpeed = {\n return d3\n .scaleLinear()\n .domain([0.1, 1, 2])\n .range([4, 1, 0.5]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"seedrandom = require(\"https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/lib/alea.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}