Non-OBS Script Keyboard and Mouse Visualization 0.0.1

javaScripts to visualize mouse position and key presses.

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

How it works​

1. OBS hotkeys capture 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 changes and renders the 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"

Click to expand...

Getting started​

Download this repository​

1. After installing OBS and the requisite plug-ins, download this repository.
2. 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

Click the "Show Connect Info Button" to get the WebSocket Server Password.

1. Navigate to the folder where extracted the "keyboard and mouse visuals" are saved.
2. Open the file /browser_Sources/obs_webSocket_details/websocketDetails.js
3. Enter the WebSocket Server Password.
   • enter the password after "PW":"
4. 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.

[!NOTE] Rearrange the docks however you'd like.

Click to expand...

Create your own Visualization​

The repo includes a 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​

Example of mouse visualizations created with javaScript libraries.

• cables.gl Fast Fluid V2
  • modified for OBS WebSocket Input

Procedural 2d fish

• modified for OBS WebSocket Input

• P5 js soft body example

Follow and Zoom to Mouse​

The Follow and Zoom to Mouse Visualizations are created using javaScript to control the OBS Plug-ins Advanced Mask and Move Transition.

Follow Mouse


Zoom and Follow Mouse

Learn javaScript​

Recommendations for learning javascript with a creative coding approach

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