Welcome to Bloom

Make art with code. No experience needed.

Mistakes Everyone Makes

These are totally normal! Every programmer makes these mistakes at first. Here's how to spot and fix them.

// Not sure why your circle is off-screen?
print("x is: " + x)  // See the actual value!
print("y is: " + y)

Your First Sketch

Let's build your first program together, step by step. Don't worry about memorizing anything - just follow along and experiment!

fn setup() {
  size(200, 200)  // Makes a 200x200 pixel canvas
}

fn draw() {
  background(white)  // Clear with white
  // Your drawing code goes here
}

fill(blue)           // Set the fill color
circle(100, 100, 40) // Draw circle at center

Here's the complete program. Try changing the numbers and colors!

The circle(100, 100, 40) draws a circle at position (100, 100) with a radius of 40. Try changing 100, 100 to move it around, or change 40 to make it bigger or smaller.

Understanding the Canvas

Move your mouse or finger over the canvas below to see the coordinates:

Tip: If a shape disappears, it might be outside the canvas boundaries. Check that your x is between 0 and the canvas width, and y is between 0 and the height.

Beginner Shapes

Bloom gives you a handful of basic shapes to work with. Each shape needs different information to know where and how big to draw itself.

Circles and Ellipses

A circle needs a center point (x, y) and a radius. An ellipse is like a stretched circle - it needs a center point plus width and height.

Rectangles

A rect needs a top-left corner (x, y), then width and height.

Lines and Triangles

Lines go from one point to another. Triangles need three corner points.

Quadrilaterals

A quad is any four-sided shape. You give it four corner points (8 numbers total). Unlike rectangles, the corners don't have to form right angles.

Beginner Colors

Bloom comes with a set of named colors you can use right away. Just type the name!

More colors: rose, tomato, amber, honey, jade, sage, lime, azure, cobalt, indigo, lavender, plum, peach, cream, ivory, beige, and many more! See the Reference for the full list.

Custom Colors with RGB

Want more control? Use rgb() to mix your own colors by combining Red, Green, and Blue light.

Transparency

Add a fourth number to rgba() for transparency. It goes from 0 (invisible) to 1 (solid).

HSB Colors (Hue, Saturation, Brightness)

Sometimes it's easier to think about colors in a different way. hsb() lets you describe colors using Hue (which color), Saturation (how vivid), and Brightness (how light/dark).

The top row shows different hues (colors around the rainbow). The bottom row shows the same blue with increasing saturation (from gray to vivid blue).

Modifying Colors

Bloom provides functions to adjust any color. These work with named colors or custom colors:

Color Harmony

Use color theory to find colors that look good together. These functions return colors that are harmonious with your starting color:

Color Palettes

Bloom includes pre-made color palettes - collections of colors that look good together. Perfect for quickly making beautiful art without picking colors yourself!

Available palettes: sunset, ocean, forest, candy, neon, pastel, earth, jewel, autumn, winter, retro, midnight, tropical, nordic, desert, cherry, lavender, mint

Styling

Shapes have two parts: the fill (inside color) and the stroke (outline). You can control both independently.

Use noFill() to draw just the outline, or noStroke() to draw without an outline.

fill(red)
circle(50, 100, 20)   // Red
circle(100, 100, 20)  // Still red!

fill(blue)
circle(150, 100, 20)  // Now blue

noFill()
circle(200, 100, 20)  // No fill - just outline
circle(250, 100, 20)  // Still no fill!

Text Styling

You can customize how text looks with a few functions:

text("Hello", 10, 50)  // Baseline is at y=50, text appears ABOVE this line

Beginner Variables

Variables let you store values and use them later. Create one with let and give it a name.

Try changing the values of x and radius at the top. Variables make it easy to adjust your sketch without hunting through all the code.

fn draw() {
  let x = 0  // Oops!
  x = x + 1
  circle(x, 100, 20)
}

let x = 0  // Outside!

fn draw() {
  x = x + 1
  circle(x, 100, 20)
}

Intermediate Animation

Here's where it gets fun. Since draw() runs over and over, you can change values each frame to create motion.

Each frame, we add 2 to x, making the circle move right. When it goes past the edge, we reset it to 0.

The Frame Counter

Bloom gives you a built-in variable called frame - a counter that starts at 0 and increases by 1 every time draw() runs.

Try adding text("Frame: " + frame, 10, 20) to any sketch to watch the counter grow!

Smooth Motion with sin() and cos()

Combined with sin() and cos(), the frame counter creates smooth, looping motion.

Animation Helper Functions

Bloom provides shortcuts for common animation patterns. These are easier to use than raw sin() and cos() - just pick the one that matches the motion you want!

Easing Functions

Control how animations speed up and slow down. These take a value from 0 to 1 and return a modified value (also 0 to 1):

Making Decisions

Programs can make choices using if. If a condition is true, the code inside the braces runs.

The circle changes color when it passes the middle of the canvas.

if score > 90 {
  fill(green)      // Great score!
} else if score > 70 {
  fill(yellow)     // Good score
} else {
  fill(red)        // Needs improvement
}

Intermediate Loops

Loops let you repeat things without writing the same code over and over. A for loop is perfect for drawing patterns.

for i in 5..5 { print(i) }  // Prints nothing - the range is empty!

for i in 5..0 { print(i) }  // Prints nothing - can't count backwards!

// To count down, you can do math instead:
for i in 0..5 {
  let n = 4 - i  // n goes 4, 3, 2, 1, 0
  print(n)
}

The loop runs 5 times. Each time, i takes the next value (0, then 1, then 2...). We use i to position each circle differently.

Nested Loops

Put a loop inside a loop to create grids. The inner loop runs completely for each step of the outer loop:

Looping Over Arrays

You can also loop directly over the items in an array using for item in array:

let colors = [red, green, blue]
for i in 0..len(colors) {
  fill(colors[i])  // i = 0, 1, 2
  circle(50 + i * 40, 100, 15)
}

let colors = [red, green, blue]
for color in colors {
  fill(color)  // color = red, then green, then blue
  circle(50, 100, 15)
}

The grid() Helper

For grids, Bloom provides a grid() helper function that handles the math for you:

grid(cols, rows, cellWidth, cellHeight, fn(col, row, x, y) {
  // col = column number (0, 1, 2...)
  // row = row number (0, 1, 2...)
  // x, y = center position of this cell
  circle(x, y, 10)
})

grid() is a shortcut for nested loops. It calculates the center x,y position of each cell for you.

While Loops

A while loop keeps running as long as a condition is true. Use it when you don't know how many times you need to repeat:

let x = 0
while x < 200 {
  circle(x, 100, 10)
  x = x + 30  // Move right each time
}
// Draws circles until x reaches 200

Shortcut: x++ and x--

Instead of writing x = x + 1, you can use x++ as a shortcut:

let count = 0
count++      // Same as: count = count + 1 (now count is 1)
count++      // count is now 2
count--      // Same as: count = count - 1 (now count is 1)

Functions

When you find yourself writing the same code in multiple places, it's time to make a function. Functions bundle up code so you can reuse it.

Now you can draw flowers anywhere by just calling flower(x, y). Try adding more flowers or changing the flower function.

Returning Values

Functions can also send back (return) a value. Use return to give back the result:

Arrays (Lists)

An array is a list that holds multiple values. Perfect for storing collections of things like positions, colors, or scores.

let colors = [red, blue, green]
let scores = [10, 25, 42, 8]
let empty = []  // An empty array

Accessing Items

Get items by their position (called "index"). Remember: counting starts at 0!

let colors = [red, blue, green]  // Has indices 0, 1, 2
colors[5]   // nil - index 5 doesn't exist!
colors[-1]  // nil - negative indices don't work

let colors = [red, blue, green]
let last = colors[len(colors) - 1]  // green (the last item)

Array Functions

range(5)        // [0, 1, 2, 3, 4] - 5 numbers starting at 0
range(2, 6)     // [2, 3, 4, 5] - from 2 up to (not including) 6
range(0, 10, 2) // [0, 2, 4, 6, 8] - count by 2s

let nums = [1, 2, 3]
push(nums, 4)       // nums is now [1, 2, 3, 4]

let last = pop(nums)  // last = 4, nums is now [1, 2, 3]

Building Arrays Dynamically

You can create an empty array and add items as your program runs:

Objects (Grouped Data)

An object lets you group related values together with labels. Think of it as a labeled container - instead of numbered slots (like arrays), each value has a name.

let colors = ["red", "blue", "green"]
colors[0]  // "red" - first item

let ball = {x: 100, y: 50, size: 20}
ball.x     // 100 - the x value

Creating Objects

Use curly braces { } with name: value pairs:

let player = {
  x: 100,
  y: 100,
  speed: 5,
  color: blue
}

Accessing Values

Use a dot . followed by the property name:

Changing Values

You can update object properties just like variables:

Adding New Properties

You can add new properties to an object at any time:

let ball = {x: 100, y: 100}
ball.speed = 5    // adds a new "speed" property
ball.color = red  // adds a new "color" property

When to Use Objects

Objects are perfect when you have related data that belongs together:

• Position: {x: 100, y: 50}
• Circle: {x: 100, y: 50, radius: 20, color: red}
• Player: {x: 0, y: 0, speed: 5, score: 0}

Strings (Text)

A string is text wrapped in quotes. You can combine, split, and transform strings.

Creating Strings

let name = "Bloom"
let greeting = "Hello, world!"

String Interpolation

Put variables inside strings using {curly braces}:

let x = 100
let y = 50
print("Position: {x}, {y}")  // Prints: Position: 100, 50

let a = 5
print("Double: {a * 2}")  // Prints: Double: 10

Combining Strings

Use + to join strings together:

let first = "Hello"
let second = "World"
let message = first + " " + second  // "Hello World"

"Score: " + 42       // "Score: 42"
"Position: " + x + ", " + y  // "Position: 100, 50"

5 + 3           // 8 (math - both are numbers)
"5" + "3"       // "53" (text - joins strings)
"Score: " + 5   // "Score: 5" (text - number becomes string)

Accessing Characters

Get individual characters using bracket notation, just like arrays:

let word = "BLOOM"
word[0]   // "B" - first character (index 0)
word[1]   // "L" - second character
word[4]   // "M" - fifth character (index 4)

let word = "hello"
word[0]         // "h" - this works (reading)
word[0] = "H"   // ERROR - can't modify strings like this

String Functions

Mouse & Touch

Bloom tracks the mouse position in two variables: mouseX and mouseY. You can also check if the mouse button is pressed with mousePressed.

Move your mouse (or finger) over the canvas. Tap or click to change the color.

Drawing App

Here's a simple drawing program. Notice we removed background() from draw, so each frame builds on the last.

Multi-Touch (Advanced)

For tablets and phones, Bloom can track multiple fingers at once using the touches array. Each touch point has x, y, and id properties.

On desktop with a mouse, touches contains one point when clicking and is empty otherwise. Use mouseX/mouseY for desktop mouse tracking.

for touch in touches {
  touch.x   // x position of this finger
  touch.y   // y position of this finger
  touch.id  // unique number for tracking this finger
}

Try this on a phone or tablet with multiple fingers. Each finger creates its own circle.

Keyboard

Use keyPressed to check if any key is down, and key to see which key it is.

Tap or click on the canvas first to give it focus, then use arrow keys to move. On mobile? Keyboard examples work best with a Bluetooth keyboard. Try the touch-friendly mouse examples above, or use the code keyboard button { } in the bottom-right to type code.

Advanced Noise

Perlin noise is a special kind of randomness that flows smoothly. Unlike random() which jumps around, noise() creates organic, natural-looking variation. It's perfect for terrain, clouds, textures, and organic movement.

The noise() function takes 1 to 3 numbers and returns a value between 0 and 1. Nearby inputs give similar outputs, which is what makes it flow smoothly.

Color Palettes

Choosing colors that work well together is hard. Bloom includes several curated color palettes you can use right away with palette().

Available palettes:

Blending Colors

Use lerpColor() to smoothly blend between two colors.

Complex Shapes

Beyond basic shapes, Bloom provides polygon() and star() for more interesting geometry.

polygon(x, y, radius, sides) draws a regular polygon. Try different numbers of sides: 3 for triangle, 5 for pentagon, 6 for hexagon.

Stars

star(x, y, outerRadius, innerRadius, points) draws a star shape. The inner radius determines how pointy the star is.

Arcs and Curves

For more complex shapes, Bloom provides arcs and bezier curves:

Arcs use radians: PI = half circle, TWO_PI = full circle. Bezier curves need practice - the control points (cx1, cy1, cx2, cy2) shape the curve.

Advanced Easing and Motion

Real things don't move at constant speed. They accelerate, decelerate, and bounce. Bloom provides easing functions and oscillators to create natural-feeling motion.

