Creates the drawing canvas. Call this once at the start of your sketch.

createCanvas(400, 400)
background(30)
fill(255, 100, 100)
circle(200, 200, 120)

Resizes an existing canvas.

createCanvas(200, 200)
background(100)
resizeCanvas(400, 300)
background(50)
circle(200, 150, 80)

Fills the entire canvas with a color. Accepts the same arguments as fill().

createCanvas(400, 400)
background(30, 30, 60)
fill(255)
circle(200, 200, 100)

Draws a rectangle. The optional r parameter rounds all corners.

createCanvas(400, 400)
background(220)
fill(100, 149, 237)
rect(100, 100, 200, 150, 12)

Draws a circle by specifying its centre and diameter.

createCanvas(400, 400)
background(220)
fill(255, 100, 100)
circle(200, 200, 140)

Draws an ellipse. By default x/y is the centre.

createCanvas(400, 400)
background(220)
fill(180, 120, 220)
ellipse(200, 200, 300, 150)

Draws a line between two points.

createCanvas(400, 400)
background(30)
stroke(255, 200, 0)
strokeWeight(3)
line(50, 50, 350, 350)

Draws a single point. Its size is set by strokeWeight().

createCanvas(400, 400)
background(30)
stroke(255)
strokeWeight(6)
for i in range(20):
    point(random(0, 400), random(0, 400))

Draws a triangle defined by three vertices.

createCanvas(400, 400)
background(220)
fill(255, 165, 0)
triangle(200, 60, 60, 340, 340, 340)

Draws a quadrilateral defined by four vertices.

createCanvas(400, 400)
background(220)
fill(80, 180, 120)
quad(100, 200, 200, 80, 320, 160, 280, 320)

Draws an arc. Angles are in the current angleMode. mode can be OPEN, CLOSE, CHORD, or PIE.

createCanvas(400, 400)
background(220)
fill(255, 80, 80)
arc(200, 200, 260, 260, 0, PI * 1.5, PIE)

Draws a custom polygon. Call beginShape(), add vertices with vertex(), then endShape(). Pass CLOSE to automatically close the shape.

createCanvas(400, 400)
background(220)
fill(100, 160, 240)
beginShape()
vertex(200, 60)
vertex(320, 180)
vertex(270, 340)
vertex(130, 340)
vertex(80, 180)
endShape(CLOSE)

Adds a Catmull-Rom curve vertex inside a beginShape()/endShape() block. Needs at least 4 points; the first and last are control points.

createCanvas(400, 400)
background(220)
noFill()
stroke(80, 120, 220)
strokeWeight(3)
beginShape()
for x in range(0, 450, 50):
    curveVertex(x, 200 + sin(x * 0.05) * 100)
endShape()

Draws a cubic Bézier curve.

createCanvas(400, 400)
background(220)
noFill()
stroke(200, 80, 80)
strokeWeight(3)
bezier(50, 350, 50, 50, 350, 50, 350, 350)

Sets the fill color for shapes drawn after this call. Accepts grayscale (1 value), RGB (3 values), RGBA (4 values), or a color object.

createCanvas(400, 400)
background(220)
fill(255, 100, 50)
circle(130, 200, 100)
fill(50, 120, 255)
circle(270, 200, 100)

Disables fill so shapes are drawn as outlines only.

createCanvas(400, 400)
background(220)
noFill()
stroke(80, 80, 200)
strokeWeight(3)
circle(200, 200, 160)

Sets the stroke (outline) color. Same argument forms as fill().

createCanvas(400, 400)
background(220)
stroke(220, 50, 50)
strokeWeight(4)
fill(255)
rect(100, 100, 200, 200)

Removes the stroke from all shapes drawn after this call.

createCanvas(400, 400)
background(220)
noStroke()
fill(100, 200, 100)
rect(80, 80, 240, 240, 20)

Sets the thickness of lines and shape outlines in pixels.

createCanvas(400, 400)
background(220)
for i in range(1, 6):
    strokeWeight(i * 2)
    line(50, i * 60, 350, i * 60)

Sets the style for line endings.

