31:T818,This is a continuation of that notebook about the geo-heliocentric system proposed by Tycho Brahe, known as the Tychonic system.

Tychonic system vs. Heliocentric system

The Tychonic system is a model of the Universe that was proposed by Tycho Brahe in the late 16^th century. In his model, the Earth (🜨) is at the centre of the universe, the Moon (☾), the Sun (⊙) and the stars revolve around the Earth, while the other planets (Mercury ☿, Venus ♀, Mars ♂, Jupiter ♃, and Saturn ♄) revolve around the Sun.

The loops of Mars

With the geo-heliocentric configuration, if you follow the path of Mars, you can easily recognise a pattern similar to that drawn by Johannes Kepler in Astronomia Nova (refer to the illustration below). These "loops of Mars" are showcased in the following visualization. Note that the sizes of the orbits and speeds of the planets are not to scale.

The apparent retrograde motion of Mars sporadically forms loop-like patterns in the night sky when its positions against the backdrop of stars are compared over several consecutive nights.

These loops, which are more obvious with Mars than with the other planets of our solar system, puzzled Tycho Brahe for many years. Eventually, it was Johannes Kepler who was able to elucidate their origin thanks to the heliocentric system.

32:T1bad,chart = { mutable coordinates = {}; mutable path_Mars = []; const height = Math.ceil(width * screen.height / screen.width); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("id", "SVGchart"); // Dark background svg.append("rect") .attr("width", "100%") .attr("height", "100%") .attr("fill", height<0.8*screen.height? "#0E0F36":"#16182E"); // Place path under planets and Sun svg.append("g") .attr("id", "path_planet"); // Planet group const container = svg.append("g") .attr("id", "orbit_container") .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); // Draw planets and moons container.selectAll("g.planet").data(tychnonic_model).enter().append("g") .attr("class", "planet_cluster") .each(function(d, i) { d3.select(this).append("circle") .attr("class", "orbit_sun") .attr("r", d.R); d3.select(this).append("circle") .attr("r", d.r) .attr("cx",d.R) .attr("cy",0) .attr("id", d.name) .attr("class", "planet") // Transformation applied to Earth and Sun symbols d3.select(this).append("g") .attr("transform", function(d) { return "translate(" + d.R + ",0)"; }) .call(g => g.append("text") .attr("fill", "#C0C0C0") .attr("dx", "0.8em") .attr("dy", "0.25em") .attr("font-size", 20) .attr("font-face", "Open Sans") .text(d.symbol)); d3.select(this).append("g") .attr("transform", "translate(" + d.R + ",0)") .selectAll("g.moon").data(d.moons).enter().append("g") .attr("class", "moon_cluster") .each(function(d, i) { d3.select(this).append("circle") .attr("class", "orbit_moon") .attr("r", d.R) d3.select(this).append("circle") .attr("r", d.r) .attr("cx",d.R) .attr("cy", 0) .attr("id", d.name) .attr("class", "moon") d3.select(this).append("g") .attr("transform", function(d) { if(d.symbol=="☾") // Keep the symbol fixed for the Moon return "translate(0,0)"; else return "translate(" + d.R + ",0)"; }) .call(g => g.append("text") .attr("class", "planet_symbol") .attr("fill", "#C0C0C0") .attr("dx", "0.5em") .attr("dy", "0.5em") .attr("font-size", 18) .attr("font-face", "Open Sans") .text(d.symbol)) }) }) svg.selectAll(".planet_symbol") .attr("transform", function(d) { if(d.symbol=="☾") return "translate(10,0)"; else return "translate(0,0)"; }); // Animation // The requestAnimationFrame() method is used as an alternative to the setInterval() method.* // In this way, we can force the script to pause when the user changes to another tab or reduces the browser window // *) setInterval(function(){...}, 0); function iteration(){ var delta = (Date.now() - new Date().setHours(0,0,0,0)); // Redraw the planets svg.selectAll(".planet_cluster, .moon_cluster") .attr("transform", function(d) { return "rotate(" + (d.phi0 + delta * d.speed * speed_factor/1000) + ")"; }); // We do not rotate symbols svg.selectAll("text") .attr("transform", function(d) { if(d.symbol == "🜨") return "translate(-22,-20)"; // Earth symbol translated above the planet else if(d.symbol == "⊙") return "rotate(" + -(d.phi0 + delta * d.speed * speed_factor/1000) + ") translate(-3,1)"; else if(d.symbol == "☾") return "rotate(" + -(d.phi0 + delta * d.speed * speed_factor/1000) + ") translate(2,6)"; else return "rotate(" + (angle_90 - d.phi0 + delta * (Earth_speed - d.speed) * (speed_factor/1000) ) + ") translate(0,-2)"; }); // Draw the path of Mars svg.selectAll(".Mars_path").remove() svg.select("#Mars").nodes().forEach(function(node) { mutable coordinates = getElementCoords(node); // The following if() condition was added for initialisation purposes... // In principle, the coordinates could directly be 'pushed' in path_Mars. if((mutable coordinates.x != node.getAttribute('cx')) && (mutable coordinates.y != node.getAttribute('cy'))){ mutable path_Mars.push([mutable coordinates.x, mutable coordinates.y]) } }); for(var j = Math.min(mutable path_Mars.length, mutable path_length)-1; j > 1; j--){ // Check distance between consecutive points const dist_sqr = Math.pow(mutable path_Mars[j-1][0]-mutable path_Mars[j][0], 2) + Math.pow(mutable path_Mars[j-1][1]-mutable path_Mars[j][1], 2) const min_dist_sqr = Math.pow(50,2) // Minimum distance needed in order to draw a line const line = svg.select('#path_planet').append('path') .attr('d', d3.line()([mutable path_Mars[j-1],mutable path_Mars[j]])) .attr('stroke', color_path_Mars) .attr('fill', 'none') .attr('stroke-width', dist_sqr < min_dist_sqr ? path_stroke_width : 0) // Hide line when distance between points is to large. // (Useful after a pause of the script) .attr('class', 'Mars_path') .attr("stroke-opacity", opacity_path*(j/mutable path_Mars.length)) } if(mutable path_Mars.length > path_length) { mutable path_Mars.shift() } mutable path_Mars = mutable path_Mars mutable coordinates = mutable coordinates requestAnimationFrame(iteration); } requestAnimationFrame(iteration); // See also: // https://stackoverflow.com/questions/18554224/getting-screen-positions-of-d3-nodes-after-transform/18561829#answer-18561829 function getElementCoords(element) { let coords = { name : element.getAttribute('id'), x: +element.getAttribute('cx'), y: +element.getAttribute('cy') }; let ctm = element.getCTM(); return { name: coords.name, x: ctm.e + coords.x * ctm.a + coords.y * ctm.c, y: ctm.f + coords.x * ctm.b + coords.y * ctm.d }; }; return svg.node(); } 33:T590,tychnonic_model = [ { name: "Earth", symbol: "🜨", R: 0, r: 4, speed: 0, phi0: 0, // Earth, center of the geo-heliocentric system moons: [ { name: "Moon", symbol: "☾", R: 10*factor_size, r: 2, speed: -25, phi0: 40+angle_90 }, // the Moon { name: "Sun_path"}, // Sun ]}, { name: "Sun", symbol: "⊙", R: 100*factor_size, r: 8, speed: -Earth_speed, phi0: -angle_90, // Earth-Sun orbit moons: [ { name: "Mercury", symbol: "☿", R: 40*factor_size, r: 1.5, speed: -8+Earth_speed, phi0: -120+angle_90}, // Mercury { name: "Venus", symbol: "♀", R: 70*factor_size, r: 1.5, speed: -3+Earth_speed, phi0: -50+angle_90}, // Venus { name: "Earth_path", R: 100*factor_size}, // Earth (orbit) { name: "Mars", symbol: "♂", R: 150*factor_size, r: 3, speed: -1.13+Earth_speed, phi0: 20+angle_90}, // Mars { name: "Jupiter", symbol: "♃", R: 280*factor_size, r: 1.5, speed: -0.5+Earth_speed, phi0: 60+angle_90}, // Jupiter { name: "Saturn", symbol: "♄", R: 380*factor_size, r: 1.5, speed: -0.2+Earth_speed, phi0: 160+angle_90}, // Saturn ]} ];34:[{"id":"e58aa1a2b8be727bf5ee5e7159540b854916a362906561895f912117febe1923b8225f79652829591a91cdeff5e39e4414081ff9d72fe83ed663ef4485137044","href":"https://static.observableusercontent.com/files/e58aa1a2b8be727bf5ee5e7159540b854916a362906561895f912117febe1923b8225f79652829591a91cdeff5e39e4414081ff9d72fe83ed663ef4485137044","name":"De_Motib.Stellae_Martis.jpg","type":"image/jpeg","lastModified":1714140069950.5,"size":432306}] 2f:{"title":"The loops of Mars and the Tychonic system","cells":[{"id":0,"value":"md`# The loops of Mars and the Tychonic system\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":2974,"value":"viewof speed_factor = slider({\n title: \"Animation speed\",\n description: \"Slide to change the speed\",\n min: 0,\n max: 50,\n step: 5,\n value: 30,\n format: v => html`${v == 0? 'Stopped' : (v < 20? 'Slow ' : (v < 60? 'Medium' : 'Fast' ) )} (${v}%)
`,\n});\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":2815,"value":"viewof Mars_path = columns({\n length: Inputs.range([0, 1000], {value: 800, step: 100, label: \"Path length, ♂\"}),\n replay: Inputs.button(\"Reset path\") \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2660,"value":"

\n Symbols:\n
Sun ⊙, Earth 🜨, Moon ☾, \n
Mercury ☿, Venus ♀, \n
Mars ♂, Jupiter ♃, Saturne ♄\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2671,"value":"{\n // Full screen mode not successfully tested with Firefox v. 125 (April 2024)\n let firefoxAgent = navigator.userAgent.indexOf(\"Firefox\") > -1; \n if(!firefoxAgent) {\n // See also: https://observablehq.com/@mbostock/fullscreen-canvas\n return htl.html``\n }\n else\n return htl.html`
`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"Stellae_Martis = html`
\n

De Motibus Stellæ Martis\n
[ Source: Astronomia Nova, Johannes Kepler (1609).

\nFor further details, check this notebook dedicated to Johannes Kepler's illustration \"De Motibus Stellae Martis.\"\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"
\nFinally, if you enjoyed this notebook, you may also like this short video that explains the apparent retrograde motion of Mars:","pinned":false,"hidden":false,"mode":"html"},{"id":1669,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":916,"value":"---\n## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2977,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"// https://observablehq.com/@bcardiff/observable-columns\ncolumns = (args) => {\n const form = html``\n form.value = {}\n\n let cols = 0\n for (const key in args) {\n form.appendChild(args[key])\n cols++\n }\n \n form.style = `width:200px; display: grid; grid-gap: 10px 100px; grid-template-columns: repeat(${cols}, auto); grid-auto-flow: row;`\n \n form.oninput = () => {\n form.value = Object.keys(args).reduce((result, key) => {\n result[key] = args[key].value\n return result\n }, Array.isArray(args) ? [] : {})\n }\n form.oninput()\n \n return form\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1800,"value":"opacity_path = 0.8","pinned":false,"hidden":false,"mode":"ojs"},{"id":1798,"value":"color_path_Mars = \"#C5482B\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1867,"value":"path_stroke_width = 3.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":2580,"value":"mutable path_length = Mars_path.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":1754,"value":"mutable coordinates = {\n Mars_path;\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"mutable path_Mars = {\n Mars_path; \n return [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"Earth_speed = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"factor_size = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1219,"value":"angle_90 = 90","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}