first commit
This commit is contained in:
Jonas Reith
parent
a3c0b0da5a
commit
46a7d921d2
68
index.html
Normal file
68
index.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Planet Visualization</title>
|
||||||
|
|
||||||
|
<!-- Stylesheets -->
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
||||||
|
<!-- External Libraries -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Screen 1: Settings Screen -->
|
||||||
|
<div id="settings-screen" class="screen active">
|
||||||
|
<div class="screen-content">
|
||||||
|
<h1>Planet Generator</h1>
|
||||||
|
<div class="settings-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="points-count">Number of Points:</label>
|
||||||
|
<input type="number" id="points-count" value="5000" min="1000" max="50000" step="1000">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="color-scheme">Color Scheme:</label>
|
||||||
|
<select id="color-scheme">
|
||||||
|
<option value="terrain">Terrain</option>
|
||||||
|
<option value="random">Random Colors</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button id="generate-btn" class="primary-btn">Generate Planet</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Screen 2: Loading Screen -->
|
||||||
|
<div id="loading-screen" class="screen">
|
||||||
|
<div class="screen-content">
|
||||||
|
<h2>Generating Planet...</h2>
|
||||||
|
<div class="progress-container">
|
||||||
|
<div id="progress-bar" class="progress-bar"></div>
|
||||||
|
</div>
|
||||||
|
<div id="progress-text">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Screen 3: Visualization Screen -->
|
||||||
|
<div id="visualization-screen" class="screen">
|
||||||
|
<div id="vis-controls">
|
||||||
|
<div>
|
||||||
|
<button id="back-btn">Back to Settings</button>
|
||||||
|
<button id="regenerate-btn">Regenerate Planet</button>
|
||||||
|
<label for="auto-rotate">Rotate: </label>
|
||||||
|
<input type="checkbox" id="auto-rotate" checked>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="visualization">
|
||||||
|
<div id="threejs-container"></div>
|
||||||
|
<div id="d3-container"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom JavaScript -->
|
||||||
|
<script src="planet_visualization.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
536
planet_visualization.js
Normal file
536
planet_visualization.js
Normal file
@ -0,0 +1,536 @@
|
|||||||
|
// Global variables
|
||||||
|
let planetData = null;
|
||||||
|
let threejsScene, threejsCamera, threejsRenderer, threejsControls, threejsSphere;
|
||||||
|
let d3Svg, d3Projection, d3Path;
|
||||||
|
let progressInterval;
|
||||||
|
|
||||||
|
// Screen management
|
||||||
|
function showScreen(screenId) {
|
||||||
|
// Hide all screens
|
||||||
|
document.querySelectorAll('.screen').forEach(screen => {
|
||||||
|
screen.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show the requested screen
|
||||||
|
document.getElementById(screenId).classList.add('active');
|
||||||
|
|
||||||
|
// Initialize visualization if showing that screen
|
||||||
|
if (screenId === 'visualization-screen' && planetData) {
|
||||||
|
// Need a small delay for the containers to be visible with correct dimensions
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!threejsScene) {
|
||||||
|
initVisualizations();
|
||||||
|
} else {
|
||||||
|
// If already initialized, handle resize for containers that were hidden
|
||||||
|
handleResize();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle window resize
|
||||||
|
function handleResize() {
|
||||||
|
if (threejsRenderer && threejsCamera) {
|
||||||
|
const container = document.getElementById('threejs-container');
|
||||||
|
const width = container.clientWidth;
|
||||||
|
const height = container.clientHeight;
|
||||||
|
|
||||||
|
threejsCamera.aspect = width / height;
|
||||||
|
threejsCamera.updateProjectionMatrix();
|
||||||
|
threejsRenderer.setSize(width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d3Svg && d3Projection) {
|
||||||
|
const container = document.getElementById('d3-container');
|
||||||
|
const width = container.clientWidth;
|
||||||
|
const height = container.clientHeight;
|
||||||
|
|
||||||
|
d3Svg.attr('width', width)
|
||||||
|
.attr('height', height);
|
||||||
|
|
||||||
|
d3Projection.scale(width / (2 * Math.PI) * 0.9)
|
||||||
|
.translate([width / 2, height / 1.8]);
|
||||||
|
|
||||||
|
updateVisualization();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the 3D visualization with Three.js
|
||||||
|
function init3DVisualization() {
|
||||||
|
const container = document.getElementById('threejs-container');
|
||||||
|
const width = container.clientWidth;
|
||||||
|
const height = container.clientHeight;
|
||||||
|
|
||||||
|
// Create scene
|
||||||
|
threejsScene = new THREE.Scene();
|
||||||
|
threejsScene.background = new THREE.Color(0x000000);
|
||||||
|
|
||||||
|
// Create camera
|
||||||
|
threejsCamera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
|
||||||
|
threejsCamera.position.z = 2;
|
||||||
|
|
||||||
|
// Add polar axis helper
|
||||||
|
const axisHelper = new THREE.Group();
|
||||||
|
|
||||||
|
// North-South pole axis (red)
|
||||||
|
const poleGeometry = new THREE.CylinderGeometry(0.01, 0.01, 2.4, 8);
|
||||||
|
const poleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
|
||||||
|
const poleAxis = new THREE.Mesh(poleGeometry, poleMaterial);
|
||||||
|
// Correctly align with y-axis (poles should be on y-axis)
|
||||||
|
poleAxis.rotation.z = 0;
|
||||||
|
axisHelper.add(poleAxis);
|
||||||
|
|
||||||
|
// North pole cap (red)
|
||||||
|
const northCapGeometry = new THREE.ConeGeometry(0.04, 0.1, 8);
|
||||||
|
const northCap = new THREE.Mesh(northCapGeometry, poleMaterial);
|
||||||
|
northCap.position.set(0, 1.25, 0);
|
||||||
|
northCap.rotation.x = Math.PI; // Point up
|
||||||
|
axisHelper.add(northCap);
|
||||||
|
|
||||||
|
// South pole cap (red)
|
||||||
|
const southCapGeometry = new THREE.ConeGeometry(0.04, 0.1, 8);
|
||||||
|
const southCap = new THREE.Mesh(southCapGeometry, poleMaterial);
|
||||||
|
southCap.position.set(0, -1.25, 0);
|
||||||
|
axisHelper.add(southCap);
|
||||||
|
|
||||||
|
threejsScene.add(axisHelper);
|
||||||
|
|
||||||
|
// Create renderer
|
||||||
|
threejsRenderer = new THREE.WebGLRenderer({ antialias: true });
|
||||||
|
threejsRenderer.setSize(width, height);
|
||||||
|
container.appendChild(threejsRenderer.domElement);
|
||||||
|
|
||||||
|
// Add orbit controls
|
||||||
|
threejsControls = new THREE.OrbitControls(threejsCamera, threejsRenderer.domElement);
|
||||||
|
threejsControls.enableDamping = true;
|
||||||
|
threejsControls.dampingFactor = 0.05;
|
||||||
|
|
||||||
|
// Add ambient light
|
||||||
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
||||||
|
threejsScene.add(ambientLight);
|
||||||
|
|
||||||
|
// Add directional light
|
||||||
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
||||||
|
directionalLight.position.set(1, 1, 1);
|
||||||
|
threejsScene.add(directionalLight);
|
||||||
|
|
||||||
|
// Start animation loop
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the 2D visualization with D3.js
|
||||||
|
function init2DVisualization() {
|
||||||
|
const container = document.getElementById('d3-container');
|
||||||
|
const width = container.clientWidth;
|
||||||
|
const height = container.clientHeight;
|
||||||
|
|
||||||
|
// Create SVG
|
||||||
|
d3Svg = d3.select('#d3-container')
|
||||||
|
.append('svg')
|
||||||
|
.attr('width', width)
|
||||||
|
.attr('height', height);
|
||||||
|
|
||||||
|
// Add a background rectangle representing the ocean
|
||||||
|
d3Svg.append('rect')
|
||||||
|
.attr('width', width)
|
||||||
|
.attr('height', height)
|
||||||
|
.attr('fill', '#a4d1e9'); // Ocean blue
|
||||||
|
|
||||||
|
// Create projection (Mercator) similar to standard world maps
|
||||||
|
d3Projection = d3.geoMercator()
|
||||||
|
.scale(width / (2 * Math.PI) * 0.9)
|
||||||
|
.translate([width / 2, height / 1.8]);
|
||||||
|
|
||||||
|
// Create path generator
|
||||||
|
d3Path = d3.geoPath()
|
||||||
|
.projection(d3Projection);
|
||||||
|
|
||||||
|
// Draw graticule (grid lines)
|
||||||
|
const graticule = d3.geoGraticule()
|
||||||
|
.step([15, 15]); // Grid every 15 degrees
|
||||||
|
|
||||||
|
d3Svg.append('path')
|
||||||
|
.datum(graticule)
|
||||||
|
.attr('class', 'graticule')
|
||||||
|
.attr('d', d3Path)
|
||||||
|
.style('fill', 'none')
|
||||||
|
.style('stroke', '#ffffff')
|
||||||
|
.style('stroke-width', '0.5px')
|
||||||
|
.style('opacity', 0.5);
|
||||||
|
|
||||||
|
// Draw equator
|
||||||
|
const equator = {
|
||||||
|
type: "LineString",
|
||||||
|
coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]
|
||||||
|
};
|
||||||
|
|
||||||
|
d3Svg.append('path')
|
||||||
|
.datum(equator)
|
||||||
|
.attr('class', 'equator')
|
||||||
|
.attr('d', d3Path)
|
||||||
|
.style('fill', 'none')
|
||||||
|
.style('stroke', '#00ffff')
|
||||||
|
.style('stroke-width', '2px');
|
||||||
|
|
||||||
|
// Draw prime meridian (0° longitude)
|
||||||
|
// const primeMeridian = {
|
||||||
|
// type: "LineString",
|
||||||
|
// coordinates: [[0, -90], [0, -45], [0, 0], [0, 45], [0, 90]]
|
||||||
|
// };
|
||||||
|
|
||||||
|
// d3Svg.append('path')
|
||||||
|
// .datum(primeMeridian)
|
||||||
|
// .attr('class', 'prime-meridian')
|
||||||
|
// .attr('d', d3Path)
|
||||||
|
// .style('fill', 'none')
|
||||||
|
// .style('stroke', '#ff0000')
|
||||||
|
// .style('stroke-width', '2px');
|
||||||
|
|
||||||
|
// Draw continental outlines (simplified)
|
||||||
|
// This just adds some landmass-like shapes to make it feel more Earth-like
|
||||||
|
const mockContinents = [
|
||||||
|
{ // North America (simplified)
|
||||||
|
type: "Polygon",
|
||||||
|
coordinates: [[
|
||||||
|
[-140, 70], [-120, 60], [-100, 50], [-80, 30],
|
||||||
|
[-90, 20], [-100, 15], [-120, 30], [-130, 50], [-140, 70]
|
||||||
|
]]
|
||||||
|
},
|
||||||
|
{ // South America (simplified)
|
||||||
|
type: "Polygon",
|
||||||
|
coordinates: [[
|
||||||
|
[-80, 10], [-60, 0], [-50, -10], [-60, -30],
|
||||||
|
[-70, -50], [-80, -30], [-90, -10], [-80, 10]
|
||||||
|
]]
|
||||||
|
},
|
||||||
|
{ // Europe/Africa (very simplified)
|
||||||
|
type: "Polygon",
|
||||||
|
coordinates: [[
|
||||||
|
[0, 60], [20, 40], [30, 30], [20, 10], [10, 0],
|
||||||
|
[20, -10], [30, -30], [20, -40], [0, -30], [-10, 0], [0, 60]
|
||||||
|
]]
|
||||||
|
},
|
||||||
|
{ // Asia (simplified)
|
||||||
|
type: "Polygon",
|
||||||
|
coordinates: [[
|
||||||
|
[30, 60], [60, 70], [100, 60], [130, 40], [110, 20],
|
||||||
|
[100, 0], [80, 10], [60, 30], [40, 40], [30, 60]
|
||||||
|
]]
|
||||||
|
},
|
||||||
|
{ // Australia (simplified)
|
||||||
|
type: "Polygon",
|
||||||
|
coordinates: [[
|
||||||
|
[110, -20], [130, -25], [140, -35], [130, -40],
|
||||||
|
[120, -35], [110, -30], [110, -20]
|
||||||
|
]]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Add continent outlines with very low opacity to provide visual reference
|
||||||
|
mockContinents.forEach(continent => {
|
||||||
|
d3Svg.append('path')
|
||||||
|
.datum(continent)
|
||||||
|
.attr('class', 'continent-outline')
|
||||||
|
.attr('d', d3Path);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add labels for orientation
|
||||||
|
const labels = [
|
||||||
|
{ text: "North Pole", coords: [0, 85], anchor: "middle" },
|
||||||
|
{ text: "South Pole", coords: [0, -85], anchor: "middle" },
|
||||||
|
{ text: "Equator", coords: [-170, 0], anchor: "start" },
|
||||||
|
//{ text: "Prime Meridian", coords: [5, 45], anchor: "start" }
|
||||||
|
];
|
||||||
|
|
||||||
|
labels.forEach(label => {
|
||||||
|
const [x, y] = d3Projection(label.coords);
|
||||||
|
d3Svg.append('text')
|
||||||
|
.attr('x', x)
|
||||||
|
.attr('y', y)
|
||||||
|
.attr('class', 'map-label')
|
||||||
|
.attr('text-anchor', label.anchor)
|
||||||
|
.text(label.text);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a Three.js sphere from points
|
||||||
|
function createThreeJSSphere(points) {
|
||||||
|
// Remove existing sphere if any
|
||||||
|
if (threejsSphere) {
|
||||||
|
threejsScene.remove(threejsSphere);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a group to hold the sphere and equator
|
||||||
|
threejsSphere = new THREE.Group();
|
||||||
|
|
||||||
|
// Create geometry
|
||||||
|
const geometry = new THREE.SphereGeometry(1, 32, 32);
|
||||||
|
|
||||||
|
// Create material
|
||||||
|
const material = new THREE.MeshPhongMaterial({
|
||||||
|
vertexColors: true,
|
||||||
|
flatShading: true
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add equator
|
||||||
|
const equatorGeometry = new THREE.TorusGeometry(1.01, 0.005, 16, 100);
|
||||||
|
const equatorMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff });
|
||||||
|
const equator = new THREE.Mesh(equatorGeometry, equatorMaterial);
|
||||||
|
equator.rotation.x = Math.PI / 2; // Rotate to lie on the x-z plane
|
||||||
|
threejsSphere.add(equator);
|
||||||
|
|
||||||
|
// Add colors to geometry
|
||||||
|
const colors = [];
|
||||||
|
const positionAttribute = geometry.getAttribute('position');
|
||||||
|
|
||||||
|
// For each vertex in the sphere
|
||||||
|
for (let i = 0; i < positionAttribute.count; i++) {
|
||||||
|
const vertex = new THREE.Vector3();
|
||||||
|
vertex.fromBufferAttribute(positionAttribute, i);
|
||||||
|
vertex.normalize();
|
||||||
|
|
||||||
|
// Find closest point in our dataset
|
||||||
|
let minDist = Infinity;
|
||||||
|
let closestPoint = null;
|
||||||
|
|
||||||
|
for (const point of points) {
|
||||||
|
const pointVec = new THREE.Vector3(point.x, point.y, point.z);
|
||||||
|
const dist = vertex.distanceTo(pointVec);
|
||||||
|
if (dist < minDist) {
|
||||||
|
minDist = dist;
|
||||||
|
closestPoint = point;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set color from closest point
|
||||||
|
colors.push(
|
||||||
|
closestPoint.color[0],
|
||||||
|
closestPoint.color[1],
|
||||||
|
closestPoint.color[2]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add colors to geometry
|
||||||
|
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
|
||||||
|
|
||||||
|
// Create mesh for the sphere
|
||||||
|
const sphereMesh = new THREE.Mesh(geometry, material);
|
||||||
|
|
||||||
|
// Add sphere to the group
|
||||||
|
threejsSphere.add(sphereMesh);
|
||||||
|
|
||||||
|
// Add group to scene
|
||||||
|
threejsScene.add(threejsSphere);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create a D3.js map from points
|
||||||
|
function createD3Map(points) {
|
||||||
|
// Clear existing points but preserve graticule, equator, and axis
|
||||||
|
d3Svg.selectAll('.planet-point').remove();
|
||||||
|
|
||||||
|
// Create groups for continents to improve organization
|
||||||
|
const pointsGroup = d3Svg.append('g').attr('class', 'points-group');
|
||||||
|
|
||||||
|
// Plot each point on the map
|
||||||
|
points.forEach(point => {
|
||||||
|
// Convert spherical coordinates to longitude/latitude
|
||||||
|
// phi goes from -π to π, convert to -180 to 180 degrees (longitude)
|
||||||
|
const lon = (point.phi * 180 / Math.PI);
|
||||||
|
|
||||||
|
// theta goes from 0 to π, convert to 90 to -90 degrees (latitude)
|
||||||
|
const lat = 90 - (point.theta * 180 / Math.PI);
|
||||||
|
|
||||||
|
// Skip points that might cause projection issues at the poles
|
||||||
|
if (lat > 85 || lat < -85) return;
|
||||||
|
|
||||||
|
// Only draw the point if it projects properly
|
||||||
|
const projected = d3Projection([lon, lat]);
|
||||||
|
if (projected) {
|
||||||
|
pointsGroup.append('circle')
|
||||||
|
.attr('class', 'planet-point')
|
||||||
|
.attr('cx', projected[0])
|
||||||
|
.attr('cy', projected[1])
|
||||||
|
.attr('r', 1.5)
|
||||||
|
.style('fill', `rgb(${point.color[0] * 255}, ${point.color[1] * 255}, ${point.color[2] * 255})`)
|
||||||
|
.style('opacity', 0.8);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animation loop for Three.js
|
||||||
|
function animate() {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
|
||||||
|
// Update controls
|
||||||
|
if (threejsControls) {
|
||||||
|
threejsControls.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-rotate if enabled and on visualization screen
|
||||||
|
if (document.getElementById('visualization-screen').classList.contains('active') &&
|
||||||
|
document.getElementById('auto-rotate').checked &&
|
||||||
|
threejsSphere) {
|
||||||
|
threejsSphere.rotation.y += 0.005;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Render scene
|
||||||
|
if (threejsRenderer && threejsScene && threejsCamera) {
|
||||||
|
threejsRenderer.render(threejsScene, threejsCamera);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update visualizations with new data
|
||||||
|
function updateVisualization() {
|
||||||
|
if (planetData && planetData.points) {
|
||||||
|
createThreeJSSphere(planetData.points);
|
||||||
|
createD3Map(planetData.points);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize visualizations
|
||||||
|
function initVisualizations() {
|
||||||
|
// Only initialize if not already done
|
||||||
|
if (!threejsScene) {
|
||||||
|
init3DVisualization();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!d3Svg) {
|
||||||
|
init2DVisualization();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateVisualization();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start progress bar simulation
|
||||||
|
function startProgressBar() {
|
||||||
|
let progress = 0;
|
||||||
|
const progressBar = document.getElementById('progress-bar');
|
||||||
|
const progressText = document.getElementById('progress-text');
|
||||||
|
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
|
||||||
|
progressBar.style.width = '0%';
|
||||||
|
progressText.textContent = '0%';
|
||||||
|
|
||||||
|
// Simulate progress updates
|
||||||
|
progressInterval = setInterval(() => {
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make progress increases less predictable
|
||||||
|
const increment = Math.random() * 5 + 1;
|
||||||
|
progress = Math.min(progress + increment, 100);
|
||||||
|
|
||||||
|
progressBar.style.width = `${progress}%`;
|
||||||
|
progressText.textContent = `${Math.round(progress)}%`;
|
||||||
|
|
||||||
|
// When complete, show visualization
|
||||||
|
if (progress >= 100) {
|
||||||
|
setTimeout(() => {
|
||||||
|
showScreen('visualization-screen');
|
||||||
|
}, 500); // Short delay for animation
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate planet
|
||||||
|
function generatePlanet() {
|
||||||
|
const pointsCount = parseInt(document.getElementById('points-count').value);
|
||||||
|
const colorScheme = document.getElementById('color-scheme').value;
|
||||||
|
|
||||||
|
// Show loading screen
|
||||||
|
showScreen('loading-screen');
|
||||||
|
|
||||||
|
// Start progress bar
|
||||||
|
startProgressBar();
|
||||||
|
|
||||||
|
// Call Python function to generate data with a slight delay
|
||||||
|
// to allow the progress bar to start
|
||||||
|
setTimeout(() => {
|
||||||
|
pywebview.api.regenerate_planet(pointsCount, colorScheme)
|
||||||
|
.then(data => {
|
||||||
|
planetData = data;
|
||||||
|
|
||||||
|
// Ensure we're at 100% when done
|
||||||
|
document.getElementById('progress-bar').style.width = '100%';
|
||||||
|
document.getElementById('progress-text').textContent = '100%';
|
||||||
|
|
||||||
|
// Show visualization after a short delay
|
||||||
|
setTimeout(() => {
|
||||||
|
showScreen('visualization-screen');
|
||||||
|
}, 300);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error generating planet:', error);
|
||||||
|
alert('An error occurred while generating the planet. Please try again.');
|
||||||
|
showScreen('settings-screen');
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set planet data and update visualizations
|
||||||
|
function setPlanetData(data) {
|
||||||
|
planetData = data;
|
||||||
|
|
||||||
|
// Ensure progress is complete and move to visualization
|
||||||
|
document.getElementById('progress-bar').style.width = '100%';
|
||||||
|
document.getElementById('progress-text').textContent = '100%';
|
||||||
|
|
||||||
|
// Clear any progress simulation
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
|
||||||
|
// Show visualization screen after a short delay
|
||||||
|
setTimeout(() => {
|
||||||
|
showScreen('visualization-screen');
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set up event listeners
|
||||||
|
function setupEventListeners() {
|
||||||
|
// Generate button on settings screen
|
||||||
|
document.getElementById('generate-btn').addEventListener('click', generatePlanet);
|
||||||
|
|
||||||
|
// Regenerate button on visualization screen
|
||||||
|
document.getElementById('regenerate-btn').addEventListener('click', () => {
|
||||||
|
const pointsCount = parseInt(document.getElementById('points-count').value);
|
||||||
|
const colorScheme = document.getElementById('color-scheme').value;
|
||||||
|
|
||||||
|
// Show loading screen
|
||||||
|
showScreen('loading-screen');
|
||||||
|
|
||||||
|
// Start progress bar
|
||||||
|
startProgressBar();
|
||||||
|
|
||||||
|
// Call Python function to regenerate data
|
||||||
|
setTimeout(() => {
|
||||||
|
pywebview.api.regenerate_planet(pointsCount, colorScheme)
|
||||||
|
.then(data => {
|
||||||
|
planetData = data;
|
||||||
|
setTimeout(() => {
|
||||||
|
showScreen('visualization-screen');
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Back button on visualization screen
|
||||||
|
document.getElementById('back-btn').addEventListener('click', () => {
|
||||||
|
showScreen('settings-screen');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Window resize handler
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when document is ready
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
setupEventListeners();
|
||||||
|
|
||||||
|
// Start on the settings screen
|
||||||
|
showScreen('settings-screen');
|
||||||
|
|
||||||
|
// Start the animation loop anyway for when we need it
|
||||||
|
animate();
|
||||||
|
});
|
||||||
243
planet_visualization.py
Normal file
243
planet_visualization.py
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
import numpy as np
|
||||||
|
import xarray as xr
|
||||||
|
import random
|
||||||
|
import webview
|
||||||
|
import os
|
||||||
|
import json
|
||||||
|
import pathlib
|
||||||
|
import time
|
||||||
|
|
||||||
|
# Function to generate Fibonacci sphere points
|
||||||
|
def fibonacci_sphere(n_points, randomize=False):
|
||||||
|
"""
|
||||||
|
Parameters:
|
||||||
|
n_points (int): Number of points to generate
|
||||||
|
randomize (bool): Add some randomization to the points
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
ndarray: Array of [x, y, z] coordinates of points on a unit sphere
|
||||||
|
"""
|
||||||
|
points = []
|
||||||
|
phi = np.pi * (3. - np.sqrt(5.)) # golden angle in radians
|
||||||
|
|
||||||
|
for i in range(n_points):
|
||||||
|
y = 1 - (i / float(n_points - 1)) * 2 # y goes from 1 to -1
|
||||||
|
radius = np.sqrt(1 - y * y) # radius at y
|
||||||
|
|
||||||
|
theta = phi * i # golden angle increment
|
||||||
|
|
||||||
|
if randomize:
|
||||||
|
# Add slight randomization to the angle
|
||||||
|
theta = theta + random.uniform(-0.1, 0.1)
|
||||||
|
|
||||||
|
x = np.cos(theta) * radius
|
||||||
|
z = np.sin(theta) * radius
|
||||||
|
|
||||||
|
points.append([x, y, z])
|
||||||
|
|
||||||
|
return np.array(points)
|
||||||
|
|
||||||
|
# Function to convert cartesian to spherical coordinates
|
||||||
|
def cartesian_to_spherical(points):
|
||||||
|
"""
|
||||||
|
Convert cartesian (x, y, z) coordinates to spherical (r, theta, phi) coordinates.
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
points (ndarray): Array of [x, y, z] coordinates
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
ndarray: Array of [r, theta, phi] coordinates
|
||||||
|
"""
|
||||||
|
x, y, z = points[:, 0], points[:, 1], points[:, 2]
|
||||||
|
r = np.sqrt(x**2 + y**2 + z**2)
|
||||||
|
theta = np.arccos(z / r) # polar angle (0 to pi)
|
||||||
|
phi = np.arctan2(y, x) # azimuthal angle (0 to 2pi)
|
||||||
|
|
||||||
|
return np.column_stack((r, theta, phi))
|
||||||
|
|
||||||
|
# Function to generate random colors for points
|
||||||
|
def generate_point_colors(n_points, color_scheme='random'):
|
||||||
|
"""
|
||||||
|
Generate colors for each point.
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
n_points (int): Number of points
|
||||||
|
color_scheme (str): Type of color scheme to use
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
ndarray: Array of [r, g, b] values (0-1 scale)
|
||||||
|
"""
|
||||||
|
colors = []
|
||||||
|
|
||||||
|
if color_scheme == 'random':
|
||||||
|
for _ in range(n_points):
|
||||||
|
colors.append([random.random(), random.random(), random.random()])
|
||||||
|
|
||||||
|
elif color_scheme == 'terrain':
|
||||||
|
# Generate terrain-like colors
|
||||||
|
for _ in range(n_points):
|
||||||
|
elev = random.random() # simulated elevation
|
||||||
|
if elev < 0.25:
|
||||||
|
# Deep water (dark blue)
|
||||||
|
colors.append([0.0, 0.0, 0.5 + 0.5 * random.random()])
|
||||||
|
elif elev < 0.4:
|
||||||
|
# Shallow water (light blue)
|
||||||
|
colors.append([0.0, 0.3 + 0.3 * random.random(), 0.8])
|
||||||
|
elif elev < 0.5:
|
||||||
|
# Sand (tan)
|
||||||
|
colors.append([0.76, 0.7, 0.5])
|
||||||
|
elif elev < 0.7:
|
||||||
|
# Grass/forest (green)
|
||||||
|
colors.append([0.0, 0.5 + 0.3 * random.random(), 0.0])
|
||||||
|
elif elev < 0.9:
|
||||||
|
# Mountain (gray/brown)
|
||||||
|
g = 0.3 + 0.2 * random.random()
|
||||||
|
colors.append([g, g, g])
|
||||||
|
else:
|
||||||
|
# Snow (white)
|
||||||
|
colors.append([0.9, 0.9, 0.9])
|
||||||
|
|
||||||
|
return np.array(colors)
|
||||||
|
|
||||||
|
# Generate point data and store in xarray dataset
|
||||||
|
def create_planet_data(n_points=10000, color_scheme='terrain'):
|
||||||
|
"""
|
||||||
|
Create planet data with Fibonacci sphere distribution and colors.
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
n_points (int): Number of points to generate
|
||||||
|
color_scheme (str): Type of color scheme to use
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
xarray.Dataset: Dataset containing planet data
|
||||||
|
"""
|
||||||
|
# Generate Fibonacci sphere points
|
||||||
|
cartesian_points = fibonacci_sphere(n_points)
|
||||||
|
|
||||||
|
# Add some small delays for larger point sets to make progress bar meaningful
|
||||||
|
if n_points > 5000:
|
||||||
|
time.sleep(0.2) # Simulate computation time
|
||||||
|
|
||||||
|
# Convert to spherical coordinates
|
||||||
|
spherical_points = cartesian_to_spherical(cartesian_points)
|
||||||
|
|
||||||
|
if n_points > 5000:
|
||||||
|
time.sleep(0.2) # Simulate computation time
|
||||||
|
|
||||||
|
# Generate colors
|
||||||
|
colors = generate_point_colors(n_points, color_scheme)
|
||||||
|
|
||||||
|
if n_points > 5000:
|
||||||
|
time.sleep(0.2) # Simulate computation time
|
||||||
|
|
||||||
|
# Create xarray dataset
|
||||||
|
ds = xr.Dataset(
|
||||||
|
data_vars={
|
||||||
|
'x': ('point_idx', cartesian_points[:, 0]),
|
||||||
|
'y': ('point_idx', cartesian_points[:, 1]),
|
||||||
|
'z': ('point_idx', cartesian_points[:, 2]),
|
||||||
|
'r': ('point_idx', spherical_points[:, 0]),
|
||||||
|
'theta': ('point_idx', spherical_points[:, 1]),
|
||||||
|
'phi': ('point_idx', spherical_points[:, 2]),
|
||||||
|
'color_r': ('point_idx', colors[:, 0]),
|
||||||
|
'color_g': ('point_idx', colors[:, 1]),
|
||||||
|
'color_b': ('point_idx', colors[:, 2]),
|
||||||
|
},
|
||||||
|
coords={
|
||||||
|
'point_idx': np.arange(n_points),
|
||||||
|
},
|
||||||
|
attrs={
|
||||||
|
'description': 'Planet data with Fibonacci sphere distribution',
|
||||||
|
'n_points': n_points,
|
||||||
|
'color_scheme': color_scheme,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return ds
|
||||||
|
|
||||||
|
# Function to prepare data for visualization
|
||||||
|
def prepare_visualization_data(ds):
|
||||||
|
"""
|
||||||
|
Prepare the xarray dataset for visualization in the web view.
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
ds (xarray.Dataset): Dataset containing planet data
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict: Dictionary with data for visualization
|
||||||
|
"""
|
||||||
|
# Extract data for visualization
|
||||||
|
point_data = []
|
||||||
|
|
||||||
|
for i in range(len(ds.point_idx)):
|
||||||
|
point_data.append({
|
||||||
|
'x': float(ds.x[i].values),
|
||||||
|
'y': float(ds.y[i].values),
|
||||||
|
'z': float(ds.z[i].values),
|
||||||
|
'theta': float(ds.theta[i].values),
|
||||||
|
'phi': float(ds.phi[i].values),
|
||||||
|
'color': [
|
||||||
|
float(ds.color_r[i].values),
|
||||||
|
float(ds.color_g[i].values),
|
||||||
|
float(ds.color_b[i].values)
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
return {'points': point_data}
|
||||||
|
|
||||||
|
# API exposed to the browser
|
||||||
|
class Api:
|
||||||
|
def __init__(self, ds):
|
||||||
|
self.ds = ds
|
||||||
|
|
||||||
|
def regenerate_planet(self, n_points, color_scheme):
|
||||||
|
"""
|
||||||
|
Regenerate planet data with new parameters.
|
||||||
|
|
||||||
|
Parameters:
|
||||||
|
n_points (int): Number of points
|
||||||
|
color_scheme (str): Color scheme to use
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
dict: Updated visualization data
|
||||||
|
"""
|
||||||
|
self.ds = create_planet_data(n_points, color_scheme)
|
||||||
|
return prepare_visualization_data(self.ds)
|
||||||
|
|
||||||
|
def main():
|
||||||
|
# Create planet data
|
||||||
|
n_points = 5000 # default number of points
|
||||||
|
color_scheme = 'terrain' # default color scheme
|
||||||
|
|
||||||
|
ds = create_planet_data(n_points, color_scheme)
|
||||||
|
|
||||||
|
# Get the directory of the current script
|
||||||
|
script_dir = pathlib.Path(__file__).parent.absolute()
|
||||||
|
|
||||||
|
# Prepare data for visualization
|
||||||
|
data = prepare_visualization_data(ds)
|
||||||
|
|
||||||
|
# Create API instance
|
||||||
|
api = Api(ds)
|
||||||
|
|
||||||
|
# Function to initialize data after window loads
|
||||||
|
def on_loaded():
|
||||||
|
window.evaluate_js(f'setPlanetData({json.dumps(data)})')
|
||||||
|
|
||||||
|
# Create webview window
|
||||||
|
window = webview.create_window(
|
||||||
|
'Planet Visualization',
|
||||||
|
url=os.path.join(script_dir, 'index.html'),
|
||||||
|
js_api=api,
|
||||||
|
width=1200,
|
||||||
|
height=800
|
||||||
|
)
|
||||||
|
|
||||||
|
# Set up the loaded event handler
|
||||||
|
window.events.loaded += on_loaded
|
||||||
|
|
||||||
|
# Start webview
|
||||||
|
webview.start()
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
main()
|
||||||
242
styles.css
Normal file
242
styles.css
Normal file
@ -0,0 +1,242 @@
|
|||||||
|
/* Basic Reset */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Screen Management */
|
||||||
|
.screen {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.screen-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Settings Screen */
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-form {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input, .form-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-btn {
|
||||||
|
background-color: #4285f4;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 10px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary-btn:hover {
|
||||||
|
background-color: #3367d6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loading Screen */
|
||||||
|
.progress-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
height: 20px;
|
||||||
|
background-color: #eee;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 20px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 100%;
|
||||||
|
width: 0%;
|
||||||
|
background-color: #4285f4;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
#progress-text {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Visualization Screen */
|
||||||
|
#vis-controls {
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#vis-controls button {
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin-right: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#back-btn {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
#regenerate-btn {
|
||||||
|
background-color: #4285f4;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vis-controls button:hover {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vis-controls label {
|
||||||
|
margin-right: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Visualization Area */
|
||||||
|
#visualization {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#threejs-container, #d3-container {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#threejs-container {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
#d3-container {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* D3 Map Specific Styles */
|
||||||
|
.map-label {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
pointer-events: none;
|
||||||
|
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graticule {
|
||||||
|
fill: none;
|
||||||
|
stroke: rgba(255, 255, 255, 0.5);
|
||||||
|
stroke-width: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.equator {
|
||||||
|
fill: none;
|
||||||
|
stroke: #00ffff;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prime-meridian {
|
||||||
|
fill: none;
|
||||||
|
stroke: #ff0000;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.continent-outline {
|
||||||
|
fill: #d3b683;
|
||||||
|
stroke: #a89070;
|
||||||
|
stroke-width: 0.5px;
|
||||||
|
opacity: 0.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet-point {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#visualization {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#threejs-container, #d3-container {
|
||||||
|
flex: 1;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#d3-container {
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vis-controls {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#vis-controls > div {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-form {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user