30:T527,fillRing = { const svg = d3.select(createSVG(width, height)); const innerRadius = d3.min([width, height])/5 const outerRadius = d3.min([width, height])/3 const innerCircle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", innerRadius) .style("fill","none") .style("stroke", "#000") const outerCircle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", outerRadius) .style("fill","none") .style("stroke", "#000") const angleScale = d3.scaleLinear() .range([0, 360]) .domain([0, n - 1]); const lines = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`) .selectAll(".line") .data(d3.range(n).map(Object)) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return innerRadius * Math.cos(angleScale(i) * Math.PI/180) }) .attr("y1", (d,i) => { return innerRadius * Math.sin(angleScale(i) * Math.PI/180) }) .attr("x2", (d,i) => { return outerRadius * Math.cos((angleScale(i) + angle) * Math.PI/180) }) .attr("y2", (d,i) => { return outerRadius * Math.sin((angleScale(i) + angle) * Math.PI/180) }) .style("fill","none") .style("stroke", "#000"); return svg.node() }31:T8b2,threeRings = { const svg = d3.select(createSVG(width, height)); const smallest = d3.min([width, height])/10 const innerRadius = d3.min([width, height])/5 const outerRadius = d3.min([width, height])/3 const smallestCircle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", smallest) .style("fill","none") .style("stroke", "#000") const innerCircle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", innerRadius) .style("fill","none") .style("stroke", "#000") const outerCircle = svg.append("circle") .attr("cx", width/2) .attr("cy", height/2) .attr("r", outerRadius) .style("fill","none") .style("stroke", "#000") const angleScale = d3.scaleLinear() .range([0, 360]) .domain([0, n - 1]); const innerLines = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`) .selectAll(".line") .data(d3.range(n).map(Object)) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return smallest * Math.cos(angleScale(i) * Math.PI/180) }) .attr("y1", (d,i) => { return smallest * Math.sin(angleScale(i) * Math.PI/180) }) .attr("x2", (d,i) => { return innerRadius * Math.cos((angleScale(i) + angle) * Math.PI/180) }) .attr("y2", (d,i) => { return innerRadius * Math.sin((angleScale(i) + angle) * Math.PI/180) }) .style("fill","none") .style("stroke", "#000"); const outerLines = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`) .selectAll(".line") .data(d3.range(n).map(Object)) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return innerRadius * Math.cos(angleScale(i) * Math.PI/180) }) .attr("y1", (d,i) => { return innerRadius * Math.sin(angleScale(i) * Math.PI/180) }) .attr("x2", (d,i) => { return outerRadius * Math.cos((angleScale(i) - angle) * Math.PI/180) }) .attr("y2", (d,i) => { return outerRadius * Math.sin((angleScale(i) - angle) * Math.PI/180) }) .style("fill","none") .style("stroke", "#000"); return svg.node() }32:T6e0,styling = { const svg = d3.select(createSVG(width, height)); const smallest = d3.min([width, height])/10 const innerRadius = d3.min([width, height])/5 const outerRadius = d3.min([width, height])/3 const innerLines = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`) .selectAll(".line") .data(d3.range(n).map(Object)) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return smallest * Math.cos(angleScale(i) * Math.PI/180) - offsetOne }) .attr("y1", (d,i) => { return smallest * Math.sin(angleScale(i) * Math.PI/180) - offsetOne }) .attr("x2", (d,i) => { return innerRadius * Math.cos((angleScale(i) + angle) * Math.PI/180) - offsetTwo }) .attr("y2", (d,i) => { return innerRadius * Math.sin((angleScale(i) + angle) * Math.PI/180) - offsetTwo }) .style("fill","none") .style("stroke-width", lineThicknessScale(1)) .style("stroke", "#000"); const outerLines = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`) .selectAll(".line") .data(d3.range(n).map(Object)) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return innerRadius * Math.cos(angleScale(i) * Math.PI/180) - offsetTwo }) .attr("y1", (d,i) => { return innerRadius * Math.sin(angleScale(i) * Math.PI/180) - offsetTwo }) .attr("x2", (d,i) => { return outerRadius * Math.cos((angleScale(i) - angle) * Math.PI/180) - offsetOne }) .attr("y2", (d,i) => { return outerRadius * Math.sin((angleScale(i) - angle) * Math.PI/180) - offsetOne }) .style("fill","none") .style("stroke-width", lineThicknessScale(2)) .style("stroke", "#000"); return svg.node() }33:T448,final = { const svg = d3.select(createSVG(width, height)) .style("overflow","visible") const g = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`); const lines = g.selectAll(".groups") .data(data.filter((d,i) => i != 1)) .enter().append("g") .selectAll(".line") .data((d) => d.values) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return radiusScale(d.parent - 1) * cosine(angleScale(i)) - getOffset(d.parent, 'X') }) .attr("y1", (d,i) => { return radiusScale(d.parent - 1) * sine(angleScale(i)) - getOffset(d.parent, 'Y') }) .attr("x2", (d,i) => { return radiusScale(d.parent) * invertCosine(angleScale(i), d.parent) - getOffset(d.parent + 1, 'X') }) .attr("y2", (d,i) => { return radiusScale(d.parent) * invertSine(angleScale(i), d.parent) - getOffset(d.parent + 1, 'Y') }) .style("stroke-width", (d,i) => { return lineThicknessScale(d.parent) }) .style("stroke", "#000"); return svg.node() }34:T50f,move = { const svg = d3.select(createSVG(width, height)) .style("overflow","visible") const g = svg.append("g") .attr("transform", `translate(${width/2},${height/2})`); const groups = g.selectAll(".groups") .data(data.filter((d,i) => i != 1)) .enter().append("g") groups.selectAll(".line") .data((d) => d.values) .enter().append("line") .attr("class", "line") .attr("x1", (d,i) => { return radiusScale(d.parent - 1) * cosine(angleScale(i)) - getOffset(d.parent, 'X') }) .attr("y1", (d,i) => { return radiusScale(d.parent - 1) * sine(angleScale(i)) - getOffset(d.parent, 'Y') }) .attr("x2", (d,i) => { return radiusScale(d.parent) * invertCosine(angleScale(i), d.parent) - getOffset(d.parent + 1, 'X') }) .attr("y2", (d,i) => { return radiusScale(d.parent) * invertSine(angleScale(i), d.parent) - getOffset(d.parent + 1, 'Y') }) .style("stroke-width", (d,i) => { return lineThicknessScale(d.parent) }) .style("stroke", "#000"); let jj = 0; d3.interval( () => { groups.transition() .duration(2000) .delay((d,i) => i*100) .attr('transform', `rotate(${jj})`) jj += 120; }, 2000); return svg.node() }35:[] 2e:{"title":"Bridget Riley","cells":[{"id":0,"value":"md`# Bridget Riley`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`Bridget Riley is an English painter who is one of the foremost exponents of Op art. I really enjoy this piece of hers from the [Tate Modern](https://www.tate.org.uk/art/artworks/riley-blaze-p05083) - __Blaze 1964__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"md`_The zigzag black and white lines in Blaze create the perception of a circular decent. As the brain interprets the image, the alternating pattern appears to shift back and forth. The interlocking lines add depth to the form as it rhythmically curves around the center of the page. The curator Joe Houston has argued that works such as Blaze \"trigger in the viewer an experience equivalent to an atmospheric electric charge; not an illusion, but an \"event.\" Riley herself has said, \"My work has developed on the basis of empirical analyses and syntheses, and I have always believed that perception is the medium through which states of being are directly experienced.\"_\n\n[ref](https://www.theartstory.org/movement-op-art-artworks.html)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`Ok, lets break it down. Make a ring`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"ring = {\n \n const svg = d3.select(createSVG(width, height));\n \n const innerRadius = d3.min([width, height])/5\n const outerRadius = d3.min([width, height])/3\n \n const innerCircle = svg.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", innerRadius)\n .style(\"fill\",\"none\")\n .style(\"stroke\", \"#000\")\n \n const outerCircle = svg.append(\"circle\")\n .attr(\"cx\", width/2)\n .attr(\"cy\", height/2)\n .attr(\"r\", outerRadius)\n .style(\"fill\",\"none\")\n .style(\"stroke\", \"#000\")\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof angle = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`Add N lines to the ring, placing the first point at the inner rings [x,y] and the second point at the outer rings [x,y]. The outer ring [x,y] is offset by an angle.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`Now let's add another ring, this time with lines going in the opposite direction.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`Remove the circles, scale the line thickness (inner lines are the thinest), then offset the lines by some constant.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"viewof lineThickness = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof offsetOne = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof offsetTwo = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"md`I love how it already looks like the rings are not perfect circles. Next, let's generalize the method so we can scale things like the number of rings.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof nRings = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"md`Let's create a dataset based on the number of rings and lines we want.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"data = d3.range(nRings).map((d,i) => {\n return {\n offset1X: offset1X,\n offset1Y: offset1Y,\n offset2X: offset2X,\n offset2Y: offset2Y,\n values: d3.range(n).map(() => { return { parent: i } })\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"generalize = {\n \n const svg = d3.select(createSVG(width, height));\n \n const g = svg.append(\"g\")\n .attr(\"transform\", `translate(${width/2},${height/2})`);\n \n const lines = g.selectAll(\".groups\")\n .data(data.filter((d,i) => i != 1))\n .enter().append(\"g\")\n .selectAll(\".line\")\n .data((d) => d.values)\n .enter().append(\"line\")\n .attr(\"class\", \"line\")\n .attr(\"x1\", (d,i) => { return radiusScale(d.parent - 1) * cosine(angleScale(i)) })\n .attr(\"y1\", (d,i) => { return radiusScale(d.parent - 1) * sine(angleScale(i)) })\n .attr(\"x2\", (d,i) => { return radiusScale(d.parent) * invertCosine(angleScale(i),d.parent) })\n .attr(\"y2\", (d,i) => { return radiusScale(d.parent) * invertSine(angleScale(i),d.parent) })\n .style(\"stroke-width\", (d,i) => { return lineThicknessScale(d.parent) })\n .style(\"stroke\", \"#000\");\n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"md`Then there appears to be a type of offest for each ring, alternating evenly.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"viewof offset1X = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"viewof offset1Y = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"viewof offset2X = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"viewof offset2Y = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"md`This sorta accomplishes a similar effect to the original. Still more work to do here to get it perfect. I think there is a gradient on the line thickness for each line, so a SVG line object wouldn't work. Converting to a path should handle that, and also allow for some better controls.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"cosine = (i) => {\n return Math.cos(i * Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"sine = (i) => {\n return Math.sin(i * Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"invertCosine = (i, parent) => {\n const check = (parent % 2 == 0 ? -angle : angle)\n return Math.cos((i + check)* Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"invertSine = (i, parent) => {\n const check = (parent % 2 == 0 ? -angle : angle)\n return Math.sin((i + check)* Math.PI/180)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"getOffset = (yourParent, v) => {\n const val = data.filter((d,i) => i == yourParent)[0]\n return (val == undefined ? 0 : (yourParent % 2 == 0 ? val['offset1' + v] : val['offset2' + v]) )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"angleScale = d3.scaleLinear()\n .range([0, 360])\n .domain([0, n - 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"radiusScale = d3.scaleLinear()\n .range([0, width/2.5])\n .domain([0, nRings-1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"lineThicknessScale = d3.scalePow()\n .exponent(2)\n .range([0, lineThickness])\n .domain([0, nRings])","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}