2d:null 2e:["$","title",null,{"children":"Layering Spirals 2 — Motion | AHJ George | Observable"}] 33:T66c,md`# Layering Spirals 2 — Motion =============================================================================================================== ### __Photosensitive Seizures:__ This page contains flickering images and motion. Viewer discretion may be advisable. For more information, [click here](https://www.epilepsy.com/learn/triggers-seizures/photosensitivity-and-seizures). ### __Ignores Reduced Motion Setting:__ This page contains animated motion that does not adhere to the _prefers-reduced-motion_ CSS media feature. If you have told your browser to minimize motion and animation, please be advised that this page will not pay attention to your settings. For more information, [click here](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). ### __Mobile Devices:__ This page is _extremely_ slow on mobile devices. =============================================================================================================== ##### _ This article is part two of a series. For part the first, [click here](https://observablehq.com/@anwarhahjjeffersongeorge/layering-spirals)_. After layering spirals, adding motion produces some interesting visual effects. Some of these effects are hinted at in non-moving figures. In the [previous notebook](https://observablehq.com/@anwarhahjjeffersongeorge/layering-spirals), some functions and code snippets helped make it easy to generate layered spiral figures. Here's what that looked like:`34:T4f2,svgfail1 = { const { minXY, svgWidthHeight, margin } = displaySettings let texts = ['this svg', 'has been', 'left blank', 'in failure'] let textcolranges = ['#0dd', '#080'] let textcols = d3.interpolateRgb(...textcolranges) let svg = d3.create('svg') .attr('viewBox', [...minXY, svgWidthHeight[0], svgWidthHeight[1]/2]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#eea' ) const anchors = svg .append('g') .selectAll() .data(texts) .enter() const textheight = (svgWidthHeight[1] - (2 + texts.length-1) * margin) / texts.length / 2 const textmargins = svgWidthHeight.map((v,i)=> (i == 0) ? margin : textheight/2 + (svgWidthHeight[1]/2-textheight * texts.length)) for (let t of texts) { anchors.append('text') .text(d => d) .attr('fill', (d, i, {length}) => textcols(i/length)) .attr('x', svgWidthHeight[0]/2) .attr('y', (d, i) => textmargins[1] + i * textheight) .attr('font-size', textheight) .attr('font-variant', 'small-caps') .attr('text-anchor', 'middle') // .attr('letter-spacing', ({length}) => `-${2 + .4 * length}px`) // very nasty on mobile } return svg }35:T4f5,svgfail2 = { const { minXY, svgWidthHeight, margin } = displaySettings let texts = ['it\'s not going', 'to work', 'without', 'more work',] let textcolranges = ['#02d', '#083'] let textcols = d3.interpolateRgb(...textcolranges) let svg = d3.create('svg') .attr('viewBox', [...minXY, svgWidthHeight[0], svgWidthHeight[1]/2]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#223' ) const anchors = svg .append('g') .selectAll() .data(texts) .enter() const textheight = (svgWidthHeight[1] - (2 + texts.length-1) * margin) / texts.length / 2 const textmargins = svgWidthHeight.map((v,i)=> (i == 0) ? margin : textheight/2 + (svgWidthHeight[1]/2-textheight * texts.length)) for (let t of texts) { anchors.append('text') .text(d => d) .attr('fill', (d, i, {length}) => textcols(i/length)) .attr('x', svgWidthHeight[0]/2) .attr('y', (d, i) => textmargins[1] + i * textheight) .attr('font-size', textheight) .attr('font-variant', 'small-caps') .attr('text-anchor', 'middle') // .attr('letter-spacing', ({length}) => `-${2 + .4 * length}px`) // very nasty on mobile } return svg }36:Ta1f,md`## Trying Lauren Nishizaki's Example [Lauren Nishizaki has published](https://observablehq.com/@lemonnish/svg-path-animations-d3-transition?collection=@lemonnish/animations/2) a [great many options](https://observablehq.com/@lemonnish/svg-path-animations-d3-transition?collection=@lemonnish/animations/) for adding movement to SVG. Their use of the [\`d3-transition\` library](https://github.com/d3/d3-transition) looks particularly promising.\` ### What Is \`d3-transition\`, Though? The \`d3-transition\` library describes itself as "Animated transitions for D3 selections". D3 selection methods allow one to select nodes of the HTML webpage [Document Object Model, or DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction), as well as nodes of the [XML-based markup that defines SVG images](https://developer.mozilla.org/en-US/docs/Web/SVG). Using \`d3-select\`, for instance, one might select all of the nodes with the class attribute 'targetClassName' by doing let targetClassName = 'targetClassName' let nodes = d3.selectAll('.' + targetClassname) // note starting '.' for class nodes // {...data corresponding to the selected nodes} The selection objects returned by the \`d3-selection\` methods include their own methods. These methods can be used to set and get CSS styles and HTML tag attributes. The \`transition\` method applies interpolated changes to the properties of the selections. Modifying the previous example, one might change the [SVG \`font-size\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/font-size) of the selected nodes with let newTextSize = '3em' let targetClassName = 'targetClassName' let nodes = d3.selectAll('.' + targetClassname) .transition() .style('font-size', newTextSize) Finally, one has some control over the nature of the transition. By calling the \`d3-transition\` function outside the context of a prior selection, one produces an object describing a transition. In this final preliminary example, the transition will take 2.718 seconds and use a [polynomial in-out easing](https://github.com/d3/d3-ease#easePolyInOut) with an exponent of _e_ let transitionObject = d3.transition() .duration(Math.E * 1000) // milliseconds .ease(d3.easePolyInOut(Math.E)) let newTextSize = '3em' let nodes = d3.selectAll('.' + targetClassname) .transition(transitionObject) .style('font-size', newTextSize) ~Oh look~ an SVG with a targetable class name to try this technique (with some modifications) on:` 37:T6ee,svgcopy = () => { const { minXY, svgWidthHeight, margin } = displaySettings let texts = ['this svg has', 'text nodes', 'with class', 'attributes',] let textcolranges = ['#3ad', '#a89'] let textcols = d3.interpolateRgb(...textcolranges) let svg = d3.create('svg') .attr('viewBox', [...minXY, svgWidthHeight[0], svgWidthHeight[1]/2]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#434403' ) const anchors = svg .append('g') .selectAll() .data(texts) .enter() const textheight = (svgWidthHeight[1] - (2 + texts.length-1) * margin) / texts.length / 2 const textmargins = svgWidthHeight.map((v,i)=> (i == 0) ? margin : textheight/2 + (svgWidthHeight[1]/2-textheight * texts.length)) const tween = (ti, length) => () => { let vals = [1,1.05,1] return d3.piecewise(d3.interpolateNumber, vals.map(v => v * textheight)) } for (let ti in texts) { let t = texts[ti] anchors.append('text') .text(d => d) .attr('class', targetClassName) .attr('fill', (d, i, {length}) => textcols(i/length)) .attr('x', svgWidthHeight[0]/2) .attr('y', (d, i) => textmargins[1] + i * textheight) .attr('font-variant', 'small-caps') .attr('text-anchor', 'middle') // .attr('letter-spacing', ({length}) => `-${4 + .4 * length}px`) // very nasty on mobile .attr('font-size', textheight) .transition() .on('start', function repeat () { d3.active(this) .transition() .duration(Math.E * 1000) .attrTween('font-size', tween(ti, texts.length)) .on('start', repeat) }) } window.d3 = d3 return {svg, anchors} }38:T42a,md`That was all somewhat of a detour, but it illustrates the principle. Being careful to give the SVG elements their own \`id\` and \`class\` attributes makes it possible to select and modify. In this case, the font size of each line increases independently, so each line grows from its own center point. ### Revamping the Code That Generates One Spiral See the errata section's \`onespiral\` function definition for the revised version. Some brief differences include: - The function accepting an \`id\` attribute specifier, - The function no longer returning the DOM node of the resulting SVG and instead returning the SVG itself, and - This item intentionally left blank. ### Revamping the Code That Updates the Paths in a Spiral See the errata section's \`update\` function definition for the revised version. - The function accepting a \`stroke-width\` specifier, - The function accepting a \`d3-interpolator\` for choosing the stroke color, and - Nothing else so far. ## Maybe now, finally, the movement can be added? ### Here's some side-to-side motion: `39:T48e,movingxspirals = { const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 20}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const translateTween = () => { return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0] + v * 3}, ${origin[1]})`)) } pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(50) .attrTween('transform', translateTween) .on('start', repeat) }) return svg.node() }3a:T48f,movingyspirals = { const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 20}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const translateTween = () => { return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1] + v * .4})`)) } pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(50) .attrTween('transform', translateTween) .on('start', repeat) }) return svg.node() }3b:T52f,rotatingspirals = { const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 13}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(1000) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }3c:T8bd,rotatingspiralswithband = { const highlightColor = '#f99' const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 33}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) const bandgroup = svg.append('g') const bandpath = d3.path() bandpath.moveTo(10,0) bandpath.lineTo(100,0) bandpath.closePath() const bandpath2 = d3.path() bandpath2.moveTo(-10, 0) bandpath2.lineTo(-100, 0) bandpath2.closePath() for (let path of [bandpath, bandpath2]) { bandgroup.append('path') .attr('d', path) .attr('transform', `translate(${origin[0]}, ${origin[1]})`) .attr('stroke', highlightColor) .attr('stroke-width', highlightWidth) } bandgroup.selectAll('path').each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }3d:T59c,rotatingspiralswithrelative = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 3}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }3e:T595,rotatingonespiralinward = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = onespiral({svg: basesvg, groupid, overrides:{oloops: 3}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }3f:T596,rotatingonespiraloutward = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = onespiral({svg: basesvg, groupid, overrides:{oloops: 3}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? 1 : -1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }40:T5e6,rotatingtwospiral = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult1 = onespiral({svg: basesvg, groupid, overrides:{oloops: 3}}) const multisresult2 = onespiral({svg: basesvg, groupid, overrides:{oloops: 3}}) // console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult1 const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }41:T5a9,rotatingtwospiralswithsamerelative = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({n: 2, svg: basesvg, groupid, overrides:{oloops: 3}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }42:T8b8,rotatingspiralsmakingbadcircles = { const groupid = 'spiralgroup' const circleStroke = 3 const { svgWidthHeight, minXY, margin } = displaySettings const circleCol = '#e00' const circlestartR = 30 const circleendR = svgWidthHeight[1] / 2 - margin const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 9, oresolution: 10}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } const circleTween = () => { return d3.piecewise(d3.interpolateString, [circlestartR, circleendR, circlestartR].map((v, i, a) => `translate(${origin[0]}, ${origin[1]}) scale(${v / a[0]}) `)) } // pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(1000) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) const path = d3.path() path.moveTo(0 + circlestartR, 0) path.arc(0, 0, circlestartR, 0, 2 * Math.PI) const circlegroup = svg.append('g') const circlepath = circlegroup.append('path') circlepath.attr('d', path) circlepath.attr('fill-opacity', 0) circlepath.attr('stroke', circleCol) circlegroup .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(10000) .attrTween('transform', circleTween) .on('start', repeat) }) return svg.node() }43:T592,ex2 = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2000 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 19, oresolution: 4}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const rotationPeriod = 1000 const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }44:T571,ex3 = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 20 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 10, oresolution: 33}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }45:T572,ex4 = { const highlightColors = ['#f99', '#e88'] const highlightWidth = 4 const duration = 2099 const groupid = 'spiralgroup' const { svgWidthHeight, minXY, margin } = displaySettings const basesvg = d3.create('svg') .attr('viewBox', [...minXY, ...svgWidthHeight]) .style('display', 'block') .style('margin', `0 -${margin}px`) .style('width', `calc(100% + ${2 * margin}px)`) .style('background', '#222') const multisresult = multispirals({svg: basesvg, groupid, overrides:{oloops: 10, oresolution: 6}}) console.log(multisresult) const { svg, multigroupname, pathgroupclass} = multisresult const pathsGroup = svg.selectAll(`.${pathgroupclass}`) const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) // console.log(pathgroupclass) const rotateTween = (i) => () => { const sign = i%2 ? -1 : 1 return d3.interpolateString(...[-1,1].map(v => `translate(${origin[0]}, ${origin[1]}) rotate(${v * 180 * sign})`)) } pathsGroup.attr('transform', `translate(${origin[0]}, ${origin[1]})`) pathsGroup.each(function(p, i) { d3.select(this) .transition() .on('start', function repeat () { d3.active(this) .transition() .ease(d3.easeLinear) .duration(duration) .attrTween('transform', rotateTween(i)) .on('start', repeat) }) }) return svg.node() }46:T7cb,onespiral = ({svg , rotation = 0, groupid = `onespiral${rotation}`, flipX=false, flipY=false, pathgroupclass=`spiralpaths`, overrides = {}}) => { const numloops = 11 const resolution = 19 let { oloops, oresolution, opoints, opalette } = overrides const { svgWidthHeight, minXY } = displaySettings // console.log(overrides) oloops = oloops || numloops oresolution = oresolution || resolution opoints = oloops * oresolution opalette = opalette || 1 const pathsGroup = svg.append('g') pathsGroup.attr('id', groupid) pathsGroup.attr('class', pathgroupclass) pathsGroup.attr('y', 0 ) // compute the points const paths = [] const origin = svgWidthHeight.map((r, i) => (r - minXY[i]) / 2) const points = [origin] const dth = Math.PI * 2 / oresolution const r0 = 10 // the spiral's max radius should not go out of bounds const r1 = svgWidthHeight[1] < svgWidthHeight[0] ? svgWidthHeight[1] : svgWidthHeight[0] const b = calcB(r0, r1 / 2, oloops) for (let p = 0; p < opoints + 2; p++) { let th = rotation + p * dth // console.log(th) points.push(xy(th, r0, b).map((r, i) => { switch (i) { case 0: return r * (flipX ? -1 : 1) break case 1: return r * (flipY ? -1 : 1) break } })) if (p > 1) { let cpath = d3.path() cpath.moveTo(...points[p - 1]) cpath.lineTo(...points[p]) // paths.push(`${cpath}`) paths.push(cpath) } } // console.log(paths) const animationTotalT = 1000 const dt = animationTotalT / paths.length let timerI = 0 const timer = d3.timer(function(elapsed) { updatePathsGroup(pathsGroup, paths.slice(0, ++timerI)) // updatePathsGroup(pathsGroup, paths.slice(0, ++timerI), opalette) // console.log(paths) if (/*elapsed > animationTotalT ||*/ timerI >= paths.length) { // console.log(timerI, numpoints) timer.stop() } }, dt) return { svg, pathgroupclass } }47:[] 31:{"id":"ec2e2ba58b2c7211","slug":"layering-spirals-2-motion","title":"Layering Spirals 2 — Motion","thumbnail":"7ef309c9182d608bf3e3c517600617dd7c03be9f72a9db3ce9424e2cbd5a251b","access_level":"public","create_time":"$D2019-10-15T21:50:14.873Z","update_time":"$D2019-11-05T22:43:34.404Z","view_time":null,"first_public_time":"$D2019-10-22T02:27:49.476Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"9e6fb59073039276","login":"anwarhahjjeffersongeorge","name":"AHJ George","avatar_url":"https://avatars-next.observableusercontent.com/ee638e90632c54f32ad955b69cf234d0262a429d5e7b5dee255d16f8ad91da97","tier":"starter_2024"},"version":922,"publish_version":922,"role":null,"authored":false,"authors":[{"type":"individual","id":"0c154142e08389e5","login":"anwarhahjjeffersongeorge","name":"AHJ George","avatar_url":"https://avatars-next.observableusercontent.com/ee638e90632c54f32ad955b69cf234d0262a429d5e7b5dee255d16f8ad91da97","tier":null}],"members":[{"type":"individual","id":"0c154142e08389e5","login":"anwarhahjjeffersongeorge","name":"AHJ George","avatar_url":"https://avatars-next.observableusercontent.com/ee638e90632c54f32ad955b69cf234d0262a429d5e7b5dee255d16f8ad91da97","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Layering Spirals 2 — Motion","cells":[{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`## A Reminder of Last Time's Folly:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"fourmult = fourmulti4starsvg ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`## A Goal for This August Occasion \nOnce the figure is rendered, it the lines produce an interference pattern: Some of the lines are far enough away to leave big gaps of negative space, but others get close until they blend together in a kind of blobbish way. \n\nInterference patterns like these are [visually similar to Moiré patterns](https://en.wikipedia.org/wiki/Moir%C3%A9_pattern), which arise when one superimposes two identical patterns and slightly misaligns them. Something cool about this is that adding motion to the figure can make the intensity and quality of the interference pattern appear to vary. \n\nFor instance, here is the same figure as above, but hovering slightly up and down:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"svgfail1.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`__Hahaha _just kidding_ __. Here's the figure moving up and down for real:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"svgfail2.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## No problem, right?\n\nIt looks like the desired effect will require a modification of the code from last time. That code creates static SVG vector elements that aren't animated — they have neither [\\`\\` tags](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate) nor merry music to uplift their spirits and give them rise to motive levity. Auspiciously, there are a number of ways to remedy this deficiency. \n\n### A method?\nTo moving the whole image up and down would probably be easiest by modifying the CSS [\\`position\\` property](https://developer.mozilla.org/en-US/docs/Web/CSS/position). The general problem with that strategy is that it might interfere with other page nodes. Since this is an SVG with its own structure, each node has its own ([\\`x\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x), [\\`y\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y)) coordinates that can be used to make the appropriate adjustments.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"svgcopy().svg.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`Good heavens, how awful! While this _technically_ worked, and _kinda_ shows a little bit of an [physiological optical illusion](https://en.wikipedia.org/wiki/Optical_illusion) where the patterns cross (look for the flickering around the center and along the diagonals), it's positively boring. Certainly there must be better types of motion for viewing. \n\n### Here's Some Up-and-down Motion:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`Blech! This _foul_ up-and-down oscillation is hardly any better, and that gyration looks positively vulgar! __Cuss!__ Might as well try moving the spirals in a more independent, less linear way. For instance, by adding a dash of rotation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`Well, that's certainly _something_. Perhaps it can be used to induce vomiting or help someone recall a particularly unpleasant hypnosis therapy session. After all, [everything is possible](https://duckduckgo.com/?q=everything+is+possible+os+mutantes&t=ffab&atb=v62-1&ia=shopping), and it's always important to keep a positive outlook when doing this sort of exercise.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`## What's Going On?\nAll that's happening here is that the individual spirals are rotating about the center of the drawing, but this type of illusion has a few semi-interesting side effects: \n\n### Banding\nThe moiré interference makes it appear that dark/light bands are radiating out from the center and waving around. Oh, how thrilling to see them cavort and prance about, and here's __*__ a couple of helpful reddish lines to indicate where to look. \n\n_* The number of loops in these spirals have been dialed up to make the effect more pronounced, so this image might take even longer to load than usual._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"md`### Relative Motion\nThe lines passing each other appear to travel in opposite radial directions. They're just spinning around, but because the spiral figure has a changing radius, they get closer or farther away from the center depending on whether they're spinning in the direction of positive or negative spiral growth. This image shows the relative motion with just a few spirals — It's easy to see the lines passing each other.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`Looking at the same spiral rotating in two different directions makes this idea even clearer. Here, it's rotating in its direction of positive growth, making it look like its tip is growing outward as the old bits get sucked inward.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`This one rotates in the opposite direction, seeming to pull in its tail as the inner bits move outward. These kinds of effects are sometimes used in two types of toys given by humans to their offspring: The [pinwheel](https://duckduckgo.com/?q=pinwheel&t=ffab&atb=v62-1&iax=images&ia=images) and the [kaleidoscope](https://duckduckgo.com/?q=kaleidoscope+&t=ffab&atb=v62-1&iar=images&iax=images&ia=images).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"md`Put two copies of the same spiral together, spin them in the opposite directions, and the relative motion manifests:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"md`However, using spirals that have opposite growth directions cancels out the effect. When they spin in the opposite directions, they contribute to the same kind of relative motion, in this example, moving inward.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`### Concentric Circles\nThere are no circles in these drawings. There will _never*_ be any circles in these drawings, rolling about with their smug expressions, constant radii and devious trigonometric identities. Just the mere thought of those _filthy_ rounded menaces is enough to set the phlegm to boiling, the mouth-bones to grinding and the blood squirter alight with the flames of righteous rage. __Spit and tarnation.__\n\nEven though there are _only spirals*_ here, certain types of this illusion has them in rather poor form indeed. In fact, their degeneracy is so pronounced that they appear to create [concentric](https://en.wikipedia.org/wiki/Concentric) circles. When the spiral loops get dense enough, the small cardoids, crescents and other figures normally found in the figures lose their definition, the curves blend together, and the eye loses the capacity to discern the fine details.\n\n_*To prove that the drawing lacks circles, a growing reddish circle has been added for comparison._`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":798,"value":"md`## Some Other Examples\nOne of the best things to do when generating these figures is try a bunch of different things. Not all of the attempts will create cool results, but it's good to figure out what might happen. Here are some of the best ones, and goodbye.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`\n=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n

errata

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"multispirals = ({svg, n=4, overrides = {}, multigroupname='multispirals'}) => {\n const dth = Math.PI * 2 / n\n const pathgroupclass = `multispiralpathsgroupclass`\n for (let i = 0; i < n; i++) {\n let rotation = i > 4 ? (i-4) * dth : 0\n let groupid = `${multigroupname}${i}`\n // let spiral = svg.select(`#${groupid}`)\n switch (i % 4) {\n case 1:\n onespiral({svg, rotation, groupid, flipY: true, pathgroupclass, overrides})\n break\n case 2:\n onespiral({svg, rotation, groupid, flipX: true, pathgroupclass, overrides })\n break\n case 3:\n onespiral({svg, rotation, groupid, flipX: true, flipY: true, pathgroupclass, overrides})\n break\n default:\n onespiral({svg, rotation, groupid, pathgroupclass, overrides})\n\n }\n }\n return { svg, multigroupname, pathgroupclass}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"// update a pathsGroup given some data\n function updatePathsGroup(pathsGroup, data, paletteInterpolator = d3.interpolateMagma, strokeWidth = 1) {\n // console.log(data)\n // DATA JOIN\n // join new data with any extant old elements\n var path = pathsGroup.selectAll('path')\n .data(data)\n // UPDATE\n path.attr('class', 'update')\n // ENTER\n // create any necessary new elements\n // ENTER and UPDATE\n // merge entered elements with update selection, \n // then apply operations to both\n path.enter().append('path')\n // .attr('class', 'enter')\n .attr('d', function(d) {\n // console.log(d)\n return d\n })\n .style('stroke', function(d, i, {length}) {\n let col = paletteInterpolator(i/length)\n // console.log(col)\n return col\n })\n .attr('stroke-width', strokeWidth)\n .merge(path)\n // EXIT\n // remove old elements as necessary\n path.exit().remove()\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { fourmulti4starsvg, r, x, y, xy, calcB } from '@anwarhahjjeffersongeorge/layering-spirals'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"targetClassName = 'text'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"displaySettings = Object.defineProperties({\n minXY: [0,0],\n height: 555,\n margin: 10\n}, {\n svgWidthHeight: {\n get () {\n return Array(2).fill(width/2 + 2 * this.margin)\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1","titling":"auto"}} 32:"$31:body"