# Venixxino: Interactive 3D Atomic Structure Visualizer

Venixxino is an educational web application designed to help visualize the electronic configurations of the first 20 elements of the periodic table. Using interactive 3D graphics powered by A-Frame, you can explore how electrons are arranged in shells around the nucleus for each element, making abstract chemistry concepts engaging and accessible.
(Also, the name makes no sense, just sounded cool)

## Preview Website
[![Preview Website](https://img.shields.io/badge/Preview-GitHub%20Pages-blue?logo=github)](https://V-Play-Games.github.io/Venixxino/)

## Demo Video
[![Demo Video](https://img.shields.io/badge/Watch%20Demo-Video-blue)](https://hc-cdn.hel1.your-objectstorage.com/s/v3/24dcd1fdd07d0a0d610442f9644a863098ddb4ad_screen_recording_2025-06-26_003738.mp4)

## Demo Screenshots

![Screenshot 1](https://hc-cdn.hel1.your-objectstorage.com/s/v3/a08014e964f0473e7b488a15c7d725d6442c8c7a_screenshot_2025-06-26_003530.png)

![Screenshot 2](https://hc-cdn.hel1.your-objectstorage.com/s/v3/4c6d60f2924dd35bb09063e369c949272d88871b_screenshot_2025-06-26_003618.png)

![Screenshot 3](https://hc-cdn.hel1.your-objectstorage.com/s/v3/7e3e3cf246abd9369b477e5ac6ccb1b8ddb6bc83_screenshot_2025-06-26_003548.png)

## Features
- **Interactive 3D Atom Viewer:** Visualizes atoms with animated electron orbits and labeled nucleus, allowing users to explore atomic structures from any angle.
- **Complete Element Coverage:** Explore all elements from Hydrogen (1) to Calcium (20) with accurate electronic configurations.
- **Dynamic Electron Animations:** Watch as electrons smoothly transition when changing elements, with visually pleasing animations that illustrate how electron shells fill.
- **Educational Labels:** Displays the element's name, symbol, atomic number, neutron count, proton count, and electronic configuration directly in the 3D scene.
- **Customizable Environment:** Choose from 18 different immersive 3D environments including Forest, Moon, Egypt, Tron, and more.
- **Informative Fun Facts:** Reveals interesting facts about each element when selected, making learning more engaging.
- **Adjustable Electron Speed:** Control the animation speed of electrons for better visualization and understanding.
- **Intuitive Camera Controls:** Easily orbit, pan, and zoom to explore atoms from any perspective.
- **Interactive Sidebar:** Clean, collapsible interface that doesn't interfere with the visualization experience.
- **Educational Value:** Perfect teaching tool for chemistry students to understand electronic structure.
- **Kid-Friendly UI:** Simple controls and clear visuals make complex topics accessible to young learners.

## How It Works
- The sidebar on the top right lets users select an element and change the environment.
- The main 3D scene shows:
  - A nucleus at the center.
  - Electron shells (rings) and animated electrons orbiting the nucleus.
  - Text above the nucleus with the element's name and symbol.
  - Text in front of the nucleus showing the number of electrons and the electronic configuration.
- All visualizations update instantly when a new element is selected.

## Technologies Used
- [A-Frame](https://aframe.io/) for 3D rendering and animation
- HTML, CSS, and JavaScript for UI and logic

## License
This project is for educational and non-commercial use.