{"id":43705095,"url":"https://github.com/zeropaper/visual-fiha","last_synced_at":"2026-02-05T05:39:31.904Z","repository":{"id":40296424,"uuid":"14279932","full_name":"zeropaper/visual-fiha","owner":"zeropaper","description":"An HTML5 based VJing tool for creative and live coders.","archived":false,"fork":false,"pushed_at":"2025-08-28T13:26:14.000Z","size":214572,"stargazers_count":19,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-28T20:52:05.337Z","etag":null,"topics":["google-chrome","live-coding","livecoding","visuals","vjing"],"latest_commit_sha":null,"homepage":"https://visual-fiha.zeropaper.style","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeropaper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2013-11-10T16:46:45.000Z","updated_at":"2025-08-28T13:28:16.000Z","dependencies_parsed_at":"2023-12-22T13:54:24.546Z","dependency_job_id":"8ed619e5-1bc1-4bb4-b476-ec829692c5bb","html_url":"https://github.com/zeropaper/visual-fiha","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/zeropaper/visual-fiha","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeropaper%2Fvisual-fiha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeropaper%2Fvisual-fiha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeropaper%2Fvisual-fiha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeropaper%2Fvisual-fiha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeropaper","download_url":"https://codeload.github.com/zeropaper/visual-fiha/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeropaper%2Fvisual-fiha/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29113891,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T05:31:32.482Z","status":"ssl_error","status_checked_at":"2026-02-05T05:31:29.075Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["google-chrome","live-coding","livecoding","visuals","vjing"],"created_at":"2026-02-05T05:39:27.964Z","updated_at":"2026-02-05T05:39:31.897Z","avatar_url":"https://github.com/zeropaper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Visual Fiha - Browser Version\n\nThe system is a browser-based creative coding platform designed to facilitate the creation of interactive visual experiences.\nIt allows users to create and manage projects using JavaScript, WebGL, CSS, and MIDI controllers.\n\nThe first version of Visual Fiha was created by [zeropaper](https://github.com/zeropaper) in 2014 as the W3C announced the MIDI API support in browsers.\nIt was a browser-based creative coding platform that allowed users to create interactive visual experiences using JavaScript, WebGL, CSS, and MIDI controllers.\nIn a later version, the project was rewritten to be a VS Code extension, which provided a more integrated development environment for users to create and manage their projects.\nThe extension version had some adavntages (like deeper integration with the editor) but some of the key features like latency of real time audio processing became unacceptably high, the MIDI support (not even implemented, would have suffered the same latency issue).\n\nThis third version of Visual Fiha is, again, a browser-based version of the system with some radical changes in the architecture.\n\n\u003e **Note**: The codebase has been recently reorganized for better maintainability. See the [migration guide](docs/migration-guide.md) for details about the structural changes.\n\n## Architecture\n\nSee the [messaging architecture](docs/architecture/messaging.md) for a high-level overview of the messaging and worker architecture, and the [project structure](docs/project-structure.md) for detailed information about code organization.\n\n### Scriptables\n\nScriptables are objects that have 2 code properties (and some methods):\n- `setup`: Is a script called once when the scriptable is created. It is used to initialize the scriptable.\n- `update`: Is a script that is called every frame. It is used to update the scriptable.\n\n### Controls\n\nThe controls provide the user interface for interacting with and observing the different components (inputs, signals, layers, displays) of the Visual Fiha system. The controls are implemented as a React application with a modular feature-based architecture:\n\n**Core Structure:**\n- **Control Display**: A canvas-based visual representation of the current state\n- **Script Editor**: Monaco Editor integration for editing setup and animation scripts\n- **Layer Management**: Interface for creating, reordering, and configuring layers\n- **Input Management**: Configuration and monitoring of input sources\n- **Display Management**: Control and monitoring of connected display windows\n- **Timeline**: Visual timeline interface (planned feature)\n- **Console**: Output and debugging information\n- **Graph view**: Visual representation of the data flow (planned feature)\n\n**Architecture:**\n- `src/controls/` - Main controls application structure\n  - `ControlsApp.tsx` - Main application component\n  - `Controls.worker.ts` - Web Worker for controls logic\n  - `features/` - Feature-based component organization\n  - `contexts/` - React contexts for state management\n  - `hooks/` - Custom React hooks\n\n#### Inputs\n\nInputs are the primary data sources for the Visual Fiha system.\nThey can be anything from MIDI controllers, microphone, audio line-in, key presses, absolute or relative time, mouse movements to web socket streams.\n(#scriptables) charged of processing the data from inputs.\n\n#### Layers\n\nLayers are [scriptables](#scriptables) that render visual content. The system currently supports two types:\n- **Canvas layers**: 2D graphics rendering using the Canvas 2D API\n- **ThreeJS layers**: 3D graphics rendering using the Three.js library\n\nEach layer has:\n- **Setup script**: Executed once when the layer is created or modified\n- **Animation script**: Executed every frame for real-time updates\n- **Opacity control**: Adjustable transparency (0-100%)\n- **Active state**: Can be enabled/disabled\n- **Reordering**: Layers can be dragged to change render order\n\n**Layer Management:**\n- Located in `src/controls/features/Layers/`\n- Individual layer implementations in `src/layers/Canvas2D/` and `src/layers/ThreeJS/`\n- Layer scripts are transpiled in real-time using TypeScript\n\n\n\n### Main Worker\n\nThe application state is managed in the Controls Worker (`src/controls/Controls.worker.ts`) and consists of:\n- **inputs**: Configuration and state of input sources (MIDI, audio, time, etc.)\n- **signals**: Array of signal processing objects (planned feature)\n- **layers**: Array of visual layer objects with their scripts and configuration\n- **displays**: Array of connected display windows and their properties\n- **worker**: Global setup and animation scripts\n- **data**: Runtime data from inputs and computed values\n\nThe Controls Worker is responsible for:\n- Managing the overall application configuration\n- Processing raw input data (MIDI, audio, time)\n- Coordinating script transpilation via TypeScript worker\n- Broadcasting runtime data to display workers\n- Handling display registration and management\n\n**Communication:**\n- Uses BroadcastChannel API for cross-context messaging\n- Communicates with main thread via standard Worker postMessage\n- Coordinates with TypeScript transpiler worker for script compilation\n\n### Displays\n\nDisplays are separate web pages that render the visual output of the Visual Fiha system. They can be opened in different windows, shown fullscreen, and positioned across multiple monitors.\n\n**Display Architecture:**\n- Each display runs in its own `Display.worker.ts` Web Worker\n- Displays register themselves via BroadcastChannel when opened\n- Real-time layer rendering with compositing and opacity control\n- Independent canvas-based rendering pipeline\n\n**Display Features:**\n- **Multi-window support**: Each display can be positioned independently\n- **Layer composition**: Renders layers in order with proper opacity blending\n- **Real-time updates**: Receives live configuration and data updates\n- **Worker isolation**: Each display worker runs independently for performance\n\n**Implementation:**\n- Main display logic in `src/display/Display.worker.ts`\n- Display management in `src/display/Display.ts`\n- State management via `src/display/displayState.ts`\n\nWhen a display window is opened, it automatically registers with the system using the BroadcastChannel API, and the controls interface updates to show the new display in the management panel.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeropaper%2Fvisual-fiha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeropaper%2Fvisual-fiha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeropaper%2Fvisual-fiha/lists"}