Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Mouse and Keyboard Input | Transformations and Interactivity
Generative Art with JavaScript and P5.js

bookMouse and Keyboard Input

index.html

index.html

copy

You can make your P5.js sketches interactive by responding to mouse and keyboard events. Two built-in variables, mouseX and mouseY, always contain the current position of the mouse cursor within the canvas. These variables update automatically as the mouse moves, allowing you to draw shapes that follow the mouse or react to its position.

To respond to keyboard input, P5.js provides special functions like keyPressed(). This function is called automatically whenever you press any key. By placing code inside keyPressed(), you can change colors, move objects, or trigger any behavior you want in response to a key press.

This style of programming, where your code reacts to user actions such as moving the mouse or pressing a key, is called event-driven programming. Instead of following a fixed sequence, your sketch waits for events and responds to them, making your art interactive and engaging.

question mark

Which variables in P5.js provide the current position of the mouse?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

bookMouse and Keyboard Input

Veeg om het menu te tonen

index.html

index.html

copy

You can make your P5.js sketches interactive by responding to mouse and keyboard events. Two built-in variables, mouseX and mouseY, always contain the current position of the mouse cursor within the canvas. These variables update automatically as the mouse moves, allowing you to draw shapes that follow the mouse or react to its position.

To respond to keyboard input, P5.js provides special functions like keyPressed(). This function is called automatically whenever you press any key. By placing code inside keyPressed(), you can change colors, move objects, or trigger any behavior you want in response to a key press.

This style of programming, where your code reacts to user actions such as moving the mouse or pressing a key, is called event-driven programming. Instead of following a fixed sequence, your sketch waits for events and responds to them, making your art interactive and engaging.

question mark

Which variables in P5.js provide the current position of the mouse?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 2. Hoofdstuk 2
some-alt