• How it works
• Required Software
• Getting started
  • Download this repository
  • Turn on the OBS WebSocket Server
  • Import Scene Collection
  • User Interface.
  • Create your own Visualization
• Examples
• Learn javaScript

keyboard and mouse visuals

Use javaScript to Visualize keyboard and mouse input in OBS.
Create graphics to highlight mouse position and Key presses.

If your learning to code and make art, use OBS to share your creative expressions through live streams, online meetings or recordings.

The examples in this repository feature P5.js and Cables.gl. Both are free and open source tools for making beautiful interactive content.

How it works

1. OBS captures keyboard and mouse input that happens anywhere on your computer.
2. Keyboard and Mouse events trigger an Advanced Scene Switcher macro that displays the event data in a Text Source.
3. A Browser Source with javaScript listens for update, and renders visualization

Required Software

OBS and the following plug-ins are required.

• Advanced Scene Switcher
• Move Transition
• Source Dock
• Source Clone
• Advanced Masks
• Composite Blur
• Stroke Glow Shadow

Note

macOS Installing plug-in note:

1. After Downloading a plug-in, expand the .zip file and in the expanded folder click to open the installer for your Mac.
2. A warning will appear that Apple could not verify the plug-in. Click the "Done" button
3. Go to System Settings,
   1. choose Privacy & Security settings.
   2. scroll to the bottom of the settings page.
   3. click "Open Anyway"

Getting started

Download this repository

1. After installing the OBS and the requisite plug-ins, download this repository.

1. Extract the .zip download

Turn on the OBS WebSocket Server

OBS includes a webSocket server. The webSocket server will allow the Browser Source to receive the Keyboard and Mouse event messages.

1. Turn on the WebSocKet Server, from the file menu select "Tools --> WebSocket Server Settings"

2. check the "Enable WebSocket server" setting

5. Click the "Show Connect Info Button" to get the WebSocket Server Password.
6. Navigate to the folder where extracted the "keyboard and mouse visuals" are saved.
7. Open the file /browser_Sources/obs_webSocket_details/websocketDetails.js a. Use a Text Editor, like VS Code, to open the file.
8. Enter the WebSocket Server Password. a. enter the password after "PW":"
9. Save the change to "websocketDetails.js"

Import Scene Collection

Use the file "Key_and_Mouse_Visuals_Collection.json" to configure OBS .

• In OBS, on the file menu click "Scene Collection --> Import"

• navigate to the file "Key_and_Mouse_Visuals_Collection.json", in the downloaded folder.

• Change to the imported Scene Collection. "Scene Collection --> Key_and_Mouse_Visuals_Collection"

• OBS will ask where the local webpages are located.

• click the "Search Directory..." button
• navigate to where this repo is saved on your computer.

User Interface.

The Source Dock Plug-in is used to display the Keyboard and Mouse values. Mouse Follow and Zoom controls allow switching the scene view.

Rearrange the docks however you'd like.

Create your own Visualization

The repo includes starter template to 
 - replace mouse input with eventListeners
 - add OBS WebSocket connection.  

Examples

Attribution for the examples used in this repo

• Key overlay
  • Space Type Generator "Stripes" by Kiel Mutschelknaus
• Mouse overlay
  • P5 js
    • soft body example
  • cables.gl
    • Fast Fluid V2
      • modified for OBS WebSocket Input
    • Procedural 2d fish
      • modified for OBS WebSocket Input

Learn javaScript

Recommendations for learning javascript with a creative coding approach

• https://thecodingtrain.com/
• https://www.pattvira.com/
• Intro to Cables GL