p5.js loop() Function

Last Updated : 16 Aug, 2023

The loop() function is used to call draw() function continuously. The loop() function can be stopped using noLoop() function.

Syntax:

loop()

Below example illustrates the loop() function in p5.js:

Example:

let l = 0; 
  
function setup() { 
    
  // Create canvas of given size 
  createCanvas(500, 300); 
    
  // Set the background color 
  background('green'); 
  
} 
  
function draw() { 
    
  // Set the stroke color 
  stroke('white'); 
    
  l = l + 0.5; 
  if (l > width) { 
    l = 0; 
  } 
    
  // Function to draw the line 
  line(l, 0, l, height); 
    
} 
  
function mousePressed() { 
  noLoop(); 
} 
  
function mouseReleased() { 
  loop(); 
} 

Output:

Online editor: https://editor.p5js.org/
Environment Setup: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Suggest improvement

p5.js noLoop() Function

p5.js isLooping() Function

Share your thoughts in the comments

p5.js Environment

p5.js Color

p5.js Shape

p5.js Constants and Structure

p5.js DOM and Rendering

p5.js Transform

p5.js Data

p5.js Events

p5.js Image

p5.js IO

p5.js Math

p5.js Typography

p5.js Lights, Camera