-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathnullschool_earth.py
More file actions
461 lines (396 loc) · 18.2 KB
/
nullschool_earth.py
File metadata and controls
461 lines (396 loc) · 18.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
"""
Nullschool-Style Earth Visualization Module
This module provides a simplified version of the earth.nullschool.net visualization,
featuring animated wind patterns on a dark background globe.
"""
import streamlit as st
import streamlit.components.v1 as components
def nullschool_earth(width=800, height=600):
"""
Create a Nullschool-style Earth visualization with animated wind patterns
Args:
width: Width of the visualization in pixels
height: Height of the visualization in pixels
"""
# The HTML content with inline D3.js and plain JS implementation
# This is a simplified version inspired by earth.nullschool.net
html = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nullschool Earth</title>
<style>
body {{
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
width: 100%;
height: 100%;
}}
#earth-container {{
width: {width}px;
height: {height}px;
position: relative;
margin: 0 auto;
}}
.earth-canvas {{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}}
.overlay {{
position: absolute;
bottom: 10px;
right: 10px;
color: #fff;
font-family: sans-serif;
font-size: 12px;
background: rgba(0,0,0,0.5);
padding: 5px 10px;
border-radius: 4px;
}}
</style>
</head>
<body>
<div id="earth-container">
<canvas id="earth-canvas" class="earth-canvas"></canvas>
<canvas id="wind-canvas" class="earth-canvas"></canvas>
<div class="overlay">Climate Copilot</div>
</div>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://d3js.org/d3-geo.v3.min.js"></script>
<script>
(function() {{
// Canvas setup
const container = document.getElementById('earth-container');
const earthCanvas = document.getElementById('earth-canvas');
const windCanvas = document.getElementById('wind-canvas');
// Set canvas dimensions
earthCanvas.width = {width};
earthCanvas.height = {height};
windCanvas.width = {width};
windCanvas.height = {height};
// Get canvas contexts
const earthCtx = earthCanvas.getContext('2d');
const windCtx = windCanvas.getContext('2d');
// Constants
const width = {width};
const height = {height};
const scale = Math.min(width, height) * 0.4;
const center = [width / 2, height / 2];
// Projection
const projection = d3.geoOrthographic()
.scale(scale)
.translate(center)
.rotate([0, 0, 0]);
const path = d3.geoPath()
.projection(projection)
.context(earthCtx);
// Earth colors
const oceanColor = "#151515";
const landColor = "#222";
const landStrokeColor = "#666"; // Brighter outline color
const graticuleColor = "#333";
// Wind particle system
let particles = [];
const maxParticles = 3000;
const particleBaseSpeed = 0.7;
const maxAge = 100;
const fadeInDuration = 10;
const fadeOutDuration = 30;
// Wind field
function createWindField() {{
// Simplified wind field function based on sine/cosine
// This is just for visualization purposes
return {{
getWind: function(lon, lat) {{
// Convert to radians
const lonRad = lon * Math.PI / 180;
const latRad = lat * Math.PI / 180;
// Create simple vector field with curl
const u = Math.sin(latRad) * Math.cos(lonRad + Date.now() * 0.0001) * 0.5;
const v = Math.cos(latRad) * Math.sin(lonRad + Date.now() * 0.0001) * 0.5;
return [u, v, Math.sqrt(u*u + v*v)];
}}
}};
}}
const windField = createWindField();
// Create initial particles
function initParticles() {{
particles = [];
for (let i = 0; i < maxParticles; i++) {{
particles.push(createParticle());
}}
}}
function createParticle() {{
const lon = Math.random() * 360 - 180;
const lat = Math.random() * 180 - 90;
const projected = projection([lon, lat]);
return {{
lon: lon,
lat: lat,
x: projected ? projected[0] : -1000,
y: projected ? projected[1] : -1000,
age: Math.floor(Math.random() * maxAge),
color: getRandomColor()
}};
}}
function getRandomColor() {{
// Blue to purple gradient for particles
const r = Math.floor(Math.random() * 100 + 50);
const g = Math.floor(Math.random() * 100 + 50);
const b = Math.floor(Math.random() * 150 + 105);
return `rgba(${{r}},${{g}},${{b}},`;
}}
// Draw the globe and particles
function draw() {{
// Clear both canvases
earthCtx.clearRect(0, 0, width, height);
windCtx.clearRect(0, 0, width, height);
// Draw Earth
drawEarth();
// Update and draw particles
drawParticles();
// Request next frame
requestAnimationFrame(draw);
}}
function drawEarth() {{
// Draw ocean (whole globe)
earthCtx.beginPath();
earthCtx.arc(center[0], center[1], scale, 0, 2 * Math.PI);
earthCtx.fillStyle = oceanColor;
earthCtx.fill();
// Draw graticule (longitude/latitude lines)
const graticule = d3.geoGraticule10();
earthCtx.beginPath();
path(graticule);
earthCtx.strokeStyle = graticuleColor;
earthCtx.lineWidth = 0.5;
earthCtx.stroke();
// Draw land areas directly without external data
drawFallbackContinents();
}}
function drawFallbackContinents() {{
// Draw simple continent shapes as fallback
// More detailed continent outlines
const continents = [
// Africa
[[-18, 35], [51, 36], [56, 30], [51, 10], [44, 5], [50, -35], [18, -35], [13, -10], [-15, 15], [-18, 35]],
// Europe
[[-10, 60], [45, 60], [50, 45], [20, 35], [-10, 35], [-10, 60]],
// Asia
[[50, 80], [180, 70], [180, 50], [145, 40], [145, 15], [120, 0], [95, 5], [70, 25], [50, 40], [50, 80]],
// North America
[[-170, 80], [-50, 80], [-50, 50], [-60, 30], [-90, 30], [-125, 50], [-170, 60], [-170, 80]],
// Central America
[[-90, 30], [-60, 30], [-75, 10], [-82, 8], [-90, 15], [-90, 30]],
// South America
[[-82, 8], [-75, 10], [-35, 0], [-35, -10], [-55, -55], [-75, -55], [-82, -20], [-82, 8]],
// Australia
[[110, -10], [155, -10], [155, -40], [110, -40], [110, -10]],
// Antarctica
[[-180, -60], [180, -60], [180, -90], [-180, -90], [-180, -60]],
// Greenland
[[-45, 85], [-20, 85], [-20, 60], [-45, 60], [-45, 85]],
// Indonesia/Pacific Islands
[[95, 5], [120, 0], [145, 15], [145, -10], [95, -5], [95, 5]],
// Madagascar
[[45, -10], [50, -15], [50, -28], [45, -30], [42, -20], [45, -10]],
// British Isles
[[-10, 60], [-2, 60], [-2, 50], [-10, 50], [-10, 60]]
];
continents.forEach(continent => {{
earthCtx.beginPath();
let first = true;
for (const point of continent) {{
const projected = projection(point);
if (projected) {{
if (first) {{
earthCtx.moveTo(projected[0], projected[1]);
first = false;
}} else {{
earthCtx.lineTo(projected[0], projected[1]);
}}
}}
}}
earthCtx.closePath();
earthCtx.fillStyle = landColor;
earthCtx.fill();
earthCtx.strokeStyle = landStrokeColor;
earthCtx.lineWidth = 0.8; // Increased line width
earthCtx.stroke();
}});
}}
function drawParticles() {{
// Move each particle along the wind field
particles.forEach((p, i) => {{
// Advance particle age
p.age += 1;
// Reset old particles
if (p.age > maxAge) {{
particles[i] = createParticle();
return;
}}
// Calculate wind vector at this position
const wind = windField.getWind(p.lon, p.lat);
// Update particle position based on wind
p.lon += wind[0] * particleBaseSpeed;
p.lat += wind[1] * particleBaseSpeed;
// Wrap around the globe
if (p.lon > 180) p.lon -= 360;
if (p.lon < -180) p.lon += 360;
if (p.lat > 90) p.lat = 180 - p.lat;
if (p.lat < -90) p.lat = -180 - p.lat;
// Project new position
const projected = projection([p.lon, p.lat]);
if (projected) {{
const newX = projected[0];
const newY = projected[1];
// Determine if this particle is visible (on the front of the globe)
const r = scale;
const dx = newX - center[0];
const dy = newY - center[1];
const distSq = dx*dx + dy*dy;
if (distSq <= r*r) {{
// Calculate opacity based on age
let alpha = 1.0;
if (p.age < fadeInDuration) {{
alpha = p.age / fadeInDuration;
}} else if (p.age > maxAge - fadeOutDuration) {{
alpha = (maxAge - p.age) / fadeOutDuration;
}}
// Calculate line width based on wind speed
const lineWidth = Math.min(3, Math.max(0.5, wind[2] * 3));
// Draw line from old position to new position
if (p.x > -1000 && p.y > -1000) {{
windCtx.beginPath();
windCtx.moveTo(p.x, p.y);
windCtx.lineTo(newX, newY);
windCtx.strokeStyle = p.color + alpha + ")";
windCtx.lineWidth = lineWidth;
windCtx.stroke();
}}
// Update particle position
p.x = newX;
p.y = newY;
}} else {{
// Particle now on back side of globe, hide it
p.x = -1000;
p.y = -1000;
}}
}} else {{
// Projection failed, hide particle
p.x = -1000;
p.y = -1000;
}}
}});
}}
// Interaction - rotating the globe on drag
let dragging = false;
let prevMouse = [0, 0];
let rotation = [0, 0, 0];
function startDrag(e) {{
dragging = true;
const x = e.touches ? e.touches[0].clientX : e.clientX;
const y = e.touches ? e.touches[0].clientY : e.clientY;
prevMouse = [x, y];
// Get mouse position relative to container
const rect = container.getBoundingClientRect();
const mouseX = x - rect.left;
const mouseY = y - rect.top;
e.preventDefault();
}}
function drag(e) {{
if (!dragging) return;
const x = e.touches ? e.touches[0].clientX : e.clientX;
const y = e.touches ? e.touches[0].clientY : e.clientY;
// Calculate how much we've moved
const dx = x - prevMouse[0];
const dy = y - prevMouse[1];
prevMouse = [x, y];
// Update rotation
rotation[0] += dx * 0.5;
rotation[1] -= dy * 0.5;
// Limit vertical rotation
rotation[1] = Math.max(-90, Math.min(90, rotation[1]));
// Update projection
projection.rotate(rotation);
// Reset all particles when dragging
particles.forEach((p, i) => {{
const lon = Math.random() * 360 - 180;
const lat = Math.random() * 180 - 90;
const projected = projection([lon, lat]);
p.lon = lon;
p.lat = lat;
p.x = projected ? projected[0] : -1000;
p.y = projected ? projected[1] : -1000;
p.age = Math.floor(Math.random() * maxAge);
}});
e.preventDefault();
}}
function endDrag() {{
dragging = false;
}}
// Add event listeners for interaction
container.addEventListener('mousedown', startDrag);
container.addEventListener('mousemove', drag);
container.addEventListener('mouseup', endDrag);
container.addEventListener('mouseleave', endDrag);
container.addEventListener('touchstart', startDrag);
container.addEventListener('touchmove', drag);
container.addEventListener('touchend', endDrag);
// Load TopoJSON library
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/topojson@3/dist/topojson.min.js';
document.head.appendChild(script);
// Initialize and start animation
script.onload = () => {{
initParticles();
draw();
}};
// Fallback if TopoJSON fails to load
script.onerror = () => {{
initParticles();
draw();
}};
}})();
</script>
</body>
</html>
"""
# Return the HTML to be displayed in Streamlit
return html
def display_nullschool_earth(width=800, height=600):
"""
Display the Nullschool-style Earth visualization in Streamlit
Args:
width: Width of the visualization in pixels
height: Height of the visualization in pixels
"""
# Create container with styling
st.markdown("""
<div style="margin-top: 30px; margin-bottom: 30px; border-radius: 15px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); width: 100%;">
<div style="background: linear-gradient(90deg, #1E90FF, #9370DB); height: 4px;"></div>
<div id="nullschool-earth-container" style="width: 100%;"></div>
</div>
""", unsafe_allow_html=True)
# Display visualization title
col1, col2, col3 = st.columns([4, 1, 1])
with col1:
st.markdown("""
<div style="background: linear-gradient(90deg, #1E90FF, #9370DB);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 18px;
margin-top: 5px;">
CeCe Global Climate Explorer (Nullschool Style)
</div>
""", unsafe_allow_html=True)
# Display the visualization using streamlit components
html = nullschool_earth(width=width, height=height)
components.html(html, height=height+50, scrolling=False)