Click and drag the mouse to draw a line.
This example demonstrates the use of several built-in variables. mouseX and mouseY store the current mouse position, while the previous mouse position is represented by pmouseX and pmouseY. * This example also shows the use of colorMode with HSB (hue-saturation-brightness), so that the first variable sets the hue.
Drawing Lines: Revised by Darren Kessner. Edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: pre-2023 code, 2023 revision code. You can suggest improvements by contributing to the current website!
Related Examples
A squiggly rainbow line on a black background.
Drawing Lines
Draw with the mouse.
A small green circle on a black background.
Animation with Events
Pause and resume animation.
White circles on a black background, with varying degrees of transparency.
Mobile Device Movement
Animate based on device motion.
A small black circle on a rainbow, lattice-shaped path, on top of a grey and white striped background.
Conditions
Use if and else statements to make decisions while your sketch runs.