31:[] 2f:{"title":"Generative Art Experiment","cells":[{"id":0,"value":"# Generative Art Experiment\n\nOne of [my students used a similar image from the internet](https://citrine-tide-fairy.glitch.me/), and I've got inspired to replicate it programmatically","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"viewof bgColor = Inputs.color({ value: \"#3d49a9\", label: \"BG Color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"viewof animate = Inputs.toggle({label: \"Animate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":50,"value":"viewof numColors = Inputs.range([1, 10], {\n step: 1,\n value: 3,\n label: \"Number of colors\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"viewof dl = Inputs.range([-1, 1], {\n label: \"Lightness change (%)\",\n value: 0.1,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof ds = Inputs.range([-1, 1], {\n label: \"Saturation change (%)\",\n value: 0.0,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof gap = Inputs.range([20, 200], {\n label: \"Gap between rectangles\",\n value: 80,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof height = Inputs.range([100, 1200], {label: \"Height\", value: 600, step: 10})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof skipPct = Inputs.range([0, 1], {\n label: \"Probability of skiping a rectangle\",\n value: 0.3,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"viewof minSide = Inputs.range([0, 1], {\n label: \"Min Rectangle side (%)\",\n value: 0.1,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof maxSide = Inputs.range([0, 1], {\n label: \"Max Rectangle side (%)\",\n value: 0.4,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"viewof maxOffset = Inputs.range([0, 1], {\n label: \"Max offset from the middle (%)\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"// width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"rectangles = {\n const rectangles = [];\n for (let x = 0; x < width; x += gap) {\n for (let y = 0; y < height; y += gap) {\n // skip some squares\n if (Math.random() < skipPct) continue;\n\n const side = (Math.random() * (maxSide - minSide) + minSide) * gap;\n const offsetX = Math.random() * maxOffset * gap;\n const offsetY = Math.random() * maxOffset * gap;\n const strokeWidth = Math.random() * side + \"px\";\n\n const angle = Math.random() * 350 - 50;\n const duration = Math.random() * 3 + 1;\n\n rectangles.push({ x, y, side, offsetX, offsetY, strokeWidth });\n }\n }\n\n return rectangles;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"rectanglesWithColor = rectangles.map(({x, y, side, offsetX, offsetY, strokeWidth}) => {\n const { h, s, l } = d3.hsl(bgColor);\n const randColNum = Math.floor(Math.random() * numColors) + 1;\n const newH = (h + randColNum * (360 / (numColors + 1))) % 360;\n const shadow = \"drop-shadow(3px 3px 2px rgba(0, 0, 0, .7))\";\n\n const color = d3.hsl(newH, s + ds, l + dl); // bad attempt at complementary colors\n return {x, y, side, offsetX, offsetY, strokeWidth, color, shadow};\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"rectanglesSVG = rectanglesWithColor.map(\n ({ x, y, side, offsetX, offsetY, strokeWidth, color, shadow }) => {\n const angle = Math.random() * 350 - 50;\n const duration = Math.random() * 3 + 1;\n const rectStyle = `\n -webkit-filter: ${shadow}; \n filter: ${shadow}; \n ${\n animate\n ? `--angle: ${angle}deg; animation: ${duration}s infinite alternate slide-in;`\n : \"\"\n }`;\n\n return htl.svg``;\n }\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}