30:T8de,{ const svg = d3 .create("svg") .attr("width",width) .attr("height",height) const defs = svg .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); for (let row =0; row<=Math.ceil(height/(3*R));row++){ let ir= 5-Math.ceil(row/2)%5 for( let col=0; col<=Math.ceil(width/(2*Math.sqrt(3*R2)));col++){ let cur_col = colors[(ir+col)%5] for (let i = 0; i < 6; i++) { let delta_x = row%2==0?0:Math.sqrt(3*R2); let filter_id = DOM.uid("filter_" + row + "_" + col + "_" + i) defs.append("filter") .attr("id", filter_id.id) .html( ` `) svg.append("g") .attr("class","tile") .attr("filter",splotch) .append("path") .attr("d", line(motif_sym)) .attr("stroke", d3.color(cur_col).darker(1.3).formatHex()) .attr("stroke-width", 2) .attr("fill", cur_col) .attr("transform",`translate(${delta_x+2*Math.sqrt(3*R2)*col},${3*R*row}),rotate(${i*60})`) .attr("filter", filter_id); } } } return svg.node() }31:Tb0b,{ const svg = d3 .create("svg") .attr("width",1000) .attr("height",600) let g = svg.append("g").attr("transform","translate(300,300)") for (let i = 0; i < 6; i++) { g.append("circle") .attr("r", radius) .attr("cx",`${Math.cos(i*Math.PI/3)*radius}`) .attr("cy",`${Math.sin(i*Math.PI/3)*radius}`) .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none") } g.append("circle") .attr("r", radius) .attr("cx",`${radius+Math.cos(Math.PI/3)*radius}`) .attr("cy",`${Math.sin(Math.PI/3)*radius}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", radius) .attr("cx",`${2*radius}`) .attr("cy",`${0}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", radius) .attr("cx",`${radius+Math.cos(-Math.PI/3)*radius}`) .attr("cy",`${Math.sin(-Math.PI/3)*radius}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(0)*radius}`) .attr("cy",`${Math.sin(0)*radius}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(-Math.PI/6)*(Math.sqrt(3*R2)-R)}`) .attr("cy",`${Math.sin(-Math.PI/6)*(Math.sqrt(3*R2)-R)}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(-Math.PI/3)*R}`) .attr("cy",`${Math.sin(-Math.PI/3)*R}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(-Math.PI/4)*Math.sqrt(2*R2)}`) .attr("cy",`${Math.sin(-Math.PI/4)*Math.sqrt(2*R2)}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(-Math.PI/6)*Math.sqrt(3*R2)}`) .attr("cy",`${Math.sin(-Math.PI/6)*Math.sqrt(3*R2)}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",`${Math.cos(-Math.PI/12)*Math.sqrt(2*R2)}`) .attr("cy",`${Math.sin(-Math.PI/12)*Math.sqrt(2*R2)}`) .attr("stroke", "red") .attr("stroke-width", 1) .attr("fill", "none") g.append("circle") .attr("r", 5) .attr("cx",0) .attr("cy",0) .attr("stroke", "green") .attr("stroke-width", 1) .attr("fill", "none") return svg.node() }32:[] 2e:{"title":"Islamic motif 1","cells":[{"id":0,"value":"# Islamic motif 1","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"viewof R = Inputs.range([10, 200], {label: \"Radius\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"viewof blur = Inputs.range([0, 5], {label: \"Outer blur amount\", step: 0.1,value:0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof noise= Inputs.range([0, 0.03], {label: \"Fractal noise\", step: 0.001,value:0.01})","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"viewof deviation = Inputs.range([0, 5], {label: \"Shape deviation\", step: 0.1,value:2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"blurScale = d3\n .scaleLinear()\n .domain([0, 2000])\n .range([deviation, deviation * 3.5])\n .clamp(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"viewof rcolor = Inputs.color({label: \"Motif color\", value: \"#4682b4\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\",width)\n .attr(\"height\",height)\n \n \n for( let col=0; col<=Math.ceil(width/(2*Math.sqrt(3*R2)));col++){\n for (let row =0; row<=Math.ceil(height/(3*R));row++){\n for (let i = 0; i < 6; i++) {\n let delta_x = row%2==0?0:Math.sqrt(3*R2);\n svg.append(\"path\")\n .attr(\"d\", line(motif_sym))\n .attr(\"stroke\", d3.color(rcolor).darker(1.3).formatHex())\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", rcolor)\n .attr(\"transform\",`translate(${delta_x+2*Math.sqrt(3*R2)*col},${3*R*row}),rotate(${i*60})`);\n }\n }\n }\n\n\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14].map(d=>Math.ceil(d/2)>5?5-Math.ceil(d/2)%5:Math.ceil(d/2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"Todo: add watercolors style like in https://observablehq.com/@veltman/watercolor","pinned":false,"hidden":false,"mode":"md"},{"id":295,"value":"colors= [\"#547099\",\"#945009\",\"#43906a\",\"#241210\",\"#172763\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"motif_sym=[[0,R],[Math.PI/6,Math.sqrt(3*R2)-R],[Math.PI/3,R],[Math.PI/4,Math.sqrt(2)*R],[Math.PI/6,Math.sqrt(3*R2)],[Math.PI/12,Math.sqrt(2)*R],[0,R]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof sepal_height = Inputs.range([100,150], {label: \"Sepal width\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"viewof sepal_in = Inputs.range([0, 100], {label: \"Sepal in\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"viewof delta_angle = Inputs.range([0, Math.PI/5], {label: \"Angle\", step: 0.01})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"motif_custom = [[Math.PI/2,sepal_in],[Math.PI/3,75],[Math.PI/2-delta_angle,sepal_height],[Math.PI/2,150],[Math.PI/2+delta_angle,sepal_height],[2*Math.PI/3,75],[Math.PI/2,sepal_in]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"line = d3.lineRadial();","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\",1000)\n .attr(\"height\",600)\n for (let col = 0; col < 3; col++) {\n for (let row = 0; row < 2; row++) {\n for (let i = 0; i < 6; i++) {\n svg.append(\"path\")\n .attr(\"d\", line(motif_custom))\n .attr(\"stroke\", d3.color(rcolor).darker(1.3).formatHex())\n .attr(\"stroke-width\", 2)\n .attr(\"fill\", rcolor)\n .attr(\"transform\",`translate(${col*300+150},${row*300+150}),rotate(${i*60})`);\n }\n } \n }\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"radius = R","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"R2=Math.pow(R,2)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}