30:T9b8,{ const svg = d3 .create("svg") .attr("width",width) .attr("height",height) let lineR = d3.lineRadial(); // filters const defs = svg .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); let K=8 let dr = 1.3*radius_pattern/(Math.cos(Math.PI/K)*(2+Math.sqrt(2))) console.log(dr) let octo = Array(K+1).fill().map((d,i)=>[i*2*Math.PI/K,dr]) for(let i=0;i<=Math.ceil(width/(2*radius_pattern));i++){ for(let j=0;j<=Math.ceil(height/(2*radius_pattern));j++){ let filter_id = DOM.uid("filter_" + i + "_" + j + "_" + i) defs.append("filter") .attr("id", filter_id.id) .html( ` `) let g = svg .append("g") .attr("filter", splotch) .attr("transform",`translate(${i*2*radius_pattern+radius_pattern},${j*2*radius_pattern+radius_pattern})`) motif(g,radius_pattern,filter_id) svg .append("g") .attr("transform",`translate(${i*2*radius_pattern-2*radius_pattern},${j*2*radius_pattern-2*radius_pattern})`) .attr("filter", splotch) .append("path") .attr("d",lineR(octo)) .attr("fill",colors[0]) .attr("stroke",d3.color(colors[0]).darker(1.3).formatHex()) .attr("stroke-width",2) .attr("filter",filter_id) } } return svg.node() }31:T128e,{ const svg = d3 .create("svg") .attr("width",width) .attr("height",height) let g = svg .append("g") .attr("transform",`translate(${width/2},${height/2})`) let lineR = d3.lineRadial() // filters const defs = svg .attr("class", "watercolor") .append("defs"); const splotch = DOM.uid("splotch"); defs .append("filter") .attr("id", splotch.id) .html( `${ noise ? ` ` : `` }` ); let K= 8 let dr = radius/(Math.cos(Math.PI/K)*(2+Math.sqrt(2))) let ro = radius/Math.sqrt(2) let rin = Math.sqrt(2)*radius // Tiles if(display.find(d=>d=="Tiles")){ motif(g,radius,splotch) } // Drawing lines if(display.find(d=>d=="Drawing lines")){ g.append("rect") .attr("x",`${-radius}`) .attr("y",`${-radius}`) .attr("width",`${2*radius}`) .attr("height",`${2*radius}`) .attr("fill","none") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("r",radius) g.append("circle") .attr("cx",0) .attr("cy",0) .attr("fill","none") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("r",radius) let diags = [[[-3*Math.PI/4,radius],[Math.PI/4,radius], [3*Math.PI/4,radius],[-Math.PI/4,radius]], [[Math.PI/2,radius],[-Math.PI/2,radius], [0,radius],[Math.PI/2,radius]]] g.append("g") .attr("class","diags") .selectAll("path") .data(diags) .join("path") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("fill","none") .attr("d",lineR) let squares = [[[Math.PI,radius],[Math.PI/2,radius], [0,radius],[-Math.PI/2,radius],[Math.PI,radius]], [[3*Math.PI/4,radius],[Math.PI/4,radius], [-Math.PI/4,radius],[-3*Math.PI/4,radius],[3*Math.PI/4,radius]]] g.append("g") .attr("class","squares") .selectAll("path") .data(squares) .join("path") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("fill","none") .attr("d",lineR) let arrows = [{line:[[Math.PI-Math.PI/8,radius/Math.cos(Math.PI/8)],[0,0],[Math.PI/8,radius/Math.cos(Math.PI/8)]], pos:[-radius,0],rot:0}, {line:[[Math.PI-Math.PI/8,radius/Math.cos(Math.PI/8)],[0,0],[Math.PI/8,radius/Math.cos(Math.PI/8)]], pos:[0,-radius],rot:90}, {line:[[Math.PI-Math.PI/8,radius/Math.cos(Math.PI/8)],[0,0],[Math.PI/8,radius/Math.cos(Math.PI/8)]], pos:[radius,0],rot:180}, {line:[[Math.PI-Math.PI/8,radius/Math.cos(Math.PI/8)],[0,0],[Math.PI/8,radius/Math.cos(Math.PI/8)]], pos:[0,radius],rot:-90}] g.append("g") .attr("class","arrows") .selectAll("path") .data(arrows) .join("path") .attr("stroke","#888888") .attr("stroke-dasharray","4 3") .attr("stroke-width",2) .attr("fill","none") .attr("d",d=>lineR(d.line)) .attr("transform",d=>`translate(${d.pos[0]},${d.pos[1]}),rotate(${d.rot})`) let lines = [{x1:-radius,y1:rin/2-rin/(2+Math.sqrt(2)),x2:radius,y2:rin/2-rin/(2+Math.sqrt(2))}, {x1:-radius,y1:-rin/2+rin/(2+Math.sqrt(2)),x2:radius,y2:-rin/2+rin/(2+Math.sqrt(2))}, {y1:-radius,x1:rin/2-rin/(2+Math.sqrt(2)),y2:radius,x2:rin/2-rin/(2+Math.sqrt(2))}, {y1:-radius,x1:-rin/2+rin/(2+Math.sqrt(2)),y2:radius,x2:-rin/2+rin/(2+Math.sqrt(2))}] g.append("g") .attr("class","lines") .selectAll("line") .data(lines) .join("line") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("x1",d=>d.x1) .attr("y1",d=>d.y1) .attr("x2",d=>d.x2) .attr("y2",d=>d.y2) g.append("g") .attr("class","lines") .selectAll("line") .data(lines) .join("line") .attr("stroke","#888888") .attr("stroke-width",2) .attr("stroke-dasharray","4 3") .attr("x1",d=>d.x1) .attr("y1",d=>d.y1) .attr("x2",d=>d.x2) .attr("y2",d=>d.y2) .attr("transform","rotate(45)") } return svg.node() }32:T510,motif = function(g,radius,splotch){ let K= 8 let dr = radius/(Math.cos(Math.PI/K)*(2+Math.sqrt(2))) let ro = radius/Math.sqrt(2) let rin = Math.sqrt(2)*radius let lineR = d3.lineRadial() let star = Array(2*K+1).fill().map((e,v) => [2*Math.PI/(2*K)*v,(v+1)%2==0?dr:Math.sqrt(2)*(ro-2*ro/(2+Math.sqrt(2)))]) g.append("path") .attr("d",lineR(star)) .attr("fill",colors[2]) .attr("stroke",d3.color(colors[2]).darker(1.3).formatHex()) .attr("stroke-width",2) .attr("filter",splotch) let teeth = [[0,0],[Math.PI/2+Math.PI/K,dr],[Math.PI/2+Math.PI/(K/2),rin/(2+Math.sqrt(2))],[-Math.PI,rin-2*rin/(2+Math.sqrt(2))],[-Math.PI/2-Math.PI/(K/2),rin/(2+Math.sqrt(2))],[-Math.PI/2-Math.PI/K,dr],[0,0]] let teeth_data = Array(K).fill().map( (e,p)=>({ rot: 2*Math.PI/K*p*(180 / Math.PI),dx:radius*Math.cos(2*Math.PI/K*p),dy:radius*Math.sin(2*Math.PI/K*p)})) g.append("g") .attr("class","teeth") .selectAll("path") .data(teeth_data) .join("path") .attr("d",lineR(teeth)) .attr("fill",colors[1]) .attr("stroke",d3.color(colors[1]).darker(1.3).formatHex()) .attr("stroke-width",2) .attr("transform",d=>`translate(${d.dx},${d.dy}),rotate(${d.rot+90})`) .attr("filter",splotch) }33:[] 2e:{"title":"Islamic motif 2","cells":[{"id":0,"value":"# Islamic motif 2","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"viewof noise= Inputs.range([0, 0.02], {label: \"Fractal noise\", step: 0.0005,value:0.0005})","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"viewof blur = Inputs.range([0, 5], {label: \"Outer blur amount\", step: 0.1,value:0.8})","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof radius_pattern = Inputs.range([100, 250], {label: \"Radius\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"viewof deviation = Inputs.range([0, 2], {label: \"Shape deviation\", step: 0.1,value:2})","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"viewof display = Inputs.checkbox([\"Tiles\",\"Drawing lines\"], {label: \"Display\",value:[\"Tiles\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"colors= [\"#547099\",\"#945009\",\"#43906a\",\"#241210\",\"#172763\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = width","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"radius = width*0.5*0.75","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"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":214,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}