Chapter 1: Your First Sketch

Let's draw something! You'll have working code in 2 minutes.

The code editor

Below is a live code editor. The dark area on the left shows your code. The canvas on the right shows what your code creates. Try clicking on the code and changing the number 50 to 100:

fn setup() {
  size(400, 250)
}

fn draw() {
  background(white)
  fill(coral)
  circle(200, 125, 50)
}

See how the circle got bigger? That's because 50 is the radius — the size of the circle. You just wrote your first code change!

Understanding the code

Let's break down what each line means. Don't worry about memorizing this — you'll learn it naturally as you practice.

fn setup() { ... }

This creates a function called setup. A function is a group of instructions with a name. The setup function is special — Bloom runs it once when your program starts.

Inside setup, we have:

size(400, 250)

This creates a canvas that is 400 pixels wide and 250 pixels tall. Think of it as the "paper" you'll draw on.

fn draw() { ... }

The draw function is also special. Bloom runs it over and over — 60 times every second! This is what makes animations possible.

Inside draw, we have three instructions:

background(white)

Fills the entire canvas with white, erasing anything that was there before.

fill(coral)

Sets the color for shapes you're about to draw. coral is a warm orange-pink color. (You can also use red, blue, green, purple, yellow, and many more.)

circle(200, 125, 50)

Draws a circle. The three numbers are:

200 — The x position (how far from the left)
125 — The y position (how far from the top)
50 — The radius (half the width of the circle)

Coordinates in Bloom The top-left corner is position (0, 0). Moving right increases x. Moving down increases y.

Try it yourself

Now experiment! In the editor below, try:

Change coral to blue or purple
Change the circle position — make 200 smaller to move it left
Add another circle below the existing one

fn setup() {
  size(400, 300)
}

fn draw() {
  background(rgb(240, 240, 235))

  // A coral circle
  fill(coral)
  circle(200, 150, 60)

  // Try adding your own circle here!
  // Hint: copy the two lines above and change the numbers
}

Lines starting with // are comments Comments are notes for humans — Bloom ignores them completely. Use them to explain your code.

Troubleshooting

Nothing showing?
Make sure your circle is inside the canvas. If your canvas is 400 wide and your circle's x position is 500, it's off the right edge!

Shapes leaving trails?
You probably forgot background() at the start of draw(). Without it, old drawings stick around.

Red error message?
There's a typo somewhere. Check that you have matching parentheses () and curly braces {}. Bloom will try to tell you where the problem is.

What you learned

setup() runs once at the start
draw() runs 60 times per second
size(w, h) creates a canvas
background(color) clears the canvas
fill(color) sets the color for shapes
circle(x, y, radius) draws a circle

Previous: Welcome Next: Drawing Shapes