2d:null 2e:["$","title",null,{"children":"So Many Orbits | Bartosz Prusinowski | Observable"}] 33:T53e,html`

${button({ desc: 'Min: 1.', value: '-1 star', buttonStyle: { background: '#FCE4D8', color: 'black' }, divStyle: {'text-align': 'center'}, initialize: false, onclick: objs => { if (stars.length > 1) { stars.splice(stars.length - 1); mutable currentStars = stars.length; d3.select(objs.button) .style('background', '#FF9EBA') .interrupt() .transition() .duration(300) .style('background', '#FCE4D8'); } } })} ${button({ desc: `Max: 30.`, value: '+1 star', buttonStyle: { background: '#FCE4D8', color: 'black' }, divStyle: {'margin-left': '20px', 'text-align': 'center'}, initialize: false, onclick: objs => { if (stars.length < 30) { const star = new Star( // ID stars.length, // X 100 + (w - 200) * Math.random(), // Y 100 + (h - 200) * Math.random(), // RADIUS 7.5, // ORBIT RADIUS orbitRadius, // FILL '#F00044' ); stars.push(star); mutable currentStars = stars.length; d3.select(objs.button) .style('background', '#FF9EBA') .interrupt() .transition() .duration(300) .style('background', '#FCE4D8'); } } })}

`34:T582,html`

${button({ desc: 'Min: 50.', value: '-50 planets', buttonStyle: { background: '#FCE4D8', color: 'black' }, divStyle: {'text-align': 'center'}, initialize: false, onclick: objs => { if (planets.length > 50) { planets.splice(planets.length - 50, planets.length - 1); mutable currentPlanets = planets.length; d3.select(objs.button) .style('background', '#FF9EBA') .interrupt() .transition() .duration(300) .style('background', '#FCE4D8'); } } })} ${button({ desc: `Max: 1000.`, value: '+50 planets', buttonStyle: { background: '#FCE4D8', color: 'black' }, divStyle: {'margin-left': '20px', 'text-align': 'center'}, initialize: false, onclick: objs => { if (planets.length < 1000) { for (let i = 0; i < 50; i++) { const planet = new Planet( // X 100 + (w - 200) * Math.random(), // Y 100 + (h - 200) * Math.random(), // RADIUS 3 + Math.random() * 3, // FILL '#FCE4D8' ); planets.push(planet); } mutable currentPlanets = planets.length; d3.select(objs.button) .style('background', '#FF9EBA') .interrupt() .transition() .duration(300) .style('background', '#FCE4D8'); } } })}

`35:T653,Planet = class { constructor(x, y, r, fill) { this.x = x; this.y = y; this.r = r; this.fill = fill; this.closest = { star: { name: null }, distance: null }; this.t = 0; this.startTime = 0; this.startAngle = 0; this.timeAdj = Math.random() < 0.5 ? -1 : 1; this.timeAdj += 0.5 * Math.random() * this.r / this.r; } findClosestStar() { let closest = { star: this.stars[0], distance: this.getDistance(this.stars[0]) }; for (const star of this.stars.slice(1)) { const distance = this.getDistance(star); if (distance < closest.distance) { closest.distance = distance; closest.star = star; } }; if (closest.star.name != this.closest.star.name) { this.startTime = this.t; this.closest = closest; this.startAngle = Math.atan2( this.y - this.closest.star.y, this.x - this.closest.star.x ) + this.timeAdj * 0.025; } this.updateCoords(); } getDistance(star) { return Math.sqrt((this.x - star.x) ** 2 + (this.y - star.y) ** 2); } updateCoords() { const closestStar = this.closest.star; const p = this.t - this.startTime + this.startAngle; this.x = closestStar.x + Math.cos(p) * closestStar.totalRadius; this.y = closestStar.y + Math.sin(p) * closestStar.totalRadius; } updateStars(stars) { this.stars = stars; } draw(ctx, t) { this.t = t * this.timeAdj; this.findClosestStar(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI); ctx.fillStyle = this.fill; ctx.fill(); ctx.closePath(); } }36:[] 31:{"id":"48d0fded9d63ce5a","slug":"so-many-orbits","title":"So Many Orbits","thumbnail":"46ff5ae7549a842a4c8066c4155d78ed99a5f1348929d9aad6f53626fd574978","access_level":"public","create_time":"$D2020-12-11T19:24:27.927Z","update_time":"$D2020-12-12T15:00:01.887Z","view_time":null,"first_public_time":"$D2020-12-12T15:02:04.062Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"44f043b020beee3d","login":"bartok32","name":"Bartosz Prusinowski","avatar_url":"https://avatars-next.observableusercontent.com/8be2bc3aaeb2864562e463ac4f47c9557b8fb285a7ac0c5584e6f83c8606be7a","tier":"starter_2024"},"version":855,"publish_version":855,"role":null,"authored":false,"authors":[{"type":"individual","id":"e223a61f267a7572","login":"bartok32","name":"Bartosz Prusinowski","avatar_url":"https://avatars-next.observableusercontent.com/8be2bc3aaeb2864562e463ac4f47c9557b8fb285a7ac0c5584e6f83c8606be7a","tier":null}],"members":[{"type":"individual","id":"e223a61f267a7572","login":"bartok32","name":"Bartosz Prusinowski","avatar_url":"https://avatars-next.observableusercontent.com/8be2bc3aaeb2864562e463ac4f47c9557b8fb285a7ac0c5584e6f83c8606be7a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"90ac5aeaf1db421e","slug":"fun-with-d3-js","title":"Fun with D3.js","owner":{"id":"44f043b020beee3d","login":"bartok32","name":"Bartosz Prusinowski"}},"type":"notebook","body":{"title":"So Many Orbits","cells":[{"id":0,"value":"md`# So Many Orbits\n🪐💫🌍`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`---\n## Introduction\n\nI've been thinking about this kind of a simulation ever since I saw a Google Chrome Experiment that allowed you to add *atoms* and *particles* that orbited them (I believe it was around 10 years ago).\n\nThis notebook isn't as advanced as the mentioned simulation – there are no actual forces involved, just simple trigonometry – but the result is looking quite similar.\n\nYou can adjust several parameters below; also, the red *stars* **can be dragged,** to experiment with different intersections of the orbits.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"md`---\n## Simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"viewof step = slider({\n min: 0,\n max: 0.015,\n step: 0.015 / 50,\n value: 0.0025,\n title: 'Orbiting speed',\n desc: 'Adjust the tempo of the simulation.',\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#F00044', '#FCE4D8']\n },\n oninput: objs => {\n if (objs.progress < 0.2) {\n objs.output.textContent = '🐌';\n } else if (objs.progress < 0.8) {\n objs.output.textContent = '🚶';\n } else {\n objs.output.textContent = '🚀';\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"viewof orbitRadius = slider({\n min: 20,\n max: 75,\n step: 1,\n value: 50,\n title: 'Orbit radius',\n desc: 'Adjust the \"repulsive force\".',\n theme: 'default-round',\n background: {\n type: 'double',\n colors: ['#F00044', '#FCE4D8']\n },\n oninput: objs => {\n objs.output.textContent = objs.value + 'px';\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"mutable currentStars = stars.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"mutable currentPlanets = planets.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"canvas = {\n const ctx = DOM.context2d(w, h);\n ctx.fillStyle = 'black';\n ctx.fillRect(0, 0, w, h);\n\n d3.select(ctx.canvas)\n .call(\n drag(stars)\n .on('start.render drag.render end.render', render)\n );\n\n while (true) {\n render(i, stars);\n mutable i += step;\n yield ctx.canvas;\n }\n\n function render(t, stars) {\n ctx.clearRect(0, 0, w, h);\n ctx.fillStyle = 'black';\n ctx.fillRect(0, 0, w, h);\n if (stars != undefined) {\n stars.forEach(d => d.draw(ctx));\n }\n planets.forEach(d => {\n if (stars != undefined) {\n d.updateStars(stars);\n d.draw(ctx, t);\n }\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`---\n## Appendix\n### Data, variables & functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"stars = Array.from({ length: 15 })\n .map((d, i) => {\n return new Star(\n // ID\n i,\n // X\n 100 + (w - 200) * Math.random(),\n // Y\n 100 + (h - 200) * Math.random(),\n // RADIUS\n 7.5,\n // ORBIT RADIUS\n 50,\n // FILL\n '#F00044'\n );\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"planets = Array.from({ length: 200 })\n .map(d => new Planet(\n // X\n 100 + (w - 200) * Math.random(),\n // Y\n 100 + (h - 200) * Math.random(),\n // RADIUS\n 3 + Math.random() * 3,\n // FILL\n '#FCE4D8'\n ));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"drag = stars => {\n\n function dragsubject(e) {\n let subject = null;\n let distance = 15;\n for (const s of stars) {\n let d = Math.hypot(e.x - s.x, e.y - s.y);\n if (d < distance) {\n distance = d;\n subject = s;\n }\n }\n return subject;\n }\n\n function dragstarted(e) {\n stars.splice(stars.indexOf(e.subject), 1);\n stars.push(e.subject);\n e.subject.active = true;\n }\n\n function dragged(e) {\n e.subject.x = Math.max(0, Math.min(w, e.x));\n e.subject.y = Math.max(0, Math.min(h, e.y));\n }\n\n function dragended(e) {\n e.subject.active = false;\n }\n\n return d3.drag()\n .subject(dragsubject)\n .on('start', dragstarted)\n .on('drag', dragged)\n .on('end', dragended);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"w = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"h = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"mutable i = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"{\n stars.forEach(d => d.updateOrbitRadius(orbitRadius));\n return \"Updating stars' orbits.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"md`---\n### Classes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Star = class {\n constructor(name, x, y, selfRadius, orbitRadius, fill) {\n this.name = name;\n this.x = x;\n this.y = y;\n this.selfRadius = selfRadius;\n this.orbitRadius = orbitRadius;\n this.totalRadius = selfRadius + orbitRadius;\n this.fill = fill;\n }\n updateOrbitRadius(value) {\n this.orbitRadius = value;\n this.totalRadius = this.selfRadius + this.orbitRadius;\n }\n draw(ctx) {\n // Star.\n ctx.beginPath();\n ctx.fillStyle = this.fill;\n ctx.shadowBlur = 57.5;\n ctx.shadowColor = '#F00044';\n ctx.arc(this.x, this.y, this.selfRadius, 0, 2 * Math.PI);\n ctx.fill();\n ctx.shadowBlur = 0;\n ctx.closePath();\n // Orbit.\n ctx.beginPath();\n ctx.setLineDash([5, 2.5]);\n ctx.arc(this.x, this.y, this.totalRadius, 0, 2 * Math.PI);\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';\n ctx.stroke();\n ctx.closePath();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"import { slider, button } from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`---\n### Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"