From the very beginning, students are learning to produce visual results with their code. We start with paper and pencil and graphing on paper. Students write simple programs on paper and learn to predict what the computer will do.

**Then** they move to writing code on the computer as they advance learning about color, geometry, and animation. After the basics, learners are introduced to more advanced concepts such as conditionals, functions, loops, and arrays. They are taught how to organize larger bodies of code and learn better how to express their ideas through code.

```
var x,y;
var left_edge=0, top_edge=0, right_edge=400, bottom_edge=400;
var xdir = 1, ydir = 1;
function setup() {
createCanvas(400, 400);
x=50;
y=30;
}
function draw() {
background(255,255,255);
fill(255,255,255);
rect(0,0,400-1,400-1);
fill(255,0,0);
ellipse(x, y, 20, 20);
x = x + 2*xdir;
y = y + 5*ydir;
if(x > right_edge) {
xdir = xdir * -1;
x = right_edge;
}
if(x < left_edge) {
xdir = xdir * -1;
x = left_edge;
}
if(y > bottom_edge) {
ydir = ydir * -1;
y = bottom_edge;
}
if(y < top_edge) {
ydir = ydir * -1;
y = top_edge;
}
}
```