2b:null 2c:["$","title",null,{"children":"Doppler Effect | Ho Lee | Observable"}] 31:T5e8,config = { var cfg = { //width: 1000, //height: 600, width: 2000, height: 1200, //straight: 400, straight: 1133.3333333333, //radius: 250, radius: 283.3333333333, //base_x: 500, //base_y: 550, //person_x: 200, //person_y: 400, base_x: 433.3333435059, base_y: 883.3333129883, person_x: 1000.0000000000, person_y: 1072.2221679688, sound_speed: 340, // m/sec //car_speed: 100, // 100m/sec = 360km/s car_speed: 113.3333333333, // 100m/sec = 360km/s sampling_rate: 8000 }; cfg.circle_r = cfg.width / 100; cfg.font_size = cfg.width / 50; //cfg.wave_distance_base = 200; cfg.wave_distance_base = 113.3333333333; cfg.wave_radius_base = cfg.circle_r; cfg.corners = { left: (cfg.width - cfg.straight) / 2, right: (cfg.width + cfg.straight) / 2, top: cfg.height / 2 - cfg.radius, bottom: cfg.height / 2 + cfg.radius, center_y: cfg.height / 2 }; cfg.track_length = 2 * (cfg.radius * Math.PI + cfg.straight); cfg.rev_time = cfg.track_length / cfg.car_speed; // 왼쪽, 위 코너 입구를 기준으로 반시계 방향 cfg.time2where = [ {until: Math.PI * cfg.radius / cfg.car_speed, where: "left"}, {until: (Math.PI * cfg.radius + cfg.straight) / cfg.car_speed, where: "bottom"}, {until: (2 * Math.PI * cfg.radius + cfg.straight) / cfg.car_speed, where: "right"}, {until: 2 * (Math.PI * cfg.radius + cfg.straight) / cfg.car_speed, where: "top"} ]; return cfg; }32:T468,function drive(x, y, t) { t += spending_time(x, y); if (t < 0) t += Math.ceil(-t / config.rev_time) * config.rev_time; else t -= Math.floor(t / config.rev_time) * config.rev_time; let i = 0; while (t >= config.time2where[i].until) i++; if (i > 0) t -= config.time2where[i - 1].until; const w = config.time2where[i].where; if (w == "top") return [config.corners.right - t * config.car_speed, config.corners.top]; else if (w == "bottom") return [config.corners.left + t * config.car_speed, config.corners.bottom]; else if (w == "left") { const rad = Math.asin((config.corners.center_y - y) / config.radius) - t * config.car_speed / config.radius; return [config.corners.left + Math.cos(rad) * config.radius, config.corners.center_y + Math.sin(rad) * config.radius]; } else { // (w == "right") const rad = Math.asin((config.corners.center_y - y) / config.radius) + t * config.car_speed / config.radius; return [config.corners.right + Math.cos(rad) * config.radius, config.corners.center_y - Math.sin(rad) * config.radius]; } }33:T10c5,{ const stadium = svg``; const corners = config.corners; const draw = () => { const path = d3.path(); path.moveTo(corners.left, corners.top); path.arc(corners.left, corners.center_y, config.radius, Math.PI * 3 / 2, Math.PI / 2, true); path.lineTo(corners.right, corners.bottom); path.arc(corners.right, corners.center_y, config.radius, Math.PI / 2, Math.PI * 3 / 2, true); path.lineTo(corners.left, corners.top); return path; }; const track = d3.select(stadium).select("#track"); const car = d3.select(stadium).select("#car"); const shadow = d3.select(stadium).select("#shadow"); const car_pos = d3.select(stadium).select("#car_pos"); track.attr("d", draw()); const duration = config.rev_time * 1; // 10 바퀴 const shadow_position = prepare_shadow_position(config.rev_time, config.sampling_rate); shadow.attr("x", shadow_position[0][0]).attr("x", shadow_position[0][1]); const t_car = car .transition() .duration(duration * 1000) .ease(d3.easeLinear) .attrTween("transform", function () { return function(t) { const xy = drive(config.base_x, config.base_y, t * duration); return `translate(${xy[0]}, ${xy[1]})`; }; }); const max_sample = Math.ceil(config.rev_time * config.sampling_rate); const t_shadow = shadow .transition() .duration(duration * 1000) .ease(d3.easeLinear) .attrTween("transform", function () { return function(t) { var xy = shadow_position[Math.floor(t * duration * config.sampling_rate) % max_sample]; return `translate(${xy[0]}, ${xy[1]})`; }; }); const t_shadow_size = shadow.selectAll("circle") .transition() .duration(duration * 1000) .ease(d3.easeLinear) .attrTween("r", function () { return function(t) { const xy = shadow_position[Math.floor(t * duration * config.sampling_rate) % max_sample]; const d = Math.max(dd(xy[0], xy[1]), 1); const ratio = config.wave_distance_base / d; return ratio * config.wave_radius_base; }; }); return stadium; }34:Td5c,{ const stadium = svg``; const corners = config.corners; const draw = () => { const path = d3.path(); path.moveTo(corners.left, corners.top); path.arc(corners.left, corners.center_y, config.radius, Math.PI * 3 / 2, Math.PI / 2, true); path.lineTo(corners.right, corners.bottom); path.arc(corners.right, corners.center_y, config.radius, Math.PI / 2, Math.PI * 3 / 2, true); path.lineTo(corners.left, corners.top); return path; }; const track = d3.select(stadium).select("#track"); track.attr("d", draw()); const shadow_position = prepare_shadow_position(config.rev_time, config.sampling_rate); const max_sample = Math.ceil(config.rev_time * config.sampling_rate); for (let t = 0; t < config.rev_time; t+=4) { const car_xy = drive(config.base_x, config.base_y, t); const car = d3.select(stadium).append("g") .style("text-anchor", "middle") .style("font-size", config.font_size + "px") .attr("fill", "steelblue") .attr("transform", `translate(${car_xy[0]}, ${car_xy[1]})`); car.append("circle") .attr("r", config.circle_r); car.append("text") .attr("y", config.circle_r * 3) .text(`${t}s`); const shadow_xy = shadow_position[t * config.sampling_rate]; const d = Math.max(dd(shadow_xy[0], shadow_xy[1]), 1); const ratio = config.wave_distance_base / d; const shadow = d3.select(stadium).append("g") .style("text-anchor", "middle") .style("font-size", config.font_size + "px") .attr("fill", "gray") .attr("transform", `translate(${shadow_xy[0]}, ${shadow_xy[1]})`); shadow.append("circle") .attr("r", ratio * config.wave_radius_base); shadow.append("text") .attr("y", -2 * config.circle_r) .text(`${t}s`); } return stadium; }35:[] 2f:{"id":"31289a29da605bb4","slug":"doppler-effect","title":"Doppler Effect","thumbnail":"c80865069fc03cd69c43900b70ce1baa62db6b4e035f64f24be92b8e6e087d8a","access_level":"public","create_time":"$D2019-11-09T10:35:15.489Z","update_time":"$D2019-11-25T00:03:40.935Z","view_time":null,"first_public_time":"$D2019-11-12T13:08:54.737Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"29f5167acd16080f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":"starter_2024"},"version":578,"publish_version":578,"role":null,"authored":false,"authors":[{"type":"individual","id":"59b8d6010155978f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":null}],"members":[{"type":"individual","id":"59b8d6010155978f","login":"leeho","name":"Ho Lee","avatar_url":"https://avatars-next.observableusercontent.com/83583d5d556854bc1e24d4e926523c3b310adbc75b48f14a65165e32215dfa6d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Doppler Effect","cells":[{"id":0,"value":"md`# Doppler Effect`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"d3 = require(\"d3-array\", \"d3-path\", \"d3-selection\", \"d3-transition\", \"d3-ease\", \"d3-transform\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":371,"value":"// 왼쪽, 위 코너에서 x, y까지 가는 데 소요되는 시간\nfunction spending_time(x, y) {\n if (x >= config.corners.left && y < config.corners.right) {\n if (y == config.corners.top) \n return config.time2where[2].until + (config.corners.right - x) / config.car_speed;\n else return config.time2where[0].until + (x - config.corners.left) / config.car_speed;\n }\n else if (x < config.corners.left) {\n const rad = Math.PI / 2 - Math.asin((config.corners.center_y - y) / config.radius);\n return (config.radius * rad) / config.car_speed;\n }\n else {\n const rad = Math.PI / 2 + Math.asin((config.corners.center_y - y) / config.radius);\n return config.time2where[1].until + (config.radius * rad) / config.car_speed;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":382,"value":"function distance(x1, y1, x2, y2) {\n return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"function dd(x1, y1) {\n return distance(x1, y1, config.person_x, config.person_y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":409,"value":"function tt(x1, y1) {\n return distance(x1, y1, config.person_x, config.person_y) / config.sound_speed;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"function prepare_shadow_position(duration, sampling_rate) {\n const max_sample = Math.ceil(duration * sampling_rate);\n let shadow_position = new Array(max_sample);\n const tick = 1.0 / sampling_rate;\n let last_idx;\n \n // max_sample 번째까지 돌아야 비는 것이 없음\n for (let i = 0; i <= max_sample; i++) {\n const xy = drive(config.base_x, config.base_y, tick * i);\n const arrive_time = tick * i + tt(xy[0], xy[1]);\n const idx = Math.floor(arrive_time * sampling_rate);\n if (i == 0) \n last_idx = idx - 1;\n if (idx == last_idx) {\n // need interpolation\n }\n else {\n while (last_idx < idx) {\n last_idx++;\n shadow_position[last_idx % max_sample] = xy;\n }\n } \n }\n return shadow_position;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"function getTranslation(transform) {\n // Create a dummy g for calculation purposes only. This will never\n // be appended to the DOM and will be discarded once this function \n // returns.\n var g = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n \n // Set the transform attribute to the provided string value.\n g.setAttributeNS(null, \"transform\", transform);\n \n // consolidate the SVGTransformList containing all transformations\n // to a single SVGTransform of type SVG_TRANSFORM_MATRIX and get\n // its SVGMatrix. \n var matrix = g.transform.baseVal.consolidate().matrix;\n \n // As per definition values e and f are the ones for the translation.\n return [matrix.e, matrix.f];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"