2d:null 2e:["$","title",null,{"children":"Circle Wave | Alec Glassford | Observable"}] 33:[] 31:{"id":"ed8b196773425e7e","slug":"circle-wave","title":"Circle Wave","thumbnail":"d56da93737c1bd050debc94f5a6128a94fcb993f4eca53181d4811d4f7158219","access_level":"public","create_time":"$D2018-02-10T05:19:19.282Z","update_time":"$D2018-02-10T06:59:09.842Z","view_time":null,"first_public_time":"$D2018-02-10T06:59:17.076Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5dc7bd57f8e51774","login":"alecglassford","name":"Alec Glassford","avatar_url":"https://avatars-next.observableusercontent.com/34ec9bede921b4bc95e438620d6729db28fe4c2827c7ba0332b19f530fa4c106","tier":"starter_2024"},"version":271,"publish_version":271,"role":null,"authored":false,"authors":[{"type":"individual","id":"07db4dd6db0fca0e","login":"alecglassford","name":"Alec Glassford","avatar_url":"https://avatars-next.observableusercontent.com/34ec9bede921b4bc95e438620d6729db28fe4c2827c7ba0332b19f530fa4c106","tier":null}],"members":[{"type":"individual","id":"07db4dd6db0fca0e","login":"alecglassford","name":"Alec Glassford","avatar_url":"https://avatars-next.observableusercontent.com/34ec9bede921b4bc95e438620d6729db28fe4c2827c7ba0332b19f530fa4c106","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Circle Wave","cells":[{"id":0,"value":"md`# Circle Wave\n\n[adapted from Mike Bostock's block](https://bl.ocks.org/mbostock/2d466ec3417722e3568cd83fc35338e3) - I'm just messing around`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const svg = d3.select(DOM.svg(width, height)).style('background-color', bg);\n const g = svg.append('g')\n \t.attr('transform', `translate(${width / 2}, ${height / 2})`)\n .attr('fill', 'none')\n .attr('stroke-width', stroke)\n .attr('stroke-line-join', 'round');\n const paths = g.selectAll('path').data(['cyan', 'magenta', 'yellow']).enter().append('path')\n \t.attr('stroke', d => d)\n .style('mix-blend-mode', mix);\n paths.datum((_, i) => {\n return d3.radialLine()\n .curve(d3.curveLinearClosed)\n .angle(a => a)\n .radius((a) => {\n \tconst t = now / 1000;\n return height / 2.5 + \n Math.cos(a * wavelength - i * 2 * Math.PI /3 + t) * \n ((1 + Math.cos(a - t)) / 2) ** waviness * \n height / amplitude;\n });\n });\n paths.attr('d', d => d(angles));\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`## Adjust these`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof bg = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof mix = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof stroke = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof height = html``\n// height of the whole SVG","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`Uh, these terms below may all be somewhat wrong. (And the slidersare in the opposite direction from what you'd expect.) They were just mnemonics for me.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof amplitude = html``\n// How high the waves go. Slider is reversed.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof wavelength = html``\n// How wide each wave is from crest to crest. Slider is reversed.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof waviness = html``\n// How much of the circle's circumference is wavy. Slider is reversed.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`## etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"angles = d3.range(0, 2 * Math.PI, Math.PI / 200)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"