VillaSpace Runtime Expansion Matrix
Scientific visualization runtime for magnetosphere topology, plasma transport,
magnetic reconnection, solar-wind compression, particle acceleration, equation
registry systems, telemetry logic, and future WebGL / GPU expansion layers.
Magnetosphere Simulation Canvas
A-A through Z-Z Runtime Matrix
Magnetosphere, Plasma, Reconnection, Electrodynamic, and Electrogravitic Equations
Magnetosphere, Plasma, and Magnetic Reconnection Simulator
A cinematic scientific visualization page modeling solar wind compression,
magnetosphere deformation, current-sheet formation, magnetic reconnection,
plasma acceleration, particle injection, auroral transport, and radiation-belt dynamics.
Magnetosphere Compression
Current Sheet
Reconnection
Particle Injection
Auroral Transport
Magnetosphere Field Solver
Magnetic Reconnection Equation Set
Magnetosphere Transfer Sequence
(function(){
const canvas = document.getElementById("vtTetherCanvas");
const ctx = canvas.getContext("2d");
function resize(){
canvas.width = canvas.offsetWidth;
canvas.height = 820;
}
resize();
window.addEventListener( "resize", resize );
const earth = { x:canvas.width * 0.78, y:canvas.height * 0.5, r:150 };
function drawFieldLines(){
ctx.strokeStyle = "rgba(60,180,255,.55)";
ctx.lineWidth = 2;
for(let i=0;i<14;i++){ const offset = i * 26; ctx.beginPath(); ctx.moveTo(80,120 + offset); ctx.bezierCurveTo( canvas.width * 0.35, 80 + offset, canvas.width * 0.58, 140 + offset, earth.x - 40, earth.y - 220 + offset * 0.4 ); ctx.stroke(); } } function drawEarth(){ const grad = ctx.createRadialGradient( earth.x - 40, earth.y - 40, 20, earth.x, earth.y, earth.r ); grad.addColorStop(0,"#7ec8ff"); grad.addColorStop(1,"#0b2a4d"); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc( earth.x, earth.y, earth.r, 0, Math.PI * 2 ); ctx.fill(); } function drawTether(y,boost){ const startX = canvas.width * 0.32; const endX = canvas.width * 0.58; ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(startX,y); ctx.lineTo(endX,y); ctx.stroke(); ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(startX,y,18,0,Math.PI*2); ctx.fill(); ctx.beginPath(); ctx.arc(endX,y,18,0,Math.PI*2); ctx.fill(); ctx.strokeStyle = "#ffffff"; ctx.setLineDash([8,8]); ctx.beginPath(); ctx.moveTo(endX + 20,y); ctx.quadraticCurveTo( endX + 100, y - 60, endX + 150, y ); ctx.stroke(); ctx.setLineDash([]); ctx.fillStyle = "#ffffff"; ctx.font = "34px Arial"; ctx.fillText( boost ? "Boost" : "De-boost", canvas.width * 0.43, y - 55 ); ctx.font = "22px Arial"; ctx.fillText( "v orbit", endX + 70, y + 18 ); } function drawLabels(){ ctx.fillStyle = "#ffffff"; ctx.font = "28px Arial"; ctx.fillText( "B-Field lines", canvas.width * 0.42, 60 ); ctx.fillText( "Earth", earth.x - 10, earth.y + 15 ); ctx.fillText( "Magnetic South", earth.x - 50, 120 ); ctx.fillText( "Magnetic North", earth.x - 50, canvas.height - 120 ); } function render(){ ctx.clearRect( 0, 0, canvas.width, canvas.height ); drawFieldLines(); drawEarth(); drawTether(290,true); drawTether(520,false); drawLabels(); } render(); })();
(function(){
const canvas = document.getElementById( "vtElectroCanvas" );
const ctx = canvas.getContext("2d");
function resize(){
canvas.width = canvas.offsetWidth;
canvas.height = 920;
}
resize();
window.addEventListener( "resize", resize );
const centerX = canvas.width * 0.46;
const centerY = canvas.height * 0.48;
function drawBackgroundParticles(){
for(let i=0;i<700;i++){ const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const r = Math.random() * 1.7; ctx.fillStyle = "rgba(0,255,220,.18)"; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fill(); } } function drawCylinder(){ ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 5; ctx.beginPath(); ctx.ellipse( centerX, centerY, 170, 60, 0, 0, Math.PI * 2 ); ctx.stroke(); ctx.beginPath(); ctx.moveTo(centerX - 170,centerY); ctx.lineTo(centerX - 170,centerY - 180); ctx.lineTo(centerX + 170,centerY - 180); ctx.lineTo(centerX + 170,centerY); ctx.stroke(); ctx.beginPath(); ctx.ellipse( centerX, centerY - 180, 170, 60, 0, 0, Math.PI * 2 ); ctx.stroke(); } function drawElectrodes(){ ctx.fillStyle = "#7fd8ff"; ctx.beginPath(); ctx.arc( centerX, centerY - 180, 48, 0, Math.PI * 2 ); ctx.fill(); ctx.fillStyle = "#ff7fb3"; ctx.beginPath(); ctx.arc( centerX, centerY, 34, 0, Math.PI * 2 ); ctx.fill(); } function drawFieldLines(){ ctx.strokeStyle = "rgba(0,180,255,.55)"; ctx.lineWidth = 2; for(let i=-9;i<=9;i++){ ctx.beginPath(); ctx.moveTo( centerX + i * 22, centerY - 160 ); ctx.bezierCurveTo( centerX + i * 44, centerY - 90, centerX + i * 18, centerY - 30, centerX + i * 8, centerY + 8 ); ctx.stroke(); } } function drawThrustVector(){ ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo( centerX + 250, centerY - 90 ); ctx.lineTo( centerX + 430, centerY - 90 ); ctx.stroke(); ctx.beginPath(); ctx.moveTo( centerX + 430, centerY - 90 ); ctx.lineTo( centerX + 390, centerY - 120 ); ctx.lineTo( centerX + 390, centerY - 60 ); ctx.closePath(); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.font = "42px Arial"; ctx.fillText( "THRUST", centerX + 250, centerY - 130 ); } function drawLabels(){ ctx.fillStyle = "#ffffff"; ctx.font = "28px Arial"; ctx.fillText( "High Voltage Region", centerX - 160, centerY - 260 ); ctx.fillText( "Asymmetric Capacitor", centerX - 180, centerY + 120 ); ctx.fillText( "Electric Field Gradient", centerX + 170, centerY + 80 ); } function render(){ ctx.clearRect( 0, 0, canvas.width, canvas.height ); drawBackgroundParticles(); drawCylinder(); drawElectrodes(); drawFieldLines(); drawThrustVector(); drawLabels(); } render(); })();
(function(){
const canvas = document.getElementById( "vtMagCanvas" );
const ctx = canvas.getContext("2d");
function resize(){
canvas.width = canvas.offsetWidth;
canvas.height = 960;
}
resize();
window.addEventListener( "resize", resize );
const earthX = canvas.width * 0.18;
const earthY = canvas.height * 0.50;
function drawStars(){
for(let i=0;i<1200;i++){ const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const r = Math.random() * 1.8; ctx.fillStyle = "rgba(0,255,220,.18)"; ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.fill(); } } function drawEarth(){ const grd = ctx.createRadialGradient( earthX, earthY, 20, earthX, earthY, 70 ); grd.addColorStop(0,"#4fd1ff"); grd.addColorStop(1,"#113355"); ctx.fillStyle = grd; ctx.beginPath(); ctx.arc( earthX, earthY, 70, 0, Math.PI * 2 ); ctx.fill(); } function drawFieldLines(){ ctx.strokeStyle = "rgba(120,220,255,.75)"; ctx.lineWidth = 4; for(let i=0;i<5;i++){ ctx.beginPath(); ctx.moveTo( earthX, earthY - (160 + i * 48) ); ctx.bezierCurveTo( earthX + 220, earthY - (260 + i * 50), canvas.width * 0.72, earthY - (240 + i * 18), canvas.width * 0.95, earthY - (180 + i * 14) ); ctx.stroke(); ctx.beginPath(); ctx.moveTo( earthX, earthY + (160 + i * 48) ); ctx.bezierCurveTo( earthX + 220, earthY + (260 + i * 50), canvas.width * 0.72, earthY + (240 + i * 18), canvas.width * 0.95, earthY + (180 + i * 14) ); ctx.stroke(); } } function drawParticleTrails(){ ctx.strokeStyle = "rgba(255,120,80,.82)"; ctx.lineWidth = 2; for(let i=0;i<7;i++){ ctx.beginPath(); ctx.moveTo( earthX, earthY ); ctx.bezierCurveTo( canvas.width * 0.28, earthY - 120 + (i * 22), canvas.width * 0.56, earthY - 90 + (i * 18), canvas.width * 0.82, earthY - 30 + (i * 10) ); ctx.stroke(); ctx.beginPath(); ctx.moveTo( earthX, earthY ); ctx.bezierCurveTo( canvas.width * 0.28, earthY + 120 - (i * 22), canvas.width * 0.56, earthY + 90 - (i * 18), canvas.width * 0.82, earthY + 30 - (i * 10) ); ctx.stroke(); } } function drawShockFront(){ const x = canvas.width * 0.76; const y = earthY; const glow = ctx.createRadialGradient( x, y, 10, x, y, 120 ); glow.addColorStop( 0, "rgba(255,255,255,.95)" ); glow.addColorStop( 1, "rgba(255,255,255,0)" ); ctx.fillStyle = glow; ctx.beginPath(); ctx.arc( x, y, 120, 0, Math.PI * 2 ); ctx.fill(); } function drawSatellites(){ ctx.fillStyle = "#ffffff"; for(let i=0;i<6;i++){ const x = canvas.width * 0.38 + (i * 95); const y = earthY; ctx.fillRect( x - 12, y - 12, 24, 24 ); ctx.strokeStyle = "#7fd8ff"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(x - 28,y); ctx.lineTo(x + 28,y); ctx.stroke(); } } function drawLabels(){ ctx.fillStyle = "#ffffff"; ctx.font = "34px Arial"; ctx.fillText( "Magnetic Field Lines", canvas.width * 0.34, earthY - 320 ); ctx.fillText( "Charged Particle Drift", canvas.width * 0.46, earthY + 260 ); ctx.fillText( "Bow Shock / Compression", canvas.width * 0.68, earthY - 160 ); } function render(){ ctx.clearRect( 0, 0, canvas.width, canvas.height ); drawStars(); drawFieldLines(); drawParticleTrails(); drawShockFront(); drawEarth(); drawSatellites(); drawLabels(); } render(); })();
