draw.mdx

title	module	submodule	file	description	line	isConstructor	itemtype	example	class	chainable
draw	Structure	Structure	src/core/main.js	<p>A function that's called repeatedly while the sketch runs.</p> <p>Declaring the function <code>draw()</code> sets a code block to run repeatedly once the sketch starts. It’s used to create animations and respond to user inputs:</p> <pre><code class="language-js">function draw() { // Code to run repeatedly. } </code></pre> <p>This is often called the "draw loop" because p5.js calls the code in <code>draw()</code> in a loop behind the scenes. By default, <code>draw()</code> 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 <a href="/reference/p5/frameRate/">frameRate()</a>. The number of times <code>draw()</code> has run is stored in the system variable <a href="/reference/p5/frameCount/">frameCount</a>.</p> <p>Code placed within <code>draw()</code> begins looping after <a href="/reference/p5/setup/">setup()</a> runs. <code>draw()</code> will run until the user closes the sketch. <code>draw()</code> can be stopped by calling the <a href="/reference/p5/noLoop/">noLoop()</a> function. <code>draw()</code> can be resumed by calling the <a href="/reference/p5/loop/">loop()</a> function.</p>	176	false	method	<div> <code> function setup() { createCanvas(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.' ); } function draw() { // Draw circles repeatedly. circle(mouseX, mouseY, 40); } </code> </div> <div> <code> function setup() { createCanvas(100, 100); describe( 'A white circle on a gray background. The circle follows the mouse as the user moves.' ); } function draw() { // Paint the background repeatedly. background(200); // Draw circles repeatedly. circle(mouseX, mouseY, 40); } </code> </div> <div> <code> // Double-click the canvas to change the circle's color. function setup() { createCanvas(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.' ); } function draw() { // Paint the background repeatedly. background(200); // Draw circles repeatedly. circle(mouseX, mouseY, 40); } // Change the fill color when the user double-clicks. function doubleClicked() { fill('deeppink'); } </code> </div>	p5	false

draw