Skip to content

Instantly share code, notes, and snippets.

@sdhalpern86

sdhalpern86/index.html

Created April 2, 2026 02:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sdhalpern86/6beddaeafa49700c244d94010316872c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sdhalpern86/6beddaeafa49700c244d94010316872c to your computer and use it in GitHub Desktop.
Download ZIP
Apollo/Saturn v Orion/Artemis Missions: Computational & Capabilities Comparison
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Review: Spaceflight Computing</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true, theme: 'default' });
</script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #f9fafb; color: #111827; }
.tab-active { border-bottom: 2px solid #111827; font-weight: 600; color: #111827; }
.tab-inactive { color: #6b7280; font-weight: 500; }
.tab-inactive:hover { color: #374151; }
.tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* Chat Scrollbar */
.chat-scroll::-webkit-scrollbar { width: 6px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }
</style>
</head>
<body class="min-h-screen flex justify-center py-10 px-4 md:px-8">
<div class="max-w-6xl w-full bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden flex flex-col">
<div class="bg-gray-900 text-gray-400 text-xs py-2 px-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
<span class="font-medium text-gray-200">System Architecture SPA</span>
</div>
<div class="flex items-center gap-4">
<span>Code</span>
<span class="bg-gray-700 text-white px-3 py-1 rounded text-xs font-semibold cursor-pointer">Preview</span>
<span class="text-blue-400 cursor-pointer flex items-center gap-1">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6.632l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path></svg> Share
</span>
</div>
</div>
<div class="p-8 pb-4">
<div class="flex justify-between items-start mb-6">
<div>
<h1 class="text-3xl font-bold text-gray-900 tracking-tight">Technical Review: Spaceflight Computing</h1>
<p class="text-gray-500 mt-1">Evidence-based architectural analysis of Apollo (Saturn V) vs. Artemis (SLS + Orion)</p>
</div>
<button class="bg-gray-800 hover:bg-gray-900 text-white text-sm font-medium py-2 px-4 rounded-md transition-colors">
Executive Summary
</button>
</div>
<ul class="flex gap-6 border-b border-gray-200 text-sm">
<li class="pb-3 cursor-pointer tab-active" onclick="switchTab('tab-comparison', this)">Architecture Comparison</li>
<li class="pb-3 cursor-pointer tab-inactive" onclick="switchTab('tab-diagrams', this)">Guidance Stacks</li>
<li class="pb-3 cursor-pointer tab-inactive text-yellow-600 hover:text-yellow-700" onclick="switchTab('tab-ai', this)">Ask AI ✨</li>
</ul>
</div>
<div class="p-8 pt-4 bg-white flex-grow">
<div id="tab-comparison" class="tab-content active">
<h2 class="text-xl font-bold text-gray-900 mb-2">Computational & Architectural Paradigms</h2>
<p class="text-gray-600 text-sm mb-8 leading-relaxed max-w-4xl">
This section details the distinct computational paradigms utilized during the Apollo and Artemis eras. While Artemis possesses immensely more raw computational speed, the more critical engineering difference lies in the shift from centralized, highly specialized hardware to distributed, redundant, and networked avionics.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="bg-white border border-gray-100 shadow-[0_2px_10px_rgba(0,0,0,0.04)] rounded-xl p-6">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-slate-500"></div>
<h3 class="text-lg font-bold text-gray-900">Apollo / Saturn V Era</h3>
</div>
<p class="text-sm text-gray-500 mb-6">Centralized architecture relying on ultra-lean, specialized machines with strict memory budgets.</p>
<div class="pl-4 border-l-[3px] border-slate-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">1. Main Onboard Computers</h4>
<p class="text-sm text-gray-600 mt-1">Utilized the Apollo Guidance Computer (AGC) in the command/lunar modules, and the Launch Vehicle Digital Computer (LVDC) for Saturn V ascent.</p>
</div>
<div class="pl-4 border-l-[3px] border-slate-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">2. Processing Capabilities</h4>
<p class="text-sm text-gray-600 mt-1">The AGC executed approximately 85,000 instructions per second. The LVDC operated at about 12,190 instructions per second.</p>
</div>
<div class="pl-4 border-l-[3px] border-slate-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">3. Memory Architecture</h4>
<p class="text-sm text-gray-600 mt-1">AGC relied on roughly 69 KB of fixed core rope memory (physically woven wire) and roughly 4 KB of erasable RAM. Software was hyper-optimized (~145,000 lines of code).</p>
</div>
<div class="pl-4 border-l-[3px] border-slate-400">
<h4 class="font-semibold text-gray-800 text-sm">4. Redundancy Philosophy</h4>
<p class="text-sm text-gray-600 mt-1">Highly limited. Depended on strict mathematical optimization, component reliability, and manual astronaut intervention or limited backup systems in case of primary failure.</p>
</div>
</div>
<div class="bg-white border border-gray-100 shadow-[0_2px_10px_rgba(0,0,0,0.04)] rounded-xl p-6">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-orange-500"></div>
<h3 class="text-lg font-bold text-gray-900">Artemis (SLS + Orion)</h3>
</div>
<p class="text-sm text-gray-500 mb-6">Distributed, fault-tolerant avionics featuring complex sensor fusion and digital integration.</p>
<div class="pl-4 border-l-[3px] border-orange-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">1. Distributed Avionics</h4>
<p class="text-sm text-gray-600 mt-1">SLS utilizes 3 redundant flight computers on Block 1. The Orion capsule is controlled by 4 redundant flight computers, processing identical data simultaneously.</p>
</div>
<div class="pl-4 border-l-[3px] border-orange-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">2. Processing Capabilities</h4>
<p class="text-sm text-gray-600 mt-1">Powered by modern rad-hardened processors (like the RAD750), operating at >400 Million instructions per second. Tens of thousands of times faster than Apollo.</p>
</div>
<div class="pl-4 border-l-[3px] border-orange-400 mb-6">
<h4 class="font-semibold text-gray-800 text-sm">3. Memory Architecture</h4>
<p class="text-sm text-gray-600 mt-1">Utilizes 1 GB+ of EDAC-protected (Error Detection and Correction) SDRAM per computer. Supports millions of lines of complex autonomous flight code.</p>
</div>
<div class="pl-4 border-l-[3px] border-orange-400">
<h4 class="font-semibold text-gray-800 text-sm">4. Redundancy & Networking</h4>
<p class="text-sm text-gray-600 mt-1">Built on a Time-Triggered Ethernet network. Computers continuously "vote" on outputs; if a radiation strike corrupts one system, the others outvote and isolate it instantly.</p>
</div>
</div>
</div>
</div>
<div id="tab-diagrams" class="tab-content">
<h2 class="text-xl font-bold text-gray-900 mb-2">Architectural Topologies</h2>
<p class="text-gray-600 text-sm mb-8 leading-relaxed max-w-4xl">
Visual representation of the guidance command flow. Note the transition from a linear, single-point-of-failure stack in Apollo to a networked, consensus-based stack in Artemis.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-slate-50 rounded-xl p-6 border border-slate-200 flex flex-col items-center">
<h3 class="text-md font-bold text-slate-800 mb-6">Apollo Guidance Stack (Centralized)</h3>
<div class="w-full overflow-x-auto flex justify-center">
<pre class="mermaid">
flowchart TD
Sensors[Analog Sensors/Radar] --> AGC[Central Apollo Guidance Computer]
Astronauts[Astronaut Manual Input] --> AGC
AGC --> Actuators[Thrusters & Engine Valves]
style AGC fill:#cbd5e1,stroke:#475569,stroke-width:2px
style Sensors fill:#f1f5f9,stroke:#94a3b8
style Astronauts fill:#f1f5f9,stroke:#94a3b8
style Actuators fill:#f1f5f9,stroke:#94a3b8
</pre>
</div>
</div>
<div class="bg-orange-50 rounded-xl p-6 border border-orange-100 flex flex-col items-center">
<h3 class="text-md font-bold text-orange-900 mb-6">Artemis Guidance Stack (Distributed)</h3>
<div class="w-full overflow-x-auto flex justify-center">
<pre class="mermaid">
flowchart TD
Sensors[Digital Sensor Suites] --> Network((Time-Triggered Ethernet))
Network <--> FC1[Flight Computer 1]
Network <--> FC2[Flight Computer 2]
Network <--> FC3[Flight Computer 3]
Network <--> FC4[Flight Computer 4]
FC1 & FC2 & FC3 & FC4 --> Logic{Consensus Voting}
Logic --> Actuators[Engine Controllers]
style Network fill:#fed7aa,stroke:#c2410c,stroke-width:2px
style Logic fill:#ffedd5,stroke:#c2410c,stroke-width:2px
style FC1 fill:#fff7ed,stroke:#fdba74
style FC2 fill:#fff7ed,stroke:#fdba74
style FC3 fill:#fff7ed,stroke:#fdba74
style FC4 fill:#fff7ed,stroke:#fdba74
</pre>
</div>
</div>
</div>
</div>
<div id="tab-ai" class="tab-content h-full">
<div class="flex flex-col h-[500px] border border-gray-200 rounded-xl overflow-hidden shadow-sm">
<div class="bg-gray-50 border-b border-gray-200 p-4 flex items-center gap-3">
<div class="bg-yellow-100 p-2 rounded-full text-yellow-600">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<div>
<h3 class="text-sm font-bold text-gray-900">Gemini AI Assistant</h3>
<p class="text-xs text-gray-500">Ask questions regarding spaceflight architecture</p>
</div>
</div>
<div id="chat-window" class="flex-grow bg-white p-6 overflow-y-auto chat-scroll flex flex-col gap-4">
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 text-blue-600 font-bold text-xs">AI</div>
<div class="bg-gray-100 text-gray-800 p-3 rounded-2xl rounded-tl-none text-sm max-w-[85%] border border-gray-200">
Hello! Gemini AI here. I've loaded our previous context and your device profile. I'm ready to answer any questions you have about the differences in computational power, redundancy, or architecture between Apollo and Artemis.
</div>
</div>
</div>
<div class="p-4 bg-gray-50 border-t border-gray-200 flex gap-3">
<input type="text" id="user-input" class="flex-grow bg-white border border-gray-300 text-gray-900 text-sm p-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow" placeholder="Ask about redundancy, memory, or processing power...">
<button id="send-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-5 py-2 rounded-lg transition-colors flex items-center gap-2">
Send <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// Tab Switching Logic
function switchTab(tabId, element) {
// Hide all contents
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
// Reset all tabs
document.querySelectorAll('ul li').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
// Show target content
document.getElementById(tabId).classList.add('active');
// Highlight active tab
element.classList.remove('tab-inactive');
element.classList.add('tab-active');
}
// Gemini AI Chat Mock Logic
const chatWindow = document.getElementById('chat-window');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');
function addMessage(text, sender) {
const msgDiv = document.createElement('div');
msgDiv.className = `flex gap-3 ${sender === 'user' ? 'flex-row-reverse' : ''}`;
const avatar = document.createElement('div');
avatar.className = `w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 font-bold text-xs ${sender === 'user' ? 'bg-gray-800 text-white' : 'bg-blue-100 text-blue-600'}`;
avatar.textContent = sender === 'user' ? 'U' : 'AI';
const bubble = document.createElement('div');
bubble.className = `p-3 rounded-2xl text-sm max-w-[85%] border ${sender === 'user' ? 'bg-blue-600 text-white rounded-tr-none border-blue-700' : 'bg-gray-100 text-gray-800 rounded-tl-none border-gray-200'}`;
bubble.textContent = text;
msgDiv.appendChild(avatar);
msgDiv.appendChild(bubble);
chatWindow.appendChild(msgDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
function getSimulatedResponse(query) {
const q = query.toLowerCase();
if (q.includes('redundant') || q.includes('voting')) {
return "The voting system works via a Time-Triggered Ethernet. If three computers calculate a trajectory and one computer outputs a different number (perhaps due to a cosmic ray hitting the RAM), the system instantly ignores the outlier. Apollo didn't have the compute or networking overhead to do this automatically.";
} else if (q.includes('ram') || q.includes('rope memory') || q.includes('memory')) {
return "Apollo's core rope memory was incredibly robust but took months to manufacture by physically weaving wires. Artemis uses standard flash and SDRAM, but wraps it in EDAC (Error Detection and Correction) layers, allowing for Gigabytes of memory while maintaining radiation tolerance.";
} else if (q.includes('fast') || q.includes('mips') || q.includes('speed')) {
return "While the RAD750 at ~400 MIPS might seem slow compared to your modern smartphone, it is roughly tens of thousands of times faster than the Apollo Guidance Computer's 85k instructions per second. This speed is used to run massive software stacks for autonomous fault management.";
} else {
return "That's an excellent question. The most critical takeaway is that Artemis leverages its increased processing power not just to calculate math faster, but to run millions of lines of software that manage network consensus, sensor fusion, and automated backups—tasks Apollo left entirely to the astronauts.";
}
}
function handleSend() {
const text = userInput.value.trim();
if (!text) return;
addMessage(text, 'user');
userInput.value = '';
// Simulating API latency
const typingIndicatorId = 'typing-' + Date.now();
const typingDiv = document.createElement('div');
typingDiv.id = typingIndicatorId;
typingDiv.className = 'flex gap-3';
typingDiv.innerHTML = `
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 text-blue-600 font-bold text-xs">AI</div>
<div class="bg-gray-100 text-gray-500 p-3 rounded-2xl rounded-tl-none text-sm max-w-[85%] border border-gray-200 flex items-center gap-1">
<span class="animate-pulse">●</span><span class="animate-pulse" style="animation-delay: 0.2s">●</span><span class="animate-pulse" style="animation-delay: 0.4s">●</span>
</div>`;
chatWindow.appendChild(typingDiv);
chatWindow.scrollTop = chatWindow.scrollHeight;
setTimeout(() => {
document.getElementById(typingIndicatorId).remove();
addMessage(getSimulatedResponse(text), 'bot');
}, 800);
}
sendBtn.addEventListener('click', handleSend);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') handleSend();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment