Skip to content

draw()

A function that's called repeatedly while the sketch runs.

Declaring the function draw() sets a code block to run repeatedly once the sketch starts. It’s used to create animations and respond to user inputs:

function draw() {
  -- Code to run repeatedly.
end

This is often called the "draw loop" because L5 calls the code in draw() in a loop behind the scenes. By default, draw() tries to run 60 times per second. The actual rate depends on many factors. The drawing rate, called the "frame rate", can be controlled by calling frameRate(). The number of times draw() has run is stored in the system variable frameCount.

Code placed within draw() begins looping after setup() runs. draw() will run until the user closes the sketch. draw() can be stopped by calling the noLoop() function. draw() can be resumed by calling the loop() function.

Examples

draw example 1

function setup()
  size(100, 100)

  -- Paint the background once.
  background(200)

  describe(
    'A white circle on a gray background. The circle follows the mouse as the user moves, leaving a trail.'
  )
end

function draw()
  -- Draw circles repeatedly.
  circle(mouseX, mouseY, 40)
end

draw example 2

function setup()
  size(100, 100)

  describe(
    'A white circle on a gray background. The circle follows the mouse as the user moves.'
  )
end

function draw()
  -- Paint the background repeatedly.
  background(200)

  -- Draw circles repeatedly.
  circle(mouseX, mouseY, 40)
end

draw example 3

-- Click the canvas to change the circle's color.
function setup()
  size(100, 100)

  describe(
    'A white circle on a gray background. The circle follows the mouse as the user moves. The circle changes color to pink when the user double-clicks.'
  )
end

function draw()
  -- Paint the background repeatedly.
  background(200)

  -- Draw circles repeatedly.
  circle(mouseX, mouseY, 40)
end

-- Change the fill color when the user clicks.
function mouseClicked()
  fill('deeppink')
end