30:T473,parameters = ({ unit: 'm', lane_width: 2.5, lane_rope_float_diameter: 0.15, lane_rope_ends_length: 5, lane_rope_ends_color: 'red', lane_rope_15m_center: 15, lane_rope_15m_length: 0.2, // not specified in the rule lane_rope_25m_center: 25, lane_rope_25m_length: 0.8, // not specified in the rule lane_marking_color: 'darkblue', // the rule mentions 'dark contrasting colour' lane_marking_width_min: 0.2, lane_marking_width: 0.25, // not specified in the rule lane_marking_width_max: 0.3, lane_marking_distance_to_end: 2, lane_marking_crossline_length: 1, lane_marking_small_crossline_length: 0.5, lane_marking_small_crossline_distance_to_end: 15, lane_numbers: { eight: [1, 2, 3, 4, 5, 6, 7, 8], ten: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, lane_rope_colors: { eight: [ 'green', 'blue', 'blue', 'yellow', 'yellow', 'yellow', 'blue', 'blue', 'green' ], ten: [ 'green', 'blue', 'blue', 'blue', 'yellow', 'yellow', 'yellow', 'blue', 'blue', 'blue', 'green' ] } })31:T13fc,function poolElements({ size = 960, combination = combinations.olympic_games, p = parameters } = {}) { const parameters = p; const poolLength = combination.pool_length; const poolWidth = combination.pool_width; const scale = v => v * (size / poolLength), x = scale, y = scale; const laneNumbers = parameters.lane_numbers[combination.lanes]; const laneRopeColors = parameters.lane_rope_colors[combination.lanes]; const laneCenter = i => poolWidth / 2 + (4.5 - i) * parameters.lane_width; const rect = function(x0, x1, y0, y1) { return context => { context.moveTo(x0, y0); context.lineTo(x1, y0); context.lineTo(x1, y1); context.lineTo(x0, y1); context.closePath(); return context; }; }; const laneMarkingParts = function(laneNumber) { const center = laneCenter(laneNumber); const w05 = parameters.lane_marking_width / 2; const dte = parameters.lane_marking_distance_to_end; const cl05 = parameters.lane_marking_crossline_length / 2; const scl05 = parameters.lane_marking_small_crossline_length / 2; const scdte = parameters.lane_marking_small_crossline_distance_to_end; const lane = rect( x(dte), x(poolLength - dte), y(center - w05), y(center + w05) ); const cross1 = rect( x(dte - w05), x(dte + w05), y(center - cl05), y(center + cl05) ); const cross2 = rect( x(poolLength - dte - w05), x(poolLength - dte + w05), y(center - cl05), y(center + cl05) ); const smallCross1 = rect( x(scdte - w05), x(scdte + w05), y(center - scl05), y(center + scl05) ); const smallCross2 = rect( x(poolLength - scdte - w05), x(poolLength - scdte + w05), y(center - scl05), y(center + scl05) ); const parts = [lane, cross1, cross2, smallCross1, smallCross2].map(p => ({ path: p, fillColor: parameters.lane_marking_color, strokeColor: 'none' })); const number = { text: `${laneNumber}`, fillColor: 'black', strokeColor: 'none', x: x(-1), // one meter to the left y: y(center) }; return parts.concat(number); }; const laneRopeParts = function(laneNumber1, laneNumber2, laneRopeColor) { const center = (laneCenter(laneNumber1) + laneCenter(laneNumber2)) / 2; const fd05 = parameters.lane_rope_float_diameter / 2; const el = parameters.lane_rope_ends_length; const ec = parameters.lane_rope_ends_color; const c15m = parameters.lane_rope_15m_center; const l15m05 = parameters.lane_rope_15m_length / 2; const c25m = parameters.lane_rope_25m_center; const l25m05 = parameters.lane_rope_25m_length / 2; const end1 = { path: rect(x(0), x(el), y(center - fd05), y(center + fd05)), fillColor: ec, strokeColor: 'none' }; const end2 = { path: rect( x(poolLength), x(poolLength - el), y(center - fd05), y(center + fd05) ), fillColor: ec, strokeColor: 'none' }; const lane = { path: rect(x(el), x(poolLength - el), y(center - fd05), y(center + fd05)), fillColor: laneRopeColor, strokeColor: 'none' }; const float15m1 = { path: rect( x(c15m - l15m05), x(c15m + l15m05), y(center - fd05), y(center + fd05) ), fillColor: ec, strokeColor: 'none' }; const float15m2 = { path: rect( x(poolLength - c15m - l15m05), x(poolLength - c15m + l15m05), y(center - fd05), y(center + fd05) ), fillColor: ec, strokeColor: 'none' }; const parts = [end1, end2, lane, float15m1, float15m2]; if (poolLength === 50) { parts.push({ path: rect( x(poolLength - c25m - l25m05), x(poolLength - c25m + l25m05), y(center - fd05), y(center + fd05) ), fillColor: ec, strokeColor: 'none' }); } return parts; }; return [ // floor { id: 'floor', parts: [ { path: rect(x(0), x(poolLength), y(0), y(poolWidth)), fillColor: 'lightblue', strokeColor: 'none' } ] }, // lane markings ...laneNumbers.map(laneNumber => { return { id: `marking-lane-${laneNumber}`, parts: laneMarkingParts(laneNumber) }; }), // lane ropes ...laneRopeColors.map((laneRopeColor, idx) => { const lane1 = idx - 1 >= 0 ? laneNumbers[idx - 1] : laneNumbers[0] - 1; const lane2 = idx <= laneNumbers.length - 1 ? laneNumbers[idx] : laneNumbers[laneNumbers.length - 1] + 1; return { id: `rope-between-lane-${lane1}-and-${lane2}`, parts: laneRopeParts(lane1, lane2, laneRopeColor) }; }), // border { id: 'border', parts: [ { path: rect(x(0), x(poolLength), y(0), y(poolWidth)), fillColor: 'none', strokeColor: 'black' } ] } ]; }32:T56d,svgPool = ({ w = width, h, combination = combinations.olympic_games, p = parameters, c = colors } = {}) => { const parameters = p; const colors = c; const margin = (h || w) * 0.05; // if h is defined, it takes precedence over w if (h) { w = ((h - 2 * margin) * combination.pool_length) / combination.pool_width + 2 * margin; } else { h = ((w - 2 * margin) * combination.pool_width) / combination.pool_length + 2 * margin; } const elements = poolElements({ size: w - 2 * margin, combination, parameters }); const svg = d3.select(DOM.svg(w, h)); const fontSize = Math.round(h / 10 / 3); const g = svg .append("g") .attr('transform', `translate(${margin}, ${margin})`); for (const element of elements) { const e = g.append('g').attr('id', element.id); for (const part of element.parts) { if (part.path) { e.append('path') .attr('fill', colors[part.fillColor] || part.fillColor) .attr('stroke', colors[part.strokeColor] || part.strokeColor) .attr('d', part.path(d3.path())); } else if (part.text) { e.append('text') .attr('fill', 'black') .attr('x', part.x) .attr('y', part.y + fontSize * 0.3) .style('font-size', `${fontSize}px`) .text(part.text); } } } return svg.node(); }33:T61c,canvasPool = ({ w = width, h, combination = combinations.olympic_games, p = parameters, c = colors } = {}) => { const parameters = p; const colors = c; const margin = (h || w) * 0.05; // if h is defined, it takes precedence over w if (h) { w = ((h - 2 * margin) * combination.pool_length) / combination.pool_width + 2 * margin; } else { h = ((w - 2 * margin) * combination.pool_width) / combination.pool_length + 2 * margin; } debugger; const ctx = DOM.context2d(w, h); ctx.save(); ctx.translate(margin, margin); const fontSize = Math.round(h / 10 / 3); // Draw const elements = poolElements({ size: w - 2 * margin, combination, parameters }); for (const element of elements) { for (const part of element.parts) { ctx.save(); const fillColor = colors[part.fillColor] || part.fillColor; const strokeColor = colors[part.strokeColor] || part.strokeColor; if (part.path) { ctx.beginPath(); part.path(ctx); if (fillColor !== 'none') { ctx.fillStyle = fillColor; ctx.fill(); } if (strokeColor !== 'none') { ctx.strokeStyle = strokeColor; ctx.stroke(); } } else if (part.text) { ctx.fillStyle = 'black'; ctx.font = `normal ${fontSize}px serif`; ctx.textBaseline = 'middle'; ctx.textAlign = 'center'; ctx.fillText(part.text, part.x, part.y); } ctx.restore(); } } ctx.restore(); return ctx.canvas; }34:[{"id":"146d98a41d2940e8037fbf18a76da5d52180cc4e34000622d776a6c717ba00ad63a1304e336880933e5371cac4a84ab96977ca41947198a04dc6a4eb7f45253f","href":"https://static.observableusercontent.com/files/146d98a41d2940e8037fbf18a76da5d52180cc4e34000622d776a6c717ba00ad63a1304e336880933e5371cac4a84ab96977ca41947198a04dc6a4eb7f45253f","name":"swimmingpool.jpg","type":"image/jpeg","lastModified":1600938419439.697,"size":274793}] 2e:{"title":"Swimming pool pitch","cells":[{"id":0,"value":"md`# Swimming pool pitch\n\nThe size and marks of competition swimming pools are officially described by the [“Fédération Internationale de Natation” (FINA)](https://www.fina.org/) in its [Facility Rules](https://www.fina.org/rules/facility-rules).\n\n[

](https://www.fina.org/sites/default/files/2017_2021_facilities_28012020_medium_ad.pdf)\n\nThere are two lengths: 25m and 50m, and the number of lanes can be 8 or 10. The color and size of the lane ropes and lane markings are fixed.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":958,"value":"{\n const gutter = 40;\n const w = (width - 2 * gutter) / 3;\n\n const p = key => html`\n

\n ${svgPool(w, combinations[key])}\n

${key}
`${combinations[key].pool_length} x ${\n combinations[key].pool_width\n }, ${combinations[key].lanes}`

`;\n const div = html`

`;\n for (const key of Object.keys(combinations)) {\n const card = html`

`;\n card.appendChild(canvasPool({ h: 200, w, combination: combinations[key] }));\n card.appendChild(\n html`

${key}
`${combinations[key].pool_length} x ${combinations[key].pool_width}, ${combinations[key].lanes} lanes`

`\n );\n div.appendChild(card);\n }\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"canvasPool({ combination: combinations.olympic_games })","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\n### CHANGELOG\n\n- 2021/03/08: add \\`h\\` option to \\`canvasPool\\` and \\`svgPool\\`\n- 2020/09/24: creation\n\n### TODO\n\n_empty_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":790,"value":"combinations = ({\n olympic_games: {\n pool_length: 50,\n pool_width: 25,\n lanes: \"eight\"\n },\n world_championships: {\n pool_length: 50,\n pool_width: 25,\n lanes: \"ten\"\n },\n world_championships_temporary: {\n pool_length: 50,\n pool_width: 26,\n lanes: \"ten\"\n },\n world_championships_25: {\n pool_length: 25,\n pool_width: 25,\n lanes: \"ten\"\n },\n eight_lanes_25: {\n pool_length: 25,\n pool_width: 21,\n lanes: \"eight\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"// nicer default colors\ncolors = ({\n red: '#D22425',\n lightblue: '#DEEFFE',\n blue: '#3F76AE',\n darkblue: '#35539D',\n green: '#5BB54D',\n yellow: '#F4E057'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":952,"value":"canvasPool()","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"svgPool()","pinned":true,"hidden":false,"mode":"ojs"},{"id":814,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":843,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":810,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}

${key}${combinations[key].pool_length} x ${\n combinations[key].pool_width\n }, ${combinations[key].lanes}

${key}${combinations[key].pool_length} x ${combinations[key].pool_width}, ${combinations[key].lanes} lanes

${key}
`${combinations[key].pool_length} x ${\n combinations[key].pool_width\n }, ${combinations[key].lanes}`

${key}
`${combinations[key].pool_length} x ${combinations[key].pool_width}, ${combinations[key].lanes} lanes`