25:["$","title",null,{"children":"Solar System | Neil Russell | Observable"}] 49:T4c9,{ // canvas const height = 180 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, revolutionsPerYear } = p4Inputs1 // utils const drawBg = p1.drawBg(context) const calculateTime = p3.calculateTime(timeScale) const calculateMonth = p4.calculateMonth(yearDuration) const calculateBodyAngle = p4.calculateBodyAngle(yearDuration, revolutionsPerYear) const drawText = p3.drawText(context) // vars let ticks = 0 const textWidth = 320 // guess while (true) { // clear canvas and bg drawBg(width, height) // time, month and angle data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const angle = calculateBodyAngle(ticks) // text drawText(time, (width / 2) - (textWidth / 2), (height / 2) - 30, '30px') drawText(`${month} / 12 months`, (width / 2) - (textWidth / 2), (height / 2) + 10, '30px') drawText(`${parseInt(angle)} °`, (width / 2) - (textWidth / 2), (height / 2) + 50, '30px') yield context.canvas await Promises.tick(1, ++ticks) // will tick about (not exactly for some reason) once a millisecond } }4a:T5cd,{ // canvas const height = 200 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, revolutionsPerYear } = p4Inputs2 // utils const drawBg = p1.drawBg(context) const drawBody = p1.drawBody(context) const calculateTime = p3.calculateTime(timeScale) const drawText = p3.drawText(context) const calculateMonth = p4.calculateMonth(yearDuration) const calculateBodyAngle = p4.calculateBodyAngle(yearDuration, revolutionsPerYear) // center const cx = width / 2 const cy = height / 2 // vars let ticks = 0 while (true) { // clear canvas and bg drawBg(width, height) // time, month and angle data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const angle = calculateBodyAngle(ticks) // clear canvas and bg drawBg(width, height) // sun and earth const { sun, earth } = p1.data drawBody(cx, cy, sun.size, sun.color) // ... calc earth x and y position from center const x = cx + earth.distance * Math.cos(angle * Math.PI / 180) const y = cy + earth.distance * Math.sin(angle * Math.PI / 180) drawBody(x, y, earth.size, earth.color) // text drawText(time, 10, 20, '16px') drawText(`month: ${parseInt(Math.ceil(month))} / 12`, 10, 40, '16px') yield context.canvas await Promises.tick(1, ++ticks) // will tick once a millisecond } }4b:T807,p6.data = { sun: { distance: 0, size: 40, color: '#fce683' }, bodies: [ { name: 'mercury', radius: 40, size: 2, color: '#ada3a6', pathColor: defaultPathColor, revolutionsPerYear: 3, children: [] }, { name: 'venus', radius: 60, size: 3, color: '#c9abb5', pathColor: defaultPathColor, revolutionsPerYear: 1.5, children: [] }, { name: 'earth', radius: 80, size: 6, color: '#cfde9e', pathColor: '#83944e', revolutionsPerYear: 1, children: [ { name: 'luna', radius: 12, size: 1, color: '#b8bebf', pathColor: '#58613e', revolutionsPerYear: 12, children: [] }, ] }, { name: 'mars', radius: 110, size: 4, color: '#deb59e', pathColor: defaultPathColor, revolutionsPerYear: 0.8, children: [] }, { name: 'jupiter', radius: 240, size: 20, color: '#decb9e', pathColor: defaultPathColor, revolutionsPerYear: 0.3, children: [ { name: 'io', radius: 30, size: 2, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, { name: 'europa', radius: 36, size: 1, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 4, children: [] }, { name: 'ganymede', radius: 44, size: 5, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 1.2, children: [] }, { name: 'callisto', radius: 54, size: 4, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 1, children: [] }, ] }, { name: 'saturn', radius: 320, size: 16, color: '#ded99e', pathColor: defaultPathColor, revolutionsPerYear: 0.2, children: [ { name: 'titan', radius: 30, size: 3, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, ] }, { name: 'uranus', radius: 400, size: 8, color: '#9ed2de', pathColor: defaultPathColor, revolutionsPerYear: 0.1, children: [] }, { name: 'neptune', radius: 480, size: 7, color: '#9eb8de', pathColor: defaultPathColor, revolutionsPerYear: 0.05, children: [ { name: 'tritan', radius: 14, size: 1, color: '#b8bebf', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, ] }, ] }4c:T47b,{ // canvas const height = 960 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, verticalOffset } = p6Inputs // utils const drawBg = p1.drawBg(context) const drawBody = p1.drawBody(context) const calculateTime = p3.calculateTime(timeScale) const drawText = p3.drawText(context) const calculateMonth = p4.calculateMonth(yearDuration) const drawSun = p6.drawSun(context) const drawBodies = p6.drawBodies(context, yearDuration) // center const cx = width / 2 const cy = height / 2 + verticalOffset // vars let ticks = 0 while (true) { // clear canvas and bg drawBg(width, height) // data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const { sun, bodies } = p6.data // view drawSun(cx, cy, sun.size) drawBodies(cx, cy, bodies, ticks) drawText(time, 10, 20, '16px') drawText(`${month} / 12 months`, 10, 40, '16px') // ... yield context.canvas await Promises.tick(1, ++ticks) // will tick once a millisecond } }4d:T6d0,{ const { mergeDeepRight, compose, keys, pick, head, addIndex, scan, propOr, forEach, zip, values } = R return p7.drawTable = (context, config) => { const { x, y, width, tblPadding, colVPadding, colHPadding, colWidths, fontSize } = mergeDeepRight({ x: 0, y: 0, width: 100, tblPadding: 0, colVPadding: 0, colHPadding: 0, colWidths: [], fontSize: 16 }, config) const drawText = p3.drawText(context) return fields => xs => { // data const headings = compose(keys, pick(fields), head)(xs) const colsX = addIndex(scan)((pos, value, i) => { return pos + propOr(i * value.length * 2, i)(colWidths) + colHPadding })(0)(headings) const headingHeight = tblPadding * 2 + fontSize const containerHeight = headingHeight + colVPadding + xs.length * (fontSize + colVPadding) // container p7.drawBox(context, x, y, width, containerHeight, 0, { fillAlpha: 0.05 })((boxX, boxY) => { // headings p7.drawBox(context, boxX, boxY, width, headingHeight, tblPadding)((x, y) => { forEach(([colX, text]) => { drawText(text, x + colX, y, `${fontSize}px`) })(zip(colsX, headings)) }) // rows const contentX = boxX + tblPadding const contentY = boxY + tblPadding addIndex(forEach)((data, i) => { const rowY = contentY + headingHeight + i * (fontSize + colVPadding) // other cols forEach(([colX, value]) => { const _value = typeof value === 'number' ? value.toFixed(2) : value drawText(_value, contentX + colX, rowY, `${fontSize}px`) })(zip(colsX, compose(values, pick(fields))(data))) })(xs) }) } } }4e:Tc84,{ const { reverse, pick, mergeRight, mergeDeepRight, concat, reduce, forEach, addIndex, keys, map, compose, head, values, scan, zip, find, propEq, takeLast, nth, prop, propOr, toUpper, zipWith } = R const _drawCurrentValueTable = (context, config) => p7.drawTable(context, config)(['name', 'size', 'raius', 'cx', 'cy', 'x', 'y']) const _drawDetailLogTable = (context, config) => nRows => targetName => log => { const data = compose(reverse, map(find(propEq('name', targetName))), takeLast(nRows))(log) return p7.drawTable(context, config)(['cx', 'cy', 'x', 'y'])(data) } // canvas const height = 560 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, logInterval, detailChangeInterval } = p7Inputs // tables config const tblLogN = 10 const tblPadding = 10 const colVPadding = 10 const colHPadding = 80 const currentValueTableConfig = { x: 10, y: 75, width: 600, tblPadding, colVPadding, colHPadding, colWidths: [60], } const detailLogTableConfig = { x: 620, y: 115, width: 320, tblPadding, colVPadding, colHPadding, } // utils const drawBg = p1.drawBg(context) const calculateTime = p3.calculateTime(timeScale) const drawText = p3.drawText(context) const calculateMonth = p4.calculateMonth(yearDuration) const calculateBodyPositions = p7.calculateBodyPositions(yearDuration) const drawCurrentValueTable = _drawCurrentValueTable(context, currentValueTableConfig) const drawDetailLogTable = _drawDetailLogTable(context, detailLogTableConfig)(tblLogN) // center const cx = width / 2 const cy = height / 2 // vars let ticks = 0 let log = [] let selectedLogIndex = -1 let selectedLogName = null while (true) { // clear canvas and bg drawBg(width, height) // data const { sun, bodies } = p6.data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const bodyPositionData = calculateBodyPositions(cx, cy, bodies, ticks) const bodyData = p7.flattenBodies(bodies) const combinedData = zipWith(mergeRight, bodyData, map(pick(['cx', 'cy', 'x', 'y']), bodyPositionData)) // log const shouldLog = ticks % (logInterval * 100) === 0 if (shouldLog) { log.push(combinedData) } // log detail const shouldChangeDetail = ticks % (detailChangeInterval * 100) === 0 if (shouldChangeDetail) { if (++selectedLogIndex >= bodies.length) { selectedLogIndex = 0 } selectedLogName = compose(prop('name'), nth(selectedLogIndex))(bodyData) } // view drawCurrentValueTable(combinedData) p7.drawBox(context, 620, 75, 320, 40, 10, { fillAlpha: 0.3 })((x, y) => { drawText(toUpper(selectedLogName), x, y, '16px') }) drawDetailLogTable(selectedLogName)(log) p7.drawBox(context, 10, 10, 160, 55, 10)((x, y) => { drawText(time, x, y, '16px') drawText(`${month} / 12 months`, x, y + 20, '16px') }) // ... yield context.canvas await Promises.tick(1, ++ticks) // will tick once a millisecond } }4f:Tb59,{ const { reverse, pick, mergeRight, mergeDeepRight, concat, reduce, forEach, addIndex, keys, map, compose, head, values, scan, zip, find, propEq, takeLast, nth, prop, propOr, toUpper, zipWith } = R // canvas const height = 960 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, logInterval, detailChangeInterval } = p7bInputs // tables config const tblLogN = 10 const tblPadding = 10 const colVPadding = 10 const colHPadding = 80 const detailLogTableConfig = { x: 620, y: 50, width: 320, tblPadding, colVPadding, colHPadding, fontSize: 12, } // utils const drawBg = p1.drawBg(context) const drawBody = p1.drawBody(context) const drawText = p3.drawText(context) const drawSun = p6.drawSun(context) const drawBodies = p6.drawBodies(context, yearDuration) const calculateTime = p3.calculateTime(timeScale) const calculateMonth = p4.calculateMonth(yearDuration) const calculateBodyPositions = p7.calculateBodyPositions(yearDuration) const drawDetailLogTable = targetName => log => { const data = compose(reverse, map(find(propEq('name', targetName))), takeLast(tblLogN))(log) return p7.drawTable(context, detailLogTableConfig)(['cx', 'cy', 'x', 'y'])(data) } // center const cx = width / 2 const cy = height / 2 // vars let ticks = 0 let log = [] let selectedLogIndex = -1 let selectedLogName = null while (true) { // clear canvas and bg drawBg(width, height) // data const { sun, bodies } = p6.data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const bodyPositionData = calculateBodyPositions(cx, cy, bodies, ticks) const bodyData = p7.flattenBodies(bodies) const combinedData = zipWith(mergeRight, bodyData, map(pick(['cx', 'cy', 'x', 'y']), bodyPositionData)) // log const shouldLog = ticks % (logInterval * 100) === 0 if (shouldLog) { log.push(combinedData) } // log detail const shouldChangeDetail = ticks % (detailChangeInterval * 100) === 0 if (shouldChangeDetail) { if (++selectedLogIndex >= bodies.length) { selectedLogIndex = 0 } selectedLogName = compose(prop('name'), nth(selectedLogIndex))(bodyData) } // view drawSun(cx, cy, sun.size) drawBodies(cx, cy, bodies, ticks) p7.drawBox(context, 620, 10, 320, 40, 10, { fillAlpha: 0.3 })((x, y) => { drawText(toUpper(selectedLogName), x, y, '16px') }) drawDetailLogTable(selectedLogName)(log) p7.drawBox(context, 10, 10, 160, 55, 10)((x, y) => { drawText(time, x, y, '16px') drawText(`${month} / 12 months`, x, y + 20, '16px') }) // ... yield context.canvas await Promises.tick(1, ++ticks) // will tick once a millisecond } }50:T4fb,{ const { toUpper } = R p8.drawBody = context => (name, x, y, radius, color, hoverColor, selectedColor, [mouseHoverX, mouseHoverY]) => { const drawText = p3.drawText(context) // bounding box context.beginPath() context.arc(x, y, radius + (radius > 3 ? 5 : 20), 0, 2 * Math.PI) const isMouseOver = context.isPointInPath(mouseHoverX, mouseHoverY) context.closePath() console.log(mouseHoverX, mouseHoverY) // body context.beginPath() context.arc(x, y, radius, 0, 2 * Math.PI) context.fillStyle = color // hover styles if (isMouseOver) { context.fillStyle = hoverColor context.shadowBlur = 15 context.shadowColor = color } // ... context.fill() // reset context.shadowBlur = 0 // tooltip if (isMouseOver) { const tooltipX = radius > 3 ? x + 90 : x + 30 const tooltipY = radius > 3 ? y - 60 : y - 35 context.beginPath() context.moveTo(x, y) context.lineTo(tooltipX, tooltipY + 20) context.strokeStyle = '#2b83cc' context.stroke(); p7.drawBox(context, tooltipX, tooltipY, name.length * 12, 20, 5, { fillAlpha: 0.1 })((x, y) => { drawText(toUpper(name), x, y, '12px') }) } } return p8.drawBody }51:Tae6,p8.data = { sun: { distance: 0, size: 40, color: '#fce683' }, bodies: [ { name: 'mercury', radius: 40, size: 2, color: '#ada3a6', hoverColor: '#d6bcc4', selectedColor: '#ffccdc', pathColor: defaultPathColor, revolutionsPerYear: 3, children: [] }, { name: 'venus', radius: 60, size: 3, color: '#c9abb5', hoverColor: '#e3bac8', selectedColor: '#ffadc9', pathColor: defaultPathColor, revolutionsPerYear: 1.5, children: [] }, { name: 'earth', radius: 80, size: 6, color: '#cfde9e', hoverColor: '#d8ed93', selectedColor: '#dcff6b', pathColor: '#83944e', revolutionsPerYear: 1, children: [ { name: 'luna', radius: 12, size: 1, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: '#58613e', revolutionsPerYear: 12, children: [] }, ] }, { name: 'mars', radius: 110, size: 4, color: '#deb59e', hoverColor: '#f7b994', selectedColor: '#ff9759', pathColor: defaultPathColor, revolutionsPerYear: 0.8, children: [] }, { name: 'jupiter', radius: 240, size: 20, color: '#decb9e', hoverColor: '#f5d793', selectedColor: '#ffc94f', pathColor: defaultPathColor, revolutionsPerYear: 0.3, children: [ { name: 'io', radius: 30, size: 2, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, { name: 'europa', radius: 36, size: 1, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 4, children: [] }, { name: 'ganymede', radius: 44, size: 5, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 1.2, children: [] }, { name: 'callisto', radius: 54, size: 4, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 1, children: [] }, ] }, { name: 'saturn', radius: 320, size: 16, color: '#ded99e', hoverColor: '#f5ed9a', selectedColor: '#fff057', pathColor: defaultPathColor, revolutionsPerYear: 0.2, children: [ { name: 'titan', radius: 30, size: 3, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, ] }, { name: 'uranus', radius: 400, size: 8, color: '#9ed2de', hoverColor: '#91e7fa', selectedColor: '#3ad9fc', pathColor: defaultPathColor, revolutionsPerYear: 0.1, children: [] }, { name: 'neptune', radius: 480, size: 7, color: '#9eb8de', hoverColor: '#87b7ff', selectedColor: '#458fff', pathColor: defaultPathColor, revolutionsPerYear: 0.05, children: [ { name: 'tritan', radius: 14, size: 1, color: '#b8bebf', hoverColor: '#c8dbde', selectedColor: '#c9f8ff', pathColor: defaultPathColor, revolutionsPerYear: 6, children: [] }, ] }, ] }52:Tbe6,{ const { reverse, pick, mergeRight, mergeDeepRight, concat, reduce, forEach, addIndex, keys, map, compose, head, values, scan, zip, find, propEq, takeLast, nth, prop, propOr, toUpper, zipWith } = R // canvas const height = 960 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, logInterval, detailChangeInterval } = p8Inputs // tables config const tblLogN = 10 const tblPadding = 10 const colVPadding = 10 const colHPadding = 80 const detailLogTableConfig = { x: 620, y: 50, width: 320, tblPadding, colVPadding, colHPadding, fontSize: 12, } // utils const drawBg = p1.drawBg(context) const drawBody = p1.drawBody(context) const drawText = p3.drawText(context) const drawSun = p6.drawSun(context) const drawBodies = p8.drawBodies(context, yearDuration) const calculateTime = p3.calculateTime(timeScale) const calculateMonth = p4.calculateMonth(yearDuration) const calculateBodyPositions = p7.calculateBodyPositions(yearDuration) const drawDetailLogTable = targetName => log => { const data = compose(reverse, map(find(propEq('name', targetName))), takeLast(tblLogN))(log) return p7.drawTable(context, detailLogTableConfig)(['cx', 'cy', 'x', 'y'])(data) } // center const cx = width / 2 const cy = height / 2 // vars let ticks = 0 let log = [] let selectedLogIndex = -1 let selectedLogName = null // vars : user interactions let mouseHoverCoords = [0,0] d3.select(context.canvas).on('mousemove', () => { mouseHoverCoords = d3.mouse(context.canvas) }) while (true) { // clear canvas and bg drawBg(width, height) // data const { sun, bodies } = p8.data const { m, s, ms } = calculateTime(ticks) const time = p3.formatTime({ m, s, ms }) const month = calculateMonth(ticks) const bodyPositionData = calculateBodyPositions(cx, cy, bodies, ticks) const bodyData = p7.flattenBodies(bodies) const combinedData = zipWith(mergeRight, bodyData, map(pick(['cx', 'cy', 'x', 'y']), bodyPositionData)) // log const shouldLog = ticks % (logInterval * 100) === 0 if (shouldLog) { log.push(combinedData) } // log detail const shouldChangeDetail = ticks % (detailChangeInterval * 100) === 0 if (shouldChangeDetail) { if (++selectedLogIndex >= bodies.length) { selectedLogIndex = 0 } selectedLogName = compose(prop('name'), nth(selectedLogIndex))(bodyData) } // view drawSun(cx, cy, sun.size) drawBodies(mouseHoverCoords, combinedData) p7.drawBox(context, 620, 10, 320, 40, 10, { fillAlpha: 0.3 })((x, y) => { drawText(toUpper(selectedLogName), x, y, '16px') }) drawDetailLogTable(selectedLogName)(log) p7.drawBox(context, 10, 10, 160, 55, 10)((x, y) => { drawText(time, x, y, '16px') drawText(`${month} / 12 months`, x, y + 20, '16px') }) // ... yield context.canvas await Promises.tick(1, ++ticks) // will tick once a millisecond } }53:T5ce,{ const { toUpper } = R // canvas const height = 960 const context = DOM.context2d(width, height) // inputs const { timeScale, yearDuration, logInterval, detailChangeInterval } = p8Inputs const mouseHoverCoords = getMouseHoverCoords(context) // tables config const tblLogN = 10 const tblPadding = 10 const colVPadding = 10 const colHPadding = 80 const detailLogTableConfig = { x: 620, y: 50, width: 320, tblPadding, colVPadding, colHPadding, fontSize: 12, } // utils const drawBg = p1.drawBg(context) const drawBody = p1.drawBody(context) const drawText = p3.drawText(context) const drawSun = p6.drawSun(context) const drawBodies = p8.drawBodies(context, yearDuration) const drawDetailLogTable = p7.drawTable(context, detailLogTableConfig)(['cx', 'cy', 'x', 'y']) // center const cx = width / 2 const cy = height / 2 // data const { sun, bodies } = p8.data const { time, month } = computedTimeData // clear canvas and bg drawBg(width, height) // view drawSun(cx, cy, sun.size) drawBodies(mouseHoverCoords, computedBodyData) p7.drawBox(context, 620, 10, 320, 40, 10, { fillAlpha: 0.3 })((x, y) => { drawText(toUpper(selectedLogName), x, y + 20, '16px') }) drawDetailLogTable(selectedLog) p7.drawBox(context, 10, 10, 160, 55, 10)((x, y) => { drawText(time, x, y, '16px') drawText(`${month} / 12 months`, x, y + 20, '16px') }) // ... yield context.canvas }54:[] 29:{"id":"936613c07cbb9e7c","slug":null,"title":"Solar System","thumbnail":"8602d1d65037395387bf1c1c34e06587ad0aa51bbdbbe4ddedc33dcd3f61e9a5","access_level":"public","create_time":"$D2020-12-12T15:29:05.862Z","update_time":"$D2021-01-29T12:37:23.845Z","view_time":null,"first_public_time":"$D2022-12-05T08:42:17.029Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e0806e5ab6d2c145","login":"neilrussell6","name":" Neil Russell","avatar_url":"https://avatars-next.observableusercontent.com/a3c6158fccd59dae2787eaafc6e28aaa7e42c77d17d54ea36017433f968af2ed","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3528,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b43f139eeeffcb9","login":"neilrussell6","name":" Neil Russell","avatar_url":"https://avatars-next.observableusercontent.com/a3c6158fccd59dae2787eaafc6e28aaa7e42c77d17d54ea36017433f968af2ed","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1b43f139eeeffcb9","login":"neilrussell6","name":" Neil Russell","avatar_url":"https://avatars-next.observableusercontent.com/a3c6158fccd59dae2787eaafc6e28aaa7e42c77d17d54ea36017433f968af2ed","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Solar System","cells":[{"id":0,"value":"html`

Solar System

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"md`\n# Part 1 :: Canvas\nSimple canvas with 2 objects (sun and earth)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"p1 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"p1.drawBody = context => (x, y, radius, color) => {\n context.beginPath()\n context.arc(x, y, radius, 0, 2 * Math.PI)\n context.fillStyle = color\n context.fill()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1474,"value":"p1.drawBg = context => (width, height) => {\n // reset canvas (for animations)\n context.clearRect(0, 0, width, height)\n \n // draw bg\n context.fillStyle = '#000'\n context.fillRect(0, 0, width, height)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"p1.data = {\n sun: { distance: 0, size: 20, color: '#fce683' },\n earth: { distance: 60, size: 5, color: '#cfde9e' },\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"{\n // canvas\n const height = 120\n const context = DOM.context2d(width, height)\n \n // utils\n const drawBg = p1.drawBg(context)\n const drawBody = p1.drawBody(context)\n \n // center\n const cx = width / 2\n const cy = height / 2\n \n // bg, sun and earth\n drawBg(width, height)\n const { sun, earth } = p1.data\n drawBody(cx, cy, sun.size, sun.color)\n drawBody(cx + earth.distance, cy, earth.size, earth.color)\n\n return context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`\n# Part 2 :: Animation and Controls\n\nStill just 2 objects on a canvas, but now one (earth) is animated, rotating around the other (sun).\nAnd we have a slider to control the animation refresh interval.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"viewof p2Inputs = form(html`

interval: (Interval between each canvas redraw)

speed: (How much is the angle incremented on each redraw)

\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"p2Inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"{\n // canvas\n const height = 200\n const context = DOM.context2d(width, height)\n \n // inputs\n const { interval, speed } = p2Inputs\n \n // utils\n const drawBg = p1.drawBg(context)\n const drawBody = p1.drawBody(context)\n \n // center\n const cx = width / 2\n const cy = height / 2\n \n // vars\n let angle = 0\n \n while (true) {\n // increment angle every frame\n angle += speed\n if (angle > 360) angle = 0\n\n // clear canvas and bg\n drawBg(width, height)\n \n // sun and earth\n const { sun, earth } = p1.data\n drawBody(cx, cy, sun.size, sun.color)\n \n // ... calc earth x and y position from center\n const x = cx + earth.distance * Math.cos(angle * Math.PI / 180)\n const y = cy + earth.distance * Math.sin(angle * Math.PI / 180)\n drawBody(x, y, earth.size, earth.color)\n\n yield context.canvas\n await Promises.delay(interval)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1363,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`\n# Part 3 :: Timer\n\nFor this visualisation we want to control the planetary animation relative to time,\nso let's start by creating a timer and displaying it.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"p3 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1831,"value":"md`\n### calculate time\n\nThis function takes a time scale (which will allow us to slow down and speed up time), and a current ticks,\nand should return { m, s, ms } time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"test('calculate time test', async t => {\n // given ... each tick is a millisecond\n // when ... we calculate time for the following tick and timeScale combinations\n // then ... we should get the expected m, s & ms\n const params = [\n [1, 1, [0, 0, 1]], // 1ms\n [1, 100, [0, 1, 0]], // 1s\n [1, 6000, [1, 0, 0]], // 1m\n [0.5, 6000, [0, 30, 0]], // 1m at half speed\n [2, 6000, [2, 0, 0]], // 1m at double speed\n [1, 9090, [1, 30, 90]], // all three units\n ]\n t.plan(1 * params.length)\n params.forEach(([timeScale, tick, expected]) => {\n const result = p3.calculateTime(timeScale)(tick)\n const [m, s, ms] = expected\n t.deepEqual(result, { m, s, ms })\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"p3.calculateTime = timeScale => ticks => {\n const m = parseInt(ticks / 6000 * timeScale) % 60\n const s = parseInt(ticks / 100 * timeScale) % 60\n const ms = parseInt(ticks * timeScale % 100)\n return { m, s, ms }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"md`\n### format time\n\nThis function takes a { m, s, ms } time and formats it for display eg. 12:30,12.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"test('format time test', async t => {\n const params = [\n [[0, 0, 1], '00:00,01'], // 1ms\n [[0, 1, 0], '00:01,00'], // 1s\n [[1, 0, 0], '01:00,00'], // 1m\n [[0, 30, 0], '00:30,00'], // 1m at half speed\n [[2, 0, 0], '02:00,00'], // 1m at double speed\n [[1, 30, 90], '01:30,90'], // all three units\n ]\n t.plan(1 * params.length)\n params.forEach(([time, expected]) => {\n const [m, s, ms] = time\n const result = p3.formatTime({ m, s, ms })\n t.deepEqual(result, expected)\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1821,"value":"p3.formatTime = ({ m, s, ms }) => {\n const f = x => x.toString().padStart(2, '0')\n return `${f(m)}:${f(s)},${f(ms)}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1837,"value":"md`### draw text`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"p3.drawText = context => (text, x = 0, y = 0, fontSize = '14px', color = '#2b83cc', fontFamily = 'Verdana') => {\n context.font = `${fontSize} ${fontFamily}`\n context.fillStyle = color\n context.fillText(text, x, y)\n context.textBaseline = 'top'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1436,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"md`We will also add a time scale slider, so we can slow down and speed up time`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"viewof p3Inputs = form(html`\n

time scale: (slow down or speed up time)

\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"p3Inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"{\n // canvas\n const height = 200\n const context = DOM.context2d(width, height)\n \n // inputs\n const { timeScale } = p3Inputs\n \n // utils\n const drawBg = p1.drawBg(context)\n const calculateTime = p3.calculateTime(timeScale)\n const drawText = p3.drawText(context)\n \n // vars\n let ticks = 0\n \n const textWidth = 320 // guess\n const textHeight = 30\n \n while (true) {\n // clear canvas and bg\n drawBg(width, height)\n \n // text\n const { m, s, ms } = calculateTime(ticks)\n drawText(p3.formatTime({ m, s, ms }), (width / 2) - (textWidth / 2), (height / 2) + (textHeight / 2), '50px')\n \n yield context.canvas\n await Promises.tick(1, ++ticks) // will tick about (not exactly for some reason) once a millisecond\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1910,"value":"md`\n# Part 4 :: Months and Revolutions relative to Time\n\nNext we will add utility functions to caclulate current month and current rotation angle of a planetary body relative to the time data we are calculating from time scale and ticks above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1851,"value":"p4 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"md`\n### calculateMonth\n\nThis function takes the duration of \"a year\" in seconds, and the current ticks, and returns the current month.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1868,"value":"test('calculate month test', async t => {\n // when\n // ... \"a year\" takes the provided number of seconds to complete\n // ... and we calculate the current month relative to the provided number of ticks\n // then\n // ... should return the expected current month\n const params = [\n [1, 1, 0],\n [1, 10, 1],\n [1, 50, 6],\n [1, 100, 0],\n [12, 100, 1],\n [12, 600, 6],\n [12, 1200, 0],\n ]\n t.plan(1 * params.length)\n params.forEach(([yearDuration, ticks, expected]) => {\n const result = p4.calculateMonth(yearDuration)(ticks)\n t.equal(result, expected)\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1870,"value":"p4.calculateMonth = yearDuration => ticks => parseInt(ticks / 100 * 12 / yearDuration) % 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"md`\n### calculateBodyAngle\n\nThis function takes the duration of \"a year\" in seconds, the number of revolutions around it's parent per year that the planetary body should make and the current ticks, and returns the current rotational angle for that planetary body relative to it's parent. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1943,"value":"test('calculate body angle test', async t => {\n // when\n // ... \"a year\" takes the provided number of seconds to complete\n // ... and our planetary body makes the provided number of revolutions per \"year\"\n // ... and we calculate the current rotation angle for the planetary body\n // then\n // ... should return the expected current angle\n const params = [\n [1, 1, 0, 0],\n [1, 1, 50, 180],\n [1, 1, 100, 0],\n [12, 1, 0, 0],\n [12, 1, 600, 180],\n [12, 1, 1200, 0],\n ]\n t.plan(1 * params.length)\n params.forEach(([yearDuration, revolutionsPerYear, ticks, expected]) => {\n const result = p4.calculateBodyAngle(yearDuration, revolutionsPerYear)(ticks)\n t.equal(result, expected)\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1939,"value":"p4.calculateBodyAngle = (yearDuration, revolutionsPerYear) => ticks => 360 * ((ticks / 100 * 12 / yearDuration) * (revolutionsPerYear / 12)) % 360","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"md`\n## UI\n\nFor our UI, we will add sliders to control:\n - how long a year takes (in seconds)\n - how many times a planetary body (earth) will revolve around it's parent (sun) per year\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"viewof p4Inputs1 = form(html`\n

time scale: (slow down or speed up time)

year duration (year takes n seconds?)\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

revolutions per year (earth circles the sun n times a year?)\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"p4Inputs2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1369,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`\n# Part 5 :: Better Sun\n\nLet's make the sun distinct from other bodies in the solar system by giving it a gradient.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1140,"value":"{\n // canvas\n const height = 260\n const context = DOM.context2d(width, height)\n \n // utils\n const drawBg = p1.drawBg(context)\n const drawSun = context => (x, y, radius) => {\n const gradient = context.createRadialGradient(x, y, 0, x, y, radius / 2)\n gradient.addColorStop(0, 'rgba(252,255,131,1)')\n gradient.addColorStop(0.7, 'rgba(252,200,131,0.7)')\n gradient.addColorStop(1, 'rgba(252,150,131,0)')\n context.fillStyle = gradient\n context.fillRect(x - radius / 2, y - radius / 2, radius, radius)\n }\n \n // clear canvas and bg\n drawBg(width, height)\n \n // usage\n const [x, y] = [width / 2, height / 2]\n const radius = 160\n drawSun(context)(x, y, radius)\n \n yield context.canvas\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"md`\n# Part 6 :: All planets with moons\n\nUsing what we have so far we add all planets and their moons,\nas well as some orbital paths.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"p6 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1266,"value":"p6.drawOrbitalPath = context => (x, y, radius, color) => {\n context.beginPath()\n context.arc(x, y, radius, 0, 2 * Math.PI)\n context.lineWidth = 1\n context.strokeStyle = color\n context.stroke()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"p6.drawBody = context => (x, y, radius, color) => {\n context.beginPath()\n context.arc(x, y, radius, 0, 2 * Math.PI)\n context.fillStyle = color\n context.fill()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"p6.drawSun = context => (x, y, radius) => {\n const gradient = context.createRadialGradient(x, y, 0, x, y, radius / 2)\n gradient.addColorStop(0, 'rgba(252,255,131,1)')\n gradient.addColorStop(0.7, 'rgba(252,200,131,0.7)')\n gradient.addColorStop(1, 'rgba(252,150,131,0)')\n context.fillStyle = gradient\n context.fillRect(x - radius / 2, y - radius / 2, radius, radius)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"p6.drawBodies = (context, yearDuration) => (cx, cy, bodies, ticks) => {\n bodies.forEach(({ radius, size, color, pathColor, revolutionsPerYear, children }) => {\n // orbialt path\n p6.drawOrbitalPath(context)(cx, cy, radius, pathColor)\n \n // body\n const angle = p4.calculateBodyAngle(yearDuration, revolutionsPerYear)(ticks)\n const x = cx + radius * Math.cos(angle * Math.PI / 180)\n const y = cy + radius * Math.sin(angle * Math.PI / 180)\n p6.drawBody(context)(x, y, size, color)\n p6.drawBodies(context, yearDuration)(x, y, children, ticks)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1280,"value":"defaultPathColor = '#333'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1093,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"viewof p6Inputs = form(html`\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

vertical offset \n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"p6Inputs","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"md`\n# Part 7 :: Separate Data Transformation from Side Effects and test\n\nInstead of both calculating the coordinates of a planetary body and drawing it on the canvas,\nwe will split this into 2 steps, this will allow:\n - us to more easily test each step\n - output time series data\n - input time series data (unlocking the potential to use an API to plot this solar system according to real data from our solar system)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1553,"value":"p7 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2831,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2834,"value":"{\n const { mergeDeepRight } = R\n\n return p7.drawBox = (context, x, y, w, h, padding = 0, styles = {}) => render => {\n const { strokeColor, fillColor, fillAlpha } = mergeDeepRight({ strokeColor: '#2b83cc', fillColor: '#2b83cc', fillAlpha: 0.1 }, styles)\n // draw bdr & bg\n context.strokeStyle = strokeColor\n context.strokeRect(x, y, w, h)\n context.globalAlpha = fillAlpha\n context.fillStyle = fillColor\n context.fillRect(x, y, w, h)\n context.globalAlpha = 1.0\n // render content\n render(x + padding, y + padding)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2841,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2852,"value":"test('flatten bodies test', async t => {\n // when ... we flatten the following nested planetary body data\n // then ... should return the expected structure\n const data = [\n { name: 'A', children: [] },\n { name: 'B', children: [\n { name: 'B1', children: [] },\n { name: 'B2', children: [\n { name: 'B2i', children: [] },\n ] },\n { name: 'B3', children: [] },\n ] },\n { name: 'C', children: [\n { name: 'C1', children: [] },\n ] },\n ]\n const expected = [\n { name: 'A' },\n { name: 'B' },\n { name: 'B1' },\n { name: 'B2' },\n { name: 'B2i' },\n { name: 'B3' },\n { name: 'C' },\n { name: 'C1' },\n ]\n t.plan(1)\n const result = p7.flattenBodies(data)\n t.deepEqual(result, expected)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2864,"value":"{\n const { chain, omit, prop, concat, compose, of, converge } = R\n \n return p7.flattenBodies = (bodies) => {\n return chain(converge(concat, [\n compose(of, omit(['children'])),\n compose(p7.flattenBodies, prop('children')),\n ]))(bodies)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2867,"value":"test('calculate body positions test', async t => {\n // when\n // ... \"a year\" takes the provided number of seconds to complete\n // ... and our planetary body makes the provided number of revolutions per \"year\"\n // ... and we calculate the current rotation angle for the planetary body\n // then\n // ... should return the expected current angle\n const params = [\n [1, 1, 0, 0],\n [1, 1, 50, 180],\n [1, 1, 100, 0],\n [12, 1, 0, 0],\n [12, 1, 600, 180],\n [12, 1, 1200, 0],\n ]\n t.plan(1 * params.length)\n params.forEach(([yearDuration, revolutionsPerYear, ticks, expected]) => {\n const result = p4.calculateBodyAngle(yearDuration, revolutionsPerYear)(ticks)\n t.equal(result, expected)\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2854,"value":"{\n const { reduce, pick, mergeRight, concat } = R\n\n return p7.calculateBodyPositions = (yearDuration) => (cx, cy, bodies, ticks) => {\n return reduce((acc, data) => {\n const { radius, size, color, pathColor, revolutionsPerYear, children } = data\n const angle = p4.calculateBodyAngle(yearDuration, revolutionsPerYear)(ticks)\n const x = cx + radius * Math.cos(angle * Math.PI / 180)\n const y = cy + radius * Math.sin(angle * Math.PI / 180)\n const _data = pick(['name', 'color', 'size', 'radius', 'pathColor'])(data)\n const __data = mergeRight(_data)({ x, y, cx, cy })\n const _acc = concat(acc, [__data])\n return concat(_acc)(p7.calculateBodyPositions(yearDuration)(x, y, children, ticks))\n })([])(bodies)\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2825,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2451,"value":"viewof p7Inputs = form(html`\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

log interval (log every n seconds)\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

log interval (log every n seconds)\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

log interval (log every n seconds)\n

detail change interval (cycle showing log for new planetary body every n seconds)\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2992,"value":"p8Inputs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2989,"value":"$52","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2986,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3244,"value":"md`# Part 9 :: Split into multiple cells`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3255,"value":"p9 = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3280,"value":"md`## Ticks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3290,"value":"ticks = {\n let ticks = 0\n while (true) {\n yield ticks\n await Promises.tick(1, ++ticks) // will tick once a millisecond\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3278,"value":"md`## Computed Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3266,"value":"computedBodyData = {\n const { zipWith, mergeRight, map, pick } = R\n\n const height = 960\n \n // inputs\n const { yearDuration } = p9Inputs\n\n // center\n const cx = width / 2\n const cy = height / 2\n\n // data\n const { bodies } = p8.data\n const bodyPositionData = p7.calculateBodyPositions(yearDuration)(cx, cy, bodies, ticks)\n const bodyData = p7.flattenBodies(bodies)\n return zipWith(mergeRight, bodyData, map(pick(['cx', 'cy', 'x', 'y']), bodyPositionData))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3319,"value":"{\n const { map, pick } = R\n \n return map(pick(['name', 'cx', 'cy', 'x', 'y']))(computedBodyData)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3384,"value":"computedTimeData = {\n // inputs\n const { timeScale, yearDuration, logInterval, detailChangeInterval } = p9Inputs\n \n // utils\n const calculateTime = p3.calculateTime(timeScale)\n const calculateMonth = p4.calculateMonth(yearDuration)\n \n // compute\n const { m, s, ms } = calculateTime(ticks)\n const time = p3.formatTime({ m, s, ms })\n const month = calculateMonth(ticks)\n \n return { time, month }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3428,"value":"getSelectedLogIndex = {\n let currentIndex = 0\n return (changeInterval, data, ticks) => {\n const shouldChangeDetail = ticks % (changeInterval * 100) === 0\n if (shouldChangeDetail) {\n if (++currentIndex >= data.length) {\n currentIndex = 0\n }\n }\n return currentIndex\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3452,"value":"selectedLogIndex = getSelectedLogIndex(p9Inputs.detailChangeInterval, computedBodyData, ticks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3462,"value":"selectedLogName = {\n const { compose, prop, nth } = R\n \n return compose(prop('name'), nth(selectedLogIndex))(computedBodyData)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3469,"value":"logger = {\n let log = []\n return (interval, data, ticks) => {\n const shouldLog = ticks % (interval * 100) === 0\n if (shouldLog) {\n log.push(data)\n }\n return log\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3475,"value":"log = {\n const { logInterval } = p9Inputs\n \n return logger(logInterval, computedBodyData, ticks) \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3494,"value":"selectedLog = {\n const { compose, reverse, map, find, propEq, takeLast } = R\n return compose(reverse, map(find(propEq('name', selectedLogName))), takeLast(10))(log)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3508,"value":"getMouseHoverCoords = {\n // vars : user interactions\n let coords = [0,0]\n return (context) => {\n d3.select(context.canvas).on('mousemove', () => {\n coords = d3.mouse(context.canvas)\n })\n return coords\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"md`## UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3268,"value":"viewof p9Inputs = form(html`\n

time scale: (slow down or speed up time)\n

year duration (year takes n seconds?)\n

log interval (log every n seconds)\n