31:T42d,viewof variables = { const form = html``; form.oninput = () => form.value = { 'columns': form.columns.valueAsNumber, 'delay': form.delay.valueAsNumber, 'ballr': form.ballr.valueAsNumber, 'pistonw': form.pistonw.valueAsNumber }; reset form.oninput(); return form; }32:T731,fallRebound = md`### Fall & Rebound Let ${tex`z(t)`} be the altitude of the ball at time ${tex`t`} and ${tex`h`} the initial dropping height. We are able to determine the evolution of ${tex`z`} in the case of a free fall. According to ***Newton's second law of motion***, let ${tex`t`} belong to ${tex`[0, +\infty]`} : ${tex.block`\begin{aligned} m\ddot{z}(t) &= -mg \\ \end{aligned}`} With ${tex`m`} the mass of the ball and ${tex`g`} the acceleration of free fall. #### Fall This gives us the speed and altitude of the ball during the fall. ${tex.block`\begin{aligned} v(t) &= -gt \\ z(t) &= h - gt^2/2 \\ \end{aligned}`} Let now ${tex`l`} be the height of the piston at the moment of the first impact of the ball. We set ${tex`t_f`} the moment of impact and ${tex`v_f`} the absolute speed just before the impact. ${tex.block`\boxed{\begin{aligned} t_f &= \sqrt{2(h - l)/g} \\ v_f &= \sqrt{2g(h - l)} \\ \end{aligned}}`} Finally, we have the equation of movement : ${tex.block`\boxed{ \forall t \in [0, t_f], \quad z(t) = h - gt^2/2 \\}`} These results help us decide on the following D3.js parameters for the free fall transition : * duration : ${tex`\sqrt{2(h - l)/g} `} * starting height : ${tex`h`} * ending height : ${tex`l`} * easing ball function : *d3.easeQuadIn* **The last parameter, the easing, is the trickiest**. Here is the [official documentation](https://github.com/d3/d3-ease). Easing is a way of *"distorting time to control apparent motion in animation"*. In the case of the free fall, we chose the quadratic easing because of the movement equation. In order to illustrate the easing time distortion, here is a comparison of some d3.ease functions applied in our situation. Trigger the button to launch a small animation showing the level of time distortion depending on the altitude of the ball or piston! `33:T657,{ trigger let mosaic = html`

`; const context = {'width': 200, 'height': 220, 'margin': {top : 25, bottom: 50, left: 20, right: 20}} const height_fall = context.height - context.margin.top - context.margin.bottom const g = gravity(conditions.moon) const duration_fall = get_duration_fall(height_fall, g) const svgOf = (easings) => bounce( {'columns': 1, 'delay': 0,'ballr': 3,'pistonw': 15, 'randomize': false,'g': g, 'ball_ease': easings.ball,'piston_ease': easings.piston}, context ) const methods = Object.keys(properties_easing_comparison) for (let method of methods){ const g = gravity(conditions.earth) const mode = properties_easing_comparison[method].mode const func = properties_easing_comparison[method].function const sequence = properties_easing_comparison[method].sequence const easings = properties_easing_comparison[method].easings const easing_functions = {'first': easings[mode][sequence[0]], 'second': easings[mode][sequence[1]]} let div = document.createElement("div") div.id = method div.style.float = 'left' div.style.width = '20%' let svg = svgOf(easings) set_label(svg, method, {'x': 50, 'y': 50}, 'legend-impact') set_label(svg, func, {'x': 50, 'y': 100}, 'legend-detail') set_easing(svg, easing_functions, duration_fall, {'x': 75, 'y': 100, 'width': 50, 'height': 30, 'margin': {'top' : 5, 'bottom': 5, 'left': 5, 'right': 5}}) div.appendChild(svg.node()) mosaic.appendChild(div) } return mosaic }34:T68f,md` #### Rebound Once the ball touches the piston, it is going to go up again. Since we suppose that the system is undamped, the ball is going to go back to the original position before falling again. We can feel that the time of rebound will be equal to the time of fall. But let's prove it. We start by using the ***conservation of the momentum***. Let ${tex`v_{f-}`} be the speed of the ball right before the impact and ${tex`v_{f+}`} the one right after. ${tex.block`\boxed{\begin{aligned} -v_{f-} = v_{f+} = v_f \\ \end{aligned}}`} The value of ${tex`v_{f+}`} will now be our initial condition for the rebound. We can again apply ***Newton's second law of motion***. Let ${tex`t`} belong to ${tex`[t_f, 2t_f]`}. ${tex.block`\begin{aligned} m\ddot{z}(t) &= -mg \\ \int_{t_f}^{t} \ddot{z}(t)dt &= - \int_{t_f}^{t} g dt \\ \dot{z}(t)dt &= - g(t-t_f) + v_f \\ \int_{t_f}^{t} \dot{z}(t)dt &= \int_{t_f}^{t} [- g(t - t_f) + v_f ]dt \\ z(t) &= - g(t^2 - t_f^2)/2 + v_f(t - t_f) + gt_f(t - t_f) + l \\ z(t) &= - g(t^2 - t_f^2)/2 + 2gt_f(t - t_f) + l \\ \end{aligned}`} But let's continue a bit trying to simplily the last equality. ${tex.block`\begin{aligned} z(t) &= - g(t^2 - t_f^2)/2 + 2gt_f(t - t_f) + l \\ z(t) &= - g(t^2 - t_f^2 - 4t_ft + 4t_f^2)/2 + l \\ z(t) &= - g((t - 2t_f)^2 - t_f^2)/2 + l \\ z(t) &= - g(t - 2t_f)^2/2 + gt_f^2/2 + l \\ z(t) &= h - g(t - 2t_f)^2/2\\ \end{aligned}`} That's it, we have the equation of movement for the rebound : ${tex.block`\boxed{ \forall t \in [t_f, 2t_f], \quad z(t) = h - g(t - 2t_f)^2/2 \\ }`} We can now merge the equations for the fall and rebound. In the case of 100 meters free fall, we get the following charts. `35:Tf90,{ const width = 400 const height = 400 const margin = {top : 50, bottom: 60, left: 70, right: 70} let container = html`

`; const height_free_fall = 100 const g = gravity(conditions.earth) const duration = get_duration_fall(height_free_fall, g) / 100 function a(X){ return - g } function v(X){ return - g*(X) } function z(X){ return height_free_fall - g*(X)**2/2 } const functions = { 'z': {'down': t => z(t), 'up': t => z(t - 2*duration), 'title': 'Evolution of the altitude on a period', 'label': 'z(t)'}, 'v': {'down': t => v(t), 'up': t => v(t - 2*duration), 'title': 'Evolution of the speed on a period', 'label': 'v(t)'}, 'a': {'down': t => a(t), 'up': t => a(t), 'title': 'Evolution of the acceleration on a period', 'label': 'a(t)'} } for (let f of Object.keys(functions)){ const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let div = document.createElement("div") div.id = f div.style.float = 'left' div.style.width = '33%' let f_obj = functions[f] let data_fall = d3.range(0, duration, 0.01) .map(t => ({'t': t, 'f' : f_obj.down(t) })) let data_rebound = d3.range(duration, 2*duration, 0.01) .map(t => ({'t': t, 'f' : f_obj.up(t) })) const data = data_fall.concat(data_rebound) let xScale = d3.scaleLinear() .domain(d3.extent(data.map(d => d.t))) .range([margin.left, width - margin.right]) console.log([d3.min(0, d3.min(data.map(d => d.f))), d3.max(0, d3.max(data.map(d => d.f)))]) let yScale = d3.scaleLinear() .domain([d3.min([0, d3.min(data.map(d => d.f))]), d3.max([0, d3.max(data.map(d => d.f))])]) .range([height - margin.bottom, margin.top]) let xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); let yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) let line = d3.line() .x(function(d) { return xScale(d.t) }) .y(function(d) { return yScale(d.f) }) let path = svg.append("g") path.append("path") .datum(data_fall) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "steelblue") .attr("d", line) path.append("path") .datum(data_rebound) .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke", "steelblue") .attr("d", line) svg.append("g") .call(xAxis) .append("text") .attr("class", "axis-label") .attr("transform", `translate(${(width + margin.left - margin.right) / 2}, ${2 * margin.bottom / 3})`) .text("t (s)"); svg.append("g") .call(yAxis) .append("text") .attr("class", "axis-label") .attr("transform", "rotate(-90)") .attr("x", - (height / 2)) .attr("y", - (2 * margin.left / 3)) .text(f_obj.label); path.append('circle') .attr('cx', xScale(data_fall.slice(-1)[0].t )) .attr('cy', yScale(data_fall.slice(-1)[0].f )) .attr('r', 3) .attr('fill', 'white') .style("stroke", 'black') .style("stroke-width", 1) path.append('circle') .attr('cx', xScale(data_rebound[0].t )) .attr('cy', yScale(data_rebound[0].f )) .attr('r', 3) .attr('fill', 'white') .style("stroke", 'black') .style("stroke-width", 1) path.append('circle') .attr('cx', xScale(duration)) .attr('cy', yScale(0)) .attr('r', 3) .attr('fill', 'steelblue') svg.append("g") .append("text") .attr("class","chart-title") .attr("transform", `translate(${margin.left}, ${margin.top / 2})`) .text(f_obj.title);//'Free fall and rebound of a ball from 100 meters (g = 9.81)' div.appendChild(svg.node()) container.appendChild(div) } return container }36:T59f,function bounce(parameters, context){ const width = context.width const height = context.height const margin = context.margin const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const height_free_fall = height - margin.top - margin.bottom const data = d3.range( margin.left, width - margin.right, (width - margin.left - margin.right) / parameters.columns ) const duration = get_duration_fall(height_free_fall, parameters.g) const delays = d3.range(0, parameters.columns, 1).map(function(d, i){ if (Boolean(parameters.randomize)){ return d * parameters.delay * d3.randomUniform()() } else { return i * parameters.delay } }) const conf_ball = {'r': parameters.ballr, 'y': margin.top, 'fall': height_free_fall, 'duration': duration, 'delays': delays, 'ease': parameters.ball_ease} const conf_piston = { 'width': parameters.pistonw, 'height': 10, 'y': height - margin.bottom, 'fall': margin.bottom/2, 'duration': duration, 'delays': delays, 'ease': parameters.piston_ease} let g_ball = svg.append('g') let g_piston = svg.append('g') create_ball(g_ball.selectAll('circle').data(data), conf_ball) create_piston({ 'head': g_piston.selectAll('head').data(data), 'body': g_piston.selectAll('body').data(data) }, conf_piston ) animate_ball(g_ball, conf_ball) animate_piston(g_piston, conf_piston) return svg }37:T634,{ let mosaic = html`

