Skip to content

feat: added keyboard compatibility shim for p5.js v1.x -> v2.x#34

Open
kunstewi wants to merge 7 commits intoprocessing:mainfrom
kunstewi:keyboard-compatibility
Open

feat: added keyboard compatibility shim for p5.js v1.x -> v2.x#34
kunstewi wants to merge 7 commits intoprocessing:mainfrom
kunstewi:keyboard-compatibility

Conversation

@kunstewi
Copy link

@kunstewi kunstewi commented Feb 22, 2026

Background

p5.js v2.x dropped several legacy keyboard APIs that many existing sketches depend on specifically the named numeric keyCode constants (e.g. LEFT_ARROW, RIGHT_ARROW) and the event.keyCode property on keyCode. This PR adds a compatibility shim inside src/data.js that transparently restores that behavior so v1.x sketches run on v2.x without any source changes.

A v1.x sketch like this:

function draw() {
  background(220);
  if (keyCode === RIGHT_ARROW) background(0);
  else if (keyCode === LEFT_ARROW) background(100);
}

silently breaks on v2.x because:

  • RIGHT_ARROW, LEFT_ARROW, etc. are no longer defined globals
    keyCode no longer holds the legacy numeric value (v2.x uses string-based key/code)

  • keyIsDown() only accepts the new string format.

Changes Made

  • p5.prototype.LEFT_ARROW = 37 (+ 13 others) - Restores the 14 legacy named key constants as globals.
  • CODE_TO_KEYCODE lookup table - Maps modern event.code strings → legacy numeric keyCodes as a fallback.
  • fn._onkeydown override - Resolves and writes the correct numeric keyCode onto the p5 instance on every keydown; tracks held keys in _pressedKeyCodes
  • fn._onkeyup override - Mirror of _onkeydown removes key from the pressed-keys set on release.
  • fn.keyIsDown override - Lets keyIsDown()accept both numeric (v1.x: keyIsDown(37)) and string (v2.x: keyIsDown('ArrowLeft')) arguments.

The overrides all delegate to the original v2.x handlers after patching, so no existing v2.x behavior is broken.

Testing

  • made a temporary test.html where i imported p5 minified 2.x version and linked the data.js file to test things out.
  • I have created a new repo where you can find the test.html file and test things out. here
  • or you can check the live html website here. click on the canvas to focus then use right and left arrow key to see the changes.

without the keyboard compatibility code

tests not passing
Screenshot 2026-02-22 at 3 01 51 PM

example code not working
https://github.com/user-attachments/assets/fd9ec047-ce15-452e-836d-97e4ea12498e

with the kyboard compatibility code

tests passing
Screenshot 2026-02-22 at 3 03 52 PM

example code working

Screen.Recording.2026-02-22.at.3.04.06.PM.mov

AI disclosure

  • used antigravity to find problems and propose solutions
  • generated code using claude opus 4.6 thinking
  • reviewed and tested code before pushing

closes #26

hey @ksen0 could you please take a look, and propose changes or let me know if i am moving in the right direction.

Thanks for your time.

@kunstewi kunstewi changed the title Keyboard compatibility Add keyboard compatibility shim for p5.js v1.x → v2.x Feb 22, 2026
@kunstewi kunstewi changed the title Add keyboard compatibility shim for p5.js v1.x → v2.x Added keyboard compatibility shim for p5.js v1.x → v2.x Feb 22, 2026
@kunstewi kunstewi changed the title Added keyboard compatibility shim for p5.js v1.x → v2.x feat: added keyboard compatibility shim for p5.js v1.x -> v2.x Feb 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add compatibility for keyboard events (keyCode constants) to data.js

1 participant