createCanvas(400, 400)
background(220)
strokeWeight(16)
strokeCap(ROUND)
line(80, 150, 320, 150)
strokeCap(SQUARE)
line(80, 220, 320, 220)
strokeCap(PROJECT)
line(80, 290, 320, 290)

Sets the style for corners where lines meet.

createCanvas(400, 400)
background(220)
strokeWeight(12)
noFill()
strokeJoin(ROUND)
beginShape()
vertex(100, 300)
vertex(200, 80)
vertex(300, 300)
endShape()

Creates a reusable color object. Accepts the same arguments as fill().

createCanvas(400, 400)
red  = color(220, 60, 60)
blue = color(60, 100, 220)
background(220)
fill(red)
circle(140, 200, 120)
fill(blue)
circle(260, 200, 120)

Interpolates between two colors. amt=0 returns c1, amt=1 returns c2.

createCanvas(400, 80)
c1 = color(255, 50, 50)
c2 = color(50, 100, 255)
for i in range(20):
    fill(lerpColor(c1, c2, i / 19))
    noStroke()
    rect(i * 20, 0, 20, 80)

Returns the color of the pixel at (x, y) as a color object.

createCanvas(400, 400)
background(255, 100, 50)
c = getPixelColour(200, 200)
print(c)

Switches between RGB, HSB, and HSL color modes and optionally sets the value range for each channel.

createCanvas(400, 80)
colorMode(HSB, 360, 100, 100)
for i in range(36):
    fill(i * 10, 90, 90)
    noStroke()
    rect(i * 11, 0, 11, 80)

Draws text on the canvas at position (x, y).

createCanvas(400, 200)
background(30)
fill(255)
textSize(48)
textAlign(CENTER, CENTER)
text('PyAngelo!', 200, 100)

Sets the font size for subsequent text() calls.

createCanvas(400, 300)
background(220)
fill(30)
for i, s in enumerate([16, 24, 36, 48]):
    textSize(s)
    text(str(s) + 'px', 20, 40 + i * 60)

Sets horizontal and vertical text alignment.

createCanvas(400, 200)
background(220)
fill(30)
textSize(28)
line(200, 0, 200, 200)
textAlign(LEFT)
text('left', 200, 80)
textAlign(RIGHT)
text('right', 200, 130)

Sets the font family for subsequent text() calls.

createCanvas(400, 200)
background(220)
fill(30)
textSize(32)
textFont('serif')
text('Serif font', 20, 80)
textFont('monospace')
text('Monospace', 20, 140)

Sets the text style.

createCanvas(400, 200)
background(220)
fill(30)
textSize(30)
textStyle(BOLD)
text('Bold', 20, 70)
textStyle(ITALIC)
text('Italic', 20, 130)

Returns the pixel width of a string in the current font settings.

createCanvas(400, 200)
background(220)
textSize(32)
fill(30)
msg = 'Hello!'
w = textWidth(msg)
text(msg, 20, 100)
stroke(200, 50, 50)
noFill()
rect(20, 70, w, 40)

Moves the coordinate origin by (x, y). Subsequent drawing calls use the new origin.

createCanvas(400, 400)
background(220)
translate(200, 200)
fill(255, 100, 100)
rect(-60, -60, 120, 120)

Rotates subsequent drawings around the current origin. Angle is in radians unless angleMode(DEGREES) is set.

createCanvas(400, 400)
background(220)
translate(200, 200)
for i in range(8):
    rotate(PI / 4)
    fill(i * 30, 100, 200)
    rect(20, -10, 120, 20, 4)

Scales subsequent drawings. If only x is given, scales uniformly.

createCanvas(400, 400)
background(220)
translate(200, 200)
for s in [1.0, 0.7, 0.4]:
    scale(s)
    noFill()
    stroke(80)
    rect(-60, -60, 120, 120)

push() saves the current transform and style state. pop() restores it. Use them together to isolate transform changes.

createCanvas(400, 400)
background(220)
translate(200, 200)
push()
rotate(PI / 4)
fill(255, 100, 100)
rect(-60, -60, 120, 120)
pop()
fill(100, 100, 255)
circle(0, 0, 40)

Sets whether angle arguments to rotate(), arc(), and trig functions use RADIANS (default) or DEGREES.

