') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - Vlarkus/HyperViewer · GitHub
Skip to content
BranchesTags

Repository files navigation

HYPERVIEWER: 5D Ballistic Solution Space Visualizer

An interactive 5D visualization tool designed for exploring complex multidimensional ballistic solution spaces, specifically designed for FTC (First Tech Challenge) Decode season.

Example

HYPERVIEWER Example 1HYPERVIEWER Example 2

Features

  • Multidimensional Exploration: Visualize 5+ independent variables simultaneously using XYZ, Color, Size, Opacity.
  • Interactive 3D Environment: Powered by React Three Fiber (R3F) for high-performance rendering.
  • Lattice & Volumetric Mesh:
    • Lattice Connections: View relationships along specific dimensions.
    • 3D Volumetric Mesh: Render a solid semi-transparent volume representing the entire sampled space.
  • Advanced Slicing & Filtering:
    • Pinpoint Mode: Slice through dimensions at specific values.
    • Range Mode: Filter data within manual bounds.
    • Opacity Fading: Soft-fades points and lines at the edges of your filters for clear context.
  • Dual Camera Control:
    • Orbit Mode: Intuitive rotation around the data center.
    • Free View: FPS-style movement (WASD + Mouse) with pointer lock for immersive exploration.

Getting Started

Prerequisites

Installation

  1. Clone the repository:

    git clone https://github.com/Vlarkus/FTC-Complete-shooting-solution-space-visualizer.git
cd FTC-Complete-shooting-solution-space-visualizer

  2. Install dependencies:

    npm install

  3. Run the development server:

    npm run dev

  4. Open in browser: Navigate to http://localhost:5173 (or the port specified in your terminal).

How to Use

  1. Sidebar (Left):
    • Axes: Change which variables are mapped to the spatial axes (X, Y, Z) and the color axis (C).
    • Variables: Use sliders to "slice" through dimensions. Toggle "Show All" to see the full range or enable "Opacity Filtering" for soft transitions.
  2. Panels (Right):
    • Cam: Switch between Camera modes and adjust movement speed.
    • Grid: Adjust the visualization box size and step intervals.
    • Display: Change point sizes, line thicknesses, color gradients, and toggle special features like the Volumetric Mesh.
  3. Shortcuts:
    • Free View: Click the canvas to lock the mouse. Use WASD to move, Space to rise, and Shift to lower. Press ESC to unlock.

Tech Stack

  • React + Vite
  • Three.js (@react-three/fiber, @react-three/drei)
  • Zustand (State Management)
  • Tailwind CSS (Styling)
  • Lucide React (Icons)

Made by Vlarkus :)

About

No description, website, or topics provided.

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages