31:T815,{ b const svgDims = [600,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales const xScale = d3.scaleLinear().domain([-1,1]).range([30,570]) const yScale = d3.scaleLinear().domain([-2,4]).range([570,30]) //axes const xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`).call(d3.axisBottom(xScale).ticks(10)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(10)) //clip const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",570) .attr("height",570) .attr("x",xScale(-1)) .attr("y",yScale(4)) //drops const drops = [] for(let i = 0; i <= 1000; i++){ let x = Math.random()*2-1 let drop = svg.append("circle") .attr("cx",xScale(x)) .attr("cy",-10) .attr("r",3) .attr("class","drop") drops.push(drop) } //parabola const pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") //focus const focus = svg.append("circle") .attr("r",7) .attr("cx",xScale(0)) .attr("cy",yScale(1)) .attr("stroke","black") .attr("fill","tomato") yield svg.node() if(count == 1){ drops.forEach(async function(d){ const x = xScale.invert(d.attr("cx")) const p1 = {x:xScale(x),y:-10} const p2 = {x:xScale(x),y:yScale(4*x*x)} const p3 = {x:xScale(0),y:yScale(1)} const d1 = Math.sqrt(Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2)) const d2 = Math.sqrt(Math.pow(p2.x-p3.x,2) + Math.pow(p2.y-p3.y,2)) const delay = Math.random()*10000 await d.transition().duration(3*d1).ease(d3.easeLinear).delay(delay).attr("cy",p2.y).end() d.transition().duration(3*d2).ease(d3.easeLinear).attr("cx",p3.x).attr("cy",p3.y) }) } }32:Tb84,{ b const svgDims = [600,600] const svg = d3.select(DOM.svg(svgDims[0],svgDims[1])).attr("style","background:white;border:1px solid white") //scales const xScale = d3.scaleLinear().domain([-1,1]).range([30,570]) const yScale = d3.scaleLinear().domain([-2,4]).range([570,30]) //axes const xAxis = svg.append("g").attr("transform",`translate(0,${yScale(0)})`).call(d3.axisBottom(xScale).ticks(10)) const yAxis = svg.append("g").attr("transform",`translate(${xScale(0)},0)`).call(d3.axisLeft(yScale).ticks(10)) //clip const clip = svg.append("clipPath") .attr("id","clip") const box = clip.append("rect") .attr("width",570) .attr("height",570) .attr("x",xScale(-1)) .attr("y",yScale(4)) //drops const drops = [] for(let i = 0; i <= 200; i++){ let x = Math.random()*2-1 let drop = svg.append("circle") .attr("cx",xScale(x)) .attr("cy",-10) .attr("r",3) .attr("class","drop") .attr("fill","white") .attr("stroke","black") drops.push(drop) } //parabola const pathData = d3.line().x(d => xScale(d.x)).y(d => yScale(d.y))(data) svg.append("path") .attr("d",pathData) .attr("stroke","black") .attr("fill","none") .attr("clip-path","url(#clip)") //focus const focus = svg.append("circle") .attr("r",7) .attr("cx",xScale(0)) .attr("cy",yScale(1)) .attr("stroke","black") .attr("fill","orange") yield svg.node() if(count == 1){ drops.forEach(async function(d){ const x = xScale.invert(d.attr("cx")) const p1 = {x:xScale(x),y:-10} const p2 = {x:xScale(x),y:yScale(4*x*x)} const p3 = {x:xScale(0),y:yScale(1)} const d1 = Math.sqrt(Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2)) const d2 = Math.sqrt(Math.pow(p2.x-p3.x,2) + Math.pow(p2.y-p3.y,2)) const line1 = svg.append("line") .attr("x1",p1.x) .attr("y1",p1.y) .attr("x2",p1.x) .attr("y2",p1.y) .attr("stroke","cornflowerblue") .attr("stroke-width",1) .attr("opacity",1) const line2 = svg.append("line") .attr("x1",p2.x) .attr("y1",p2.y) .attr("x2",p2.x) .attr("y2",p2.y) .attr("stroke","orange") .attr("stroke-width",1) .attr("opacity",1) line1.lower() line2.lower() const delay = Math.random()*10000 line1.transition().duration(3*d1).ease(d3.easeLinear).delay(delay).attr("x2",p2.x).attr("y2",p2.y).attr("opacity",0) await d.transition().duration(3*d1).ease(d3.easeLinear).delay(delay).attr("cy",p2.y).end() line2.transition().duration(3*d2).ease(d3.easeLinear).attr("x2",p3.x).attr("y2",p3.y).attr("opacity",0) d.transition().duration(3*d2).ease(d3.easeLinear).attr("cx",p3.x).attr("cy",p3.y) }) } }33:[] 2f:{"title":"Rain Into a Parabola","cells":[{"id":0,"value":"md`# Rain Into a Parabola`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof b = button({value:\"run\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`

Variables and Code

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"data = {\n const data = []\n for(let i = -1.5;i<1.5;i=i+.01){\n const r = sin(i)/(4*cos(i)*cos(i))\n data.push({x:r*cos(i),y:r*sin(i)})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"mutable count = -1","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"{\n b\n if(mutable count < 1){\n mutable count++\n }\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"html`

Libraries

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {slider,button,select,text,radio,checkbox,number} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"stdlib = require( \"https://unpkg.com/@stdlib/stdlib@0.0.32/dist/stdlib-flat.min.js\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"math = require('mathjs@6.2.1/dist/math.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"sin = stdlib.base.sin","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"cos = stdlib.base.cos","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"1.5*180/Math.PI","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}