createCanvas(400, 400)
background(220)
angleMode(DEGREES)
translate(200, 200)
for d in range(0, 360, 30):
    rotate(30)
    fill(d, 150, 200)
    rect(30, -8, 100, 16, 4)

Changes how rect() interprets its x/y arguments.

createCanvas(400, 400)
background(220)
rectMode(CENTER)
fill(100, 149, 237)
rect(200, 200, 200, 120)

Changes how ellipse() and circle() interpret their position arguments.

createCanvas(400, 400)
background(220)
ellipseMode(CORNER)
fill(180, 120, 220)
ellipse(100, 100, 200, 150)

Switches the y-axis direction. JAVASCRIPT (default) has y increasing downward. CARTESIAN flips it so y increases upward.

createCanvas(400, 400)
yAxisMode(CARTESIAN)
background(220)
translate(200, 200)
for i in range(5):
    fill(i * 50, 100, 200)
    circle(0, i * 40, 30)

Loads an image from a URL or uploaded asset path. Must be awaited.

createCanvas(400, 400)
img = await loadImage('https://picsum.photos/400')
image(img, 0, 0)

Draws an image on the canvas. Omit w/h to use the image's natural size.

createCanvas(400, 400)
img = await loadImage('https://picsum.photos/200')
image(img, 100, 100, 200, 200)

Waits until the next frame should be drawn. Must be awaited inside an animation loop.

createCanvas(400, 400)
x = 0
while True:
    background(30)
    fill(255, 200, 50)
    circle(x, 200, 40)
    x = (x + 3) % 400
    await animate()

Pauses execution for the given number of seconds. Must be awaited.

createCanvas(400, 200)
for c in [(255,80,80), (80,255,80), (80,80,255)]:
    background(*c)
    await sleep(0.8)

Returns the number of milliseconds elapsed since the sketch started.

