Tutorials › Mouse & Keyboard JS Mode

Mouse & Keyboard

Make interactive programs! Follow the mouse, respond to clicks, and use keyboard controls.

1

Following the Mouse

The built-in variables mouseX and mouseY always hold the current mouse position on the canvas. Use them to make shapes follow your cursor!
0 / 10 lines
Loading editor...
size(400, 300); } function draw() { background("white"); fill("dodgerblue"); noStroke(); circle(mouseX, mouseY, 30); }
Try it!

Try adding a second circle that follows the mouse but is offset by 50 pixels!

2

Drawing with the Mouse

Here's a trick: if you DON'T clear the background each frame, everything you draw stays on screen. Combine that with mouseIsPressed to make a simple drawing program!
0 / 12 lines
Loading editor...
size(400, 300); background("white"); } function draw() { if (mouseIsPressed) { fill("dodgerblue"); noStroke(); circle(mouseX, mouseY, 10); } }
3

Keyboard Controls

Use keyIsDown() to check if a key is currently held down. This is perfect for game controls because it works smoothly — no delays, and you can check multiple keys at once.
0 / 25 lines
Loading editor...
function setup() { size(400, 300); } function draw() { background("white"); if (keyIsDown("ArrowUp")) y -= 3; if (keyIsDown("ArrowDown")) y += 3; if (keyIsDown("ArrowLeft")) x -= 3; if (keyIsDown("ArrowRight")) x += 3; x = constrain(x, 15, width - 15); y = constrain(y, 15, height - 15); fill("mediumseagreen"); noStroke(); rect(x - 15, y - 15, 30, 30); fill(150); textSize(12); text("Use arrow keys to move!", 120, 280); }
4

Key Events

The keyPressed() function fires once each time a key goes down — unlike keyIsDown() which checks continuously. This is useful for things that should happen just once per press, like jumping or toggling something.
0 / 28 lines
Loading editor...
function setup() { size(400, 300); } function draw() { background("white"); noStroke(); for (let i = 0; i < circles.length; i++) { fill(circles[i].color); circle(circles[i].x, circles[i].y, circles[i].r); } fill(150); textSize(14); text("Press any key to add a circle!", 90, 280); } function keyPressed() { circles.push({ x: random(400), y: random(260), r: random(10, 40), color: "hsl(" + random(360) + ", 70%, 60%)" }); }
5

Putting It All Together

Let's combine mouse and keyboard input into one interactive sketch. You can click to place shapes and use the keyboard to change what gets placed!
0 / 38 lines
Loading editor...
let hue = 0; function setup() { size(400, 300); background(30); } function draw() { // HUD at the top fill(30); noStroke(); rect(0, 0, width, 30); fill("white"); textSize(12); text("Shape: " + shape + " | Press C/R/T to switch | Click to place", 10, 8); // Draw at mouse if pressed if (mouseIsPressed) { noStroke(); hue = (hue + 1) % 360; fill("hsl(" + hue + ", 80%, 60%)"); if (shape === "circle") { circle(mouseX, mouseY, 15); } else if (shape === "rect") { rect(mouseX - 10, mouseY - 10, 20, 20); } else { triangle(mouseX, mouseY - 12, mouseX - 12, mouseY + 8, mouseX + 12, mouseY + 8); } } } function keyPressed() { if (key === "c") shape = "circle"; if (key === "r") shape = "rect"; if (key === "t") shape = "triangle"; }

What to try next

  • Add an eraser mode that draws with the background color when you press E
  • Make a character that can move with WASD and shoot a projectile when you press Space
  • Create a color picker — use mouseX to control hue, mouseY to control brightness
  • Build a simple Etch A Sketch using arrow keys to move a drawing cursor
← Loops & RepetitionBuild a Game →