https://github.com/codeandwander/nala-helpers
https://github.com/codeandwander/nala-helpers
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/codeandwander/nala-helpers
- Owner: codeandwander
- Created: 2024-06-21T13:47:10.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-28T12:35:26.000Z (11 months ago)
- Last Synced: 2025-01-24T12:45:41.088Z (4 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Globe Visualizer
================
This project is a 3D globe visualization using Three.js and additional libraries to display arcs and particles on a globe. The visualization highlights random locations in the US or Europe, drawing arcs to predetermined target locations in Africa and animating heart-shaped particles at the target locations.
Features
--------
- Randomly generates arcs between the US/Europe and target locations in Africa.
- Animates heart-shaped particles at the target locations.
- Provides a custom 3D globe view with interactive controls.
Getting Started
---------------
### Prerequisites
- A modern web browser with JavaScript enabled.
### Installation
You can use this code directly in your HTML file by including the necessary dependencies and scripts using JSDelivr.
### Usage
1. Include the necessary libraries and the script in your HTML file:
html
Copy code
```html
Globe Visualizer
import { GlobeVisualizer } from 'https://cdn.jsdelivr.net/gh/codeandwander/nala-globe@latest/globe-visualizer.js';
document.addEventListener('DOMContentLoaded', () => {
const globeVisualizer = new GlobeVisualizer('globeViz');
});
#globeViz {
width: 100%;
height: 100vh;
display: block;
}
```
1. Ensure your JavaScript file (`globe-visualizer.js`) is available in your GitHub repository and correctly referenced in the import statement. Replace `yourusername` and `your-repo` with your actual GitHub username and repository name.
### How It Works
- **GlobeVisualizer Class**: The core of the visualization, initializing the globe, generating data, and managing animations.
- **getRandomLocation(region)**: Generates random coordinates within specified regions (US or Europe).
- **generateData()**: Creates arcs and particles data for the visualization.
- **createHeartParticleCanvas()**: Sets up the heart particle canvas using SVG data.
- **createParticle()**: Creates individual particles for animation.
- **resetParticles()**: Resets the particle animation.
- **handleParticles()**: Updates and draws particles on the canvas.
- **animateParticles()**: Handles the particle animation loop.
- **createHeartParticles()**: Creates heart-shaped particles for the 3D globe.
- **createWorld()**: Initializes the 3D globe with arcs and custom layers.
- **startParticleAnimationAtDestination()**: Starts particle animations at the target destinations.
- **loadLandData()**: Loads land data for the 3D globe.
- **addResetViewListener()**: Adds a listener to reset the globe's point of view after interaction.
### Customization
You can customize the behavior and appearance of the visualization by modifying the class properties and methods. For example, you can change the target locations, arc colors, particle shapes, and animation durations to fit your needs.
Contributing
------------
Contributions are welcome! Please fork the repository and submit pull requests for any features, bug fixes, or enhancements.
License
-------
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
---------------
- [Three.js](https://threejs.org/)
- [three-globe](https://github.com/vasturiano/three-globe)
- [TopoJSON](https://github.com/topojson/topojson)
Feel free to customize and expand this README as necessary for your project.