---

layout: default

---

<h3>SetupDraw</h3>

<p>The draw() function creates a structure in which

to write programs that change with time.</p>

<p><a href="http://processing.org/learning/basics/setupdraw.html">Original Processing.org Example: SetupDraw</a><br>

<div class="learning-demo"><script type="application/processing">

void setup()

size(200, 200); // Size should be the first statement

stroke(255); // Set line drawing color to white

frameRate(30);

float y = 100;

void draw()

{

background(0); // Set the background to black

y = y - 1;

if (y < 0) { y = height; }

line(0, y, width, y);

</script><canvas width="200" height="200"></canvas></div></p>

<div style="height:0px;width:0px;overflow:hidden;"></div>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>

// unless otherwise stated.

// The statements in the setup() function

// execute once when the program begins

void setup()

{

size(200, 200); // Size should be the first statement

stroke(255); // Set line drawing color to white

frameRate(30);

}

float y = 100;

// The statements in draw() are executed until the

// program is stopped. Each statement is executed in

// sequence and after the last line is read, the first

// line is executed again.

void draw()

{

background(0); // Set the background to black

y = y - 1;

if (y &lt; 0) { y = height; }

line(0, y, width, y);

}</pre></div>