`; const context = {'width': 200, 'height': 220, 'margin': {top : 25, bottom: 50, left: 20, right: 20}} const height_free_fall = context.height - context.margin.top - context.margin.bottom const svgOf = (g) => bounce( {'columns': 1, 'delay': 0,'ballr': 3,'pistonw': 15, 'randomize': false,'g': g, 'ball_ease': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn}, 'piston_ease': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn}}, context ) const planets = Object.keys(conditions) for (let planet of planets){ const planet_conditions = conditions[planet] const g = gravity(planet_conditions) const period = Math.round(2 * get_duration_fall(height_free_fall, g))/1000 const r_equivalent = Math.round(planet_conditions.r / earth_radius * 10000)/10000 const m_equivalent = Math.round(planet_conditions.m / earth_mass * 10000)/10000 let div = document.createElement("div") div.id = planet div.style.float = 'left' div.style.width = `${100/planets.length}%` let svg = svgOf(g) set_label(svg, planet, {'x': 50, 'y': 50}, 'legend-impact') set_label(svg, `T = ${period}s`, {'x': 50, 'y': 150}, 'legend-text') set_detail(svg, `R = ${r_equivalent}`, {'x': 60, 'y': 360}, 'legend-detail') set_detail(svg, `M = ${m_equivalent}`, {'x': 60, 'y': 400}, 'legend-detail') set_planet(svg, planet_conditions, {'x': 80, 'y': 120}) div.appendChild(svg.node()) mosaic.appendChild(div) } return mosaic }38:T402,md` But how did we do that? First as you can see, our equations are completely independent of the mass. The only term that is representing the weight is the acceleration of free fall ${tex`g`} which is equal to ${tex`9.81m.s^{-2}`} on Earth. Second let's remark the following relation. The ***gravitational interaction*** that the Earth will create on a mass existing at its surface is : ${tex.block` F = -G\frac{M_em}{r_e^2} `} With ${tex`G`} the gravitational constant, ${tex`M_e`} the mass of the Earth, ${tex`r_e`} its radius, and ${tex`m`} the mass of an object. But this is actually a fancy way of talking about the weight! So giving that the weight is ${tex`F = -mg`}, the following relation appears. ${tex.block`\boxed{ g = G\frac{M_e}{r_e^2} }`} This means we can define a range of acceleration constants ${tex`g_p`} to define weight on different planets. We can then use those ${tex`g`} in the *bounce* function to simulate the fall and rebound on the planet. This is how we get the last visualization above. `39:T594,function set_easing(svg, ease_functions, duration_fall, context){ let scheme = svg.append('g') .attr("transform", `translate(${context.x},${context.y})`) let data_first = d3.range(0,1,0.01) data_first.push(1) data_first = data_first.map(d => ({'x': d, 'y': ease_functions.first(d)})) let data_second = d3.range(1,0,-0.01) data_second.push(0) data_second = data_second.map(d => ({'x': d, 'y': ease_functions.first(d)})) const data = data_first.concat(data_second) const xScale = d3.scaleLinear() .domain([0, 1]) .range([context.margin.left, context.width - context.margin.right]) const yScale = d3.scaleLinear() .domain([0, 1]) .range([context.height - context.margin.bottom, context.margin.top]) const line = d3.line() .x(d => xScale(d.x)) .y(d => yScale(d.y)) const path = scheme.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); let ball = scheme.append('circle').attr('r', 2) let count = 0 function transit() { count += 1 if (count < 8) { ball.transition() .duration( 2 * duration_fall) .ease(d3.easeLinear) .attrTween("transform", translateAlong(path.node())) .on("end", transit); } } transit() }3a:Ta63,properties_easing_comparison = ({ 'Linear Ball': { 'easings': { 'ball': {'up': d3.easeLinear, 'down': d3.easeLinear}, 'piston': {'up': t => 1, 'down': t => 0} }, 'mode': 'ball', 'function': 'd3.easeLinear', 'sequence': ['down', 'up'] }, 'QuadIn Ball': { 'easings': { 'ball': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn}, 'piston': {'up': t => 1, 'down': t => 0} }, 'mode': 'ball', 'function': 'd3.easeQuadIn', 'sequence': ['down', 'up'] }, 'CubicIn Ball': { 'easings': { 'ball': {'up': d3.easeCubicOut, 'down': d3.easeCubicIn}, 'piston': {'up': t => 1, 'down': t => 0} }, 'mode': 'ball', 'function': 'd3.easeCubicIn', 'sequence': ['down', 'up'] }, 'ExpIn Ball': { 'easings': { 'ball': {'up': d3.easeExpOut, 'down': d3.easeExpIn}, 'piston': {'up': t => 1, 'down': t => 0} }, 'mode': 'ball', 'function': 'd3.easeExpIn', 'sequence': ['down', 'up'] }, 'CircleIn Ball': { 'easings': { 'ball': {'up': d3.easeCircleOut, 'down': d3.easeCircleIn}, 'piston': {'up': t => 1, 'down': t => 0} }, 'mode': 'ball', 'function': 'd3.easeCircleIn', 'sequence': ['down', 'up'] }, 'Linear Piston': { 'easings': { 'ball': {'up': t => 0, 'down': t => 1}, 'piston': {'up': d3.easeLinear, 'down': d3.easeLinear} }, 'mode': 'piston', 'function': 'd3.easeLinear', 'sequence': ['up', 'down'] }, 'QuadOut Piston': { 'easings': { 'ball': {'up': t => 0, 'down': t => 1}, 'piston': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn} }, 'mode': 'piston', 'function': 'd3.easeQuadOut', 'sequence': ['up', 'down'] }, 'CubicOut Piston': { 'easings': { 'ball': {'up': t => 0, 'down': t => 1}, 'piston': {'up': d3.easeCubicOut, 'down': d3.easeCubicIn} }, 'mode': 'piston', 'function': 'd3.easeCubicOut', 'sequence': ['up', 'down'] }, 'ExpOut Piston': { 'easings': { 'ball': {'up': t => 0, 'down': t => 1}, 'piston': {'up': d3.easeExpOut, 'down': d3.easeExpIn} }, 'mode': 'piston', 'function': 'd3.easeExpOut', 'sequence': ['up', 'down'] }, 'CircleOut Piston': { 'easings': { 'ball': {'up': t => 0, 'down': t => 1}, 'piston': {'up': d3.easeCircleOut, 'down': d3.easeCircleIn} }, 'mode': 'piston', 'function': 'd3.easeCircleOut', 'sequence': ['up', 'down'] } })3b:[] 2f:{"title":"Bouncing Lab","cells":[{"id":0,"value":"md`# Bouncing Lab\n*10 min read*\n\nI am in the process of learning transitions in D3.js and I wondered how I could replicate balls bouncing on a moving piston. \n\nYou can play below with a first simulation. You can modifiy the **number** of columns (ball + piston), the **radius** of the balls, the **width** of the piston heads, and the **delay** between the falls of the different balls. The delay is chosen randomly by default. Finally you can select one of five **gravity conditions** to simulate falls on Earth, Moon, Mars, Mercury and Ceres.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"viewof reset = button({value: \"Reset Parameters\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"viewof randomize = checkbox({\n title: 'Randomize Fall Delay',\n options: [{ value: \"true\", label: \"Randomize Delay\" }],\n value: \"true\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"viewof gravity_value = radio({\n title: 'Pick Gravity Conditions',\n options: [\n { label: 'Earth', value: gravity(conditions.earth) },\n { label: 'Moon', value: gravity(conditions.moon) },\n { label: 'Mars', value: gravity(conditions.mars) },\n { label: 'Mercury', value: gravity(conditions.mercury) },\n { label: 'Ceres', value: gravity(conditions.ceres) },\n ],\n value: gravity(conditions.earth)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1519,"value":"bounce(\n {...variables, ...{'randomize': Boolean(randomize), 'g': gravity_value}, \n 'ball_ease': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn}, \n 'piston_ease': {'up': d3.easeQuadOut, 'down': d3.easeQuadIn}},\n {'width': 700, 'height': 300, 'margin': {top : 25, bottom: 50, left: 20, right: 20}}\n).node()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1064,"value":"md`## Some Physics\n\nSome physics was implemented to create the animation above. Indeed, a D3.js transition can, among others, be parameterized by playing between a ***duration***, ***starting*** and ***ending*** positions and, an ***easing*** function. The following section will guide you through some physics and visualizations to see how to parameterize the transition of the balls and pistons.\n\n * [\\`Fall & Rebound\\`](#fallRebound)\n * [\\`Gravity\\`](#gravitySimulation)\n\nWe suppose that there is no dissipation of energy along the fall and rebound. The ball will thus bounce endlessly!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2261,"value":"viewof trigger = button({value: \"Trigger easing\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1897,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1965,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2520,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2603,"value":"md`To wrap up, re-using the free fall results, we can decide on the following D3.js parameters for the rebound transition :\n* duration : ${tex`\\sqrt{2(h - l)/g}`}\n* starting height : ${tex`l`}\n* ending height : ${tex`h`}\n* easing ball function : *d3.easeQuadOut*\n\nFinally, since the piston is not subject to any force, we chose in the first and last visualizations (see [\\`Gravity\\`](#gravitySimulation) part) to have it follow *d3.easeLinear* throughout the movement. All the physics from this part is implemented in the *bounce* function and its dependencies.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2401,"value":"gravitySimulation = md`### Gravity\nLet's now play a little with gravity. What if we could have the ball and the piston exist under different gravity conditions? This has been implemented in a visualization showing the experiment for five celestial bodies. We set ${tex`T`} the period of rebound, ${tex`R`} and ${tex`M`} the ratios of the radius and mass of the celestial bodies and the ones of the Earth.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1541,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1830,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2823,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":969,"value":"md`### Methods`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2168,"value":"md`Methods to **create a ball and a piston**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1272,"value":"function create_ball(group, obj){\n group.enter()\n .append('circle')\n .attr('cx', d => d)\n .attr('cy', obj.y)\n .attr('r', obj.r)\n .attr('fill', d3.interpolateTurbo(0.1)) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"function create_piston(groups, obj){\n let create = (part, w, h) => groups[part]\n .enter()\n .append('rect')\n .attr('class', part)\n .attr('x', d => d - w/2)\n .attr('y', obj.y + obj.fall)\n .attr('width', w)\n .attr('height', h)\n .attr('fill', d3.interpolateTurbo(0.8))\n \n create('head', obj.width, 10)\n create('body', obj.width/3, 100)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2172,"value":"md`Methods to **animate a ball and a piston** according to conditions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"function animate_ball(group, obj){ \n group.selectAll('circle')\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.down)\n .delay(function(d, i){ return obj.delays[i]*10 })\n .on(\"start\", function repeat() {\n d3.active(this)\n .attr(\"cy\", obj.fall + obj.y - obj.r)\n .attr('fill', d3.interpolateTurbo(0.8))\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.up)\n .attr(\"cy\", obj.y)\n .attr('fill', d3.interpolateTurbo(0.1))\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.down)\n .on(\"start\", repeat);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"function animate_piston(group, obj){\n \n function animate(part){\n\n group.selectAll(part)\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.up)\n .delay(function(d, i){ return obj.delays[i]*10 })\n .on(\"start\", function repeat() {\n d3.active(this)\n .attr('y', obj.y)\n .attr('fill', d3.interpolateTurbo(0.8))\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.down)\n .attr('y', obj.y + obj.fall)\n .attr('fill', d3.interpolateTurbo(0.1))\n .transition()\n .duration(obj.duration)\n .ease(obj.ease.up)\n .on(\"start\", repeat); \n }) \n }\n \n animate('.head')\n animate('.body')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2805,"value":"md`Methods implementing direct **physics results**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"function gravity(obj){\n return G * obj.m / ( obj.r**2 )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"function get_duration_fall(h, g){\n return Math.sqrt(2 * h / g) * 100\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2795,"value":"md`Methods to **enrich visualizations**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1719,"value":"function set_planet(svg, obj, location){\n let planet = svg.append('g')\n .append('circle')\n .attr('cx', location.x)\n .attr('cy', location.y)\n .attr('r', obj.r / earth_radius * 20)\n .attr('fill', 'steelblue')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1669,"value":"function set_label(svg, label, location, clss){\n svg.append('g')\n .append('text')\n .attr(\"class\", clss)\n .attr(\"transform\", `translate(${location.x}, ${location.y / 2})`)\n .text(label)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"function set_detail(svg, text, location, clss){\n svg.append('g')\n .append('text')\n .attr(\"class\", clss)\n .style('visibility', 'visible')\n .attr(\"transform\", `translate(${location.x}, ${location.y / 2})`)\n .text(text)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1973,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2799,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"conditions = ({\n 'earth': {'m': 5.97e24,'r': 6371000}, \n 'moon': {'m': 7.34e22,'r': 1738100}, \n 'mars': {'m': 6.42e23, 'r': 3396200},\n 'mercury': {'m': 3.30e23, 'r': 2439700},\n 'ceres': {'m': 9.393e20, 'r': 469300}\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1735,"value":"earth_radius = conditions.earth.r","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"earth_mass = conditions.earth.m","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"G = 6.674 * 10**(-11)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2307,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"import {button, slider, radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2154,"value":"md`The method below used to translate a shape on a path in the second visualization, is from Mike Bostock https://bl.ocks.org/mbostock/1705868`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2052,"value":"function translateAlong(path) {\n var l = path.getTotalLength();\n return function(d, i, a) {\n return function(t) {\n var p = path.getPointAtLength(t * l);\n return \"translate(\" + p.x + \",\" + p.y + \")\";\n };\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2163,"value":"md`### CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"styles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}