Oscillators: Automatic Movement

These functions create automatic movement that changes over time (based on the frame count). You don't need to manage any state - just call them and they animate!

oscillate(min, max, speed?, offset?)

Smoothly moves between min and max. The optional speed controls how fast (default: 1), and offset shifts the starting point.

bounce(min, max, speed?)

Like oscillate but uses absolute sine for a bouncy, elastic feel:

pulse(speed?)

Returns a value from 0 to 1 that pulses over time. Perfect for fading effects:

wave(frequency?, amplitude?, offset?)

A sine wave returning values from -amplitude to +amplitude. Great for wavy motion:

spring(target, stiffness?, damping?)

Creates a bouncy spring motion toward a target value. Higher stiffness = faster spring, higher damping = less bounce:

Utility Functions

pingpong(t, length)

Takes a value t and bounces it between 0 and length. Useful with frame count:

repeat(t, length)

Wraps a value between 0 and length (like modulo but always positive):

smoothstep(edge0, edge1, x)

Returns 0 if x < edge0, 1 if x > edge1, and a smooth S-curve in between. Perfect for smooth transitions:

Easing Functions

Easing functions transform linear motion (0 to 1) into more interesting curves. Pass a value from 0-1 and get back a curved version.

Advanced Transforms

Transforms let you move, rotate, and scale your entire drawing system. Instead of calculating complex positions, you can move the "paper" itself.

Translate (Move)

translate() moves the origin point. This is useful for drawing complex shapes around a center point:

Rotate

rotate(angle) spins everything around the current origin. Angles are in radians (PI = 180 degrees, TWO_PI = 360 degrees):

Push and Pop (Saving Transform State)

Use pushMatrix() and popMatrix() to save and restore your transform state. Think of it like a stack of saved positions:

// Without push/pop (PROBLEM!)
translate(50, 50)   // Move right and down
circle(0, 0, 20)    // Circle at (50, 50) - OK!

translate(50, 50)   // Move MORE right and down
circle(0, 0, 20)    // Circle at (100, 100) - Wait, why so far?

pushMatrix()
translate(50, 50)
circle(0, 0, 20)    // Circle at (50, 50)
popMatrix()         // Reset! Back to (0, 0)

pushMatrix()
translate(50, 50)
circle(0, 0, 20)    // Circle at (50, 50) - Correct!
popMatrix()

Grids

Grids are essential for patterns, tiles, and organized layouts. Bloom offers two ways to create grids: nested loops (flexible) or the grid() function (simpler).

The grid() Function

The easiest way to draw a grid! Just tell it how many columns and rows, the cell size, and what to draw in each cell:

Notice how you don't need to calculate positions - x and y are automatically set to the center of each cell!

Interactive Grid

Use the callback parameters to create interactive effects:

Using Nested Loops

For more control, use nested for loops. You calculate positions yourself, but get complete flexibility:

Animated Grid

Combined with noise and animation, grids can create mesmerizing effects:

Debugging Your Code

When something isn't working, here's how to figure out what's wrong:

Use print() to See Values

The most powerful debugging tool is print(). It shows values in the console (bottom panel).

let x = 100
print("x is: " + x)       // Shows: x is: 100
print("mouseX: " + mouseX) // Shows mouse position

fn draw() {
  print("draw is running!")  // If you see this, draw() is working
  // ... rest of code
}

if x > 100 {
  print("x is big")
} else {
  print("x is small")
}

Common Debugging Checks

// Only print every 60 frames (once per second)
if frame % 60 == 0 {
  print("x is: " + x)
}

Troubleshooting

Stuck? Don't worry - everyone makes mistakes when learning to code! Here are solutions to common problems:

Still stuck? Tap or hover over keywords in the editor to see explanations, check the Glossary below, or try simplifying your code to find where the problem is.

Using Bloom on Different Devices

Bloom works on phones, tablets, and computers. Here are some tips for each:

Glossary

New to programming? Here's what these words mean:

Understanding Error Messages

When something goes wrong, Bloom tries to tell you what happened. Here's what those messages mean:

fn draw() {
  circle(100, 100, 40)
// Missing closing }

fn draw() {
  circle(100, 100, 40)
}  // Added closing brace

Reference Print Cheat Sheet

Here's a quick reference of everything Bloom offers.