createCanvas(400, 200)
while True:
    background(30)
    fill(255)
    textSize(36)
    textAlign(CENTER, CENTER)
    text(str(millis() // 1000) + 's', 200, 100)
    await animate()

The number of frames that have been drawn since the sketch started. Incremented by each await animate() call.

createCanvas(400, 200)
while True:
    background(30)
    fill(255)
    textSize(32)
    textAlign(CENTER, CENTER)
    text('Frame ' + str(frameCount), 200, 100)
    await animate()

Milliseconds elapsed since the previous frame. Useful for frame-rate-independent movement.

createCanvas(400, 400)
x = 0
while True:
    background(30)
    x += deltaTime * 0.1
    fill(100, 200, 255)
    circle(x % 400, 200, 40)
    await animate()

Current mouse position on the canvas. Updated every frame.

createCanvas(400, 400)
while True:
    background(30)
    fill(255, 150, 50)
    circle(mouseX, mouseY, 40)
    await animate()

Mouse position on the previous frame. Useful for drawing lines that follow mouse movement.

createCanvas(400, 400)
background(30)
while True:
    if mouseIsPressed:
        stroke(255, 100, 100)
        strokeWeight(3)
        line(pmouseX, pmouseY, mouseX, mouseY)
    await animate()

True while any mouse button is held down.

createCanvas(400, 400)
while True:
    if mouseIsPressed:
        background(80, 30, 30)
        fill(255, 100, 100)
    else:
        background(30)
        fill(200)
    circle(200, 200, 120)
    await animate()

The mouse button currently pressed. Values: LEFT, RIGHT, CENTER.

createCanvas(400, 200)
while True:
    background(30)
    fill(255)
    textAlign(CENTER, CENTER)
    textSize(24)
    btn = str(mouseButton) if mouseIsPressed else 'none'
    text('Button: ' + btn, 200, 100)
    await animate()

True while any key is held down.

createCanvas(400, 200)
while True:
    background(30)
    fill(255)
    textAlign(CENTER, CENTER)
    textSize(28)
    text('Hold a key!' if not keyIsPressed else key, 200, 100)
    await animate()

The string value of the last key pressed (e.g. 'a', 'Enter', ' ').

createCanvas(400, 200)
while True:
    background(30)
    fill(255)
    textAlign(CENTER, CENTER)
    textSize(48)
    text(key, 200, 100)
    await animate()

Returns True if the given key is currently held. Use KEY_* constants.

createCanvas(400, 400)
x, y = 200, 200
while True:
    background(30)
    if isKeyDown(KEY_LEFT):  x -= 3
    if isKeyDown(KEY_RIGHT): x += 3
    if isKeyDown(KEY_UP):    y -= 3
    if isKeyDown(KEY_DOWN):  y += 3
    fill(100, 200, 255)
    circle(x, y, 40)
    await animate()

Returns True once per keypress — the event is consumed so repeated calls in the same frame return False. Useful for discrete actions like jumping.

createCanvas(400, 400)
count = 0
while True:
    if wasKeyPressed(KEY_SPACE):
        count += 1
    background(30)
    fill(255)
    textAlign(CENTER, CENTER)
    textSize(36)
    text('Jumps: ' + str(count), 200, 200)
    await animate()

Prints values to the console. Works like Python's built-in print().

print('Hello, PyAngelo!')
for i in range(1, 6):
    print('Line', i)

Displays a prompt and waits for the user to type a line. Must be awaited.

name = await input('What is your name? ')
print('Hello,', name + '!')

Changes the color of text printed to the console after this call.

setTextColour(255, 100, 100)
print('Red text')
setTextColour(100, 255, 100)
print('Green text')
setTextColour(100, 150, 255)
print('Blue text')

Changes the background (highlight) color of subsequent console output.

setHighlightColour(50, 50, 120)
print('Highlighted!')
setHighlightColour(0)
print('Normal')

Resizes the console panel to the given pixel height.

setConsoleSize(300)
for i in range(20):
    print('Line', i)

Returns the Euclidean distance between two points.

createCanvas(400, 400)
while True:
    background(30)
    d = dist(mouseX, mouseY, 200, 200)
    fill(255)
    textAlign(CENTER, CENTER)
    textSize(24)
    text('dist: ' + str(round(d)), 200, 200)
    await animate()

Linear interpolation between start and stop. amt=0 returns start, amt=1 returns stop.

createCanvas(400, 400)
x = 0
while True:
    x = lerp(x, mouseX, 0.1)
    background(30)
    fill(255, 200, 50)
    circle(x, 200, 40)
    await animate()

Clamps n to the range [low, high].

createCanvas(400, 400)
while True:
    background(30)
    x = constrain(mouseX, 100, 300)
    fill(100, 200, 255)
    circle(x, 200, 50)
    await animate()

Re-maps a number from one range to another.

createCanvas(400, 400)
while True:
    background(30)
    r = map(mouseX, 0, 400, 0, 255)
    b = map(mouseY, 0, 400, 0, 255)
    fill(r, 100, b)
    circle(200, 200, 160)
    await animate()

Returns a random float in [0, low) when called with one number, in [low, high) with two numbers, or a random element when passed a list.

createCanvas(400, 400)
background(220)
for _ in range(60):
    fill(random(255), random(255), random(255), 180)
    noStroke()
    circle(random(400), random(400), random(20, 60))

Returns a Perlin noise value in [0, 1] for the given coordinates. Nearby inputs return similar values, producing smooth variation.

createCanvas(400, 200)
t = 0
while True:
    background(30)
    noFill()
    stroke(100, 200, 255)
    strokeWeight(2)
    beginShape()
    for x in range(0, 401, 5):
        y = noise(x * 0.01, t) * 180 + 10
        vertex(x, y)
    endShape()
    t += 0.02
    await animate()

Seeds the Perlin noise generator for reproducible results.

createCanvas(400, 200)
noiseSeed(42)
background(30)
noFill()
stroke(100, 200, 255)
strokeWeight(2)
beginShape()
for x in range(401):
    y = noise(x * 0.01) * 180 + 10
    vertex(x, y)
endShape()

Adjusts the character of Perlin noise. lod is the number of octaves; falloff controls how much each octave contributes.

createCanvas(400, 200)
noiseDetail(8, 0.5)
background(30)
noFill()
stroke(255, 180, 50)
strokeWeight(2)
beginShape()
for x in range(401):
    y = noise(x * 0.005) * 180 + 10
    vertex(x, y)
endShape()