ReactiveOrb: An Interactive Orb Animation for REST API

Overview

This project is an experimental implementation that explores the interaction between REST APIs and advanced graphical animations using a dynamic orb (sphere). The sphere changes its appearance and behavior in real-time based on SignalR events received from the API, and responds to different HTTP methods invoked on the API (such as GET, POST, PUT, and DELETE).

The project uses WART to send SignalR messages from the backend REST API to the frontend, allowing the sphere to visually react to the API's state and the type of HTTP requests being processed.

Features

Real-Time Animation: The orb changes color and undergoes distortion effects based on incoming events.
SignalR Integration: Real-time communication between the backend REST API and the frontend is powered by SignalR.
Dynamic Color Change: Different HTTP methods (POST, GET, PUT, DELETE) are mapped to specific colors, which are displayed on the orb.
Interactive Visualization: The sphere responds to the frequency and type of events, creating an engaging visualization that simulates the backend activity.
Event-Driven Animation: The orb adapts its appearance as a reaction to changes in the API's state, with smooth transitions and a multi-color effect when multiple event types occur.

How It Works

SignalR Communication: The project leverages the SignalR library for real-time communication between the backend (REST API) and the frontend (React.js).
Backend - WART Integration: The backend REST API is configured to send SignalR messages using the WART library. Each HTTP request (POST, GET, PUT, DELETE) triggers a SignalR event that informs the frontend of the method type.
Frontend - React.js + Three.js: The frontend is built using React.js and Three.js. A 3D sphere (orb) is rendered and animated in the canvas, where:
- The color of the sphere changes based on the HTTP method used.
- Distortion and speed of the animation are adjusted dynamically, based on the frequency and type of events received.
Event-driven Animation: The orb reacts in real-time to events:
- Each event changes the sphere's color (e.g., POST turns it green, PUT turns it yellow, etc.).
- The distortion effect becomes more intense as more events are received, but is capped to prevent excessive distortion.
- If no events are received for a certain period (e.g., 5 seconds), the sphere returns to its original state.

Setup

Prerequisites

Before running the project, ensure you have the following installed:

Node.js (v16 or later)
npm or yarn
WART library (for backend integration)

Installation

Clone the repository:

git clone https://github.com/your-username/interactive-orb.git
cd interactive-orb

Install frontend dependencies:

npm install
# or if you're using yarn
yarn install

Set up the backend REST API to use WART for sending SignalR messages:
- Integrate WART into your backend application. Follow the instructions on the WART repository to configure SignalR communication.
Start the development server:
```
npm start
# or if you're using yarn
yarn start
```
The frontend will be available at http://localhost:3000.

Running the Backend (SignalR)

Set up and run the backend that emits SignalR messages (using the WART library) based on HTTP requests:
- Send events via SignalR for POST, GET, PUT, and DELETE requests.
- The frontend will react to these events, updating the orb accordingly.

Libraries Used

React.js: Frontend library for building the user interface.
Three.js: 3D rendering library used to create the animated sphere.
SignalR: Real-time web functionality for pushing events from the backend to the frontend.
WART: Library for sending SignalR messages from the REST API (backend).

Example Usage

Send a POST request to the backend:
- The sphere will turn green (associated with POST).
- Distortion and intensity increase, depending on the frequency of events.
Send a PUT request to the backend:
- The sphere will turn yellow (associated with PUT).
- The distortion effect changes accordingly.
The sphere will dynamically adjust as different events are sent.

Contributing

Thank you for considering to help out with the source code! If you'd like to contribute, please fork, fix, commit and send a pull request for the maintainers to review and merge into the main code base.

Getting started with Git and GitHub

Setting up Git
Fork the repository
Open an issue if you encounter a bug or have a suggestion for improvements/features

Licensee

ReactiveOrb source code is available under MIT License, see license in the source.

Contact

Please contact at francesco.delre[at]protonmail.com for any details.

engineering87 / reactive-orb