Get Started

Include popps.js before your script. Your script defines setup() and draw().

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://js.cadenpopps.com/popps.js"></script>
    <script src="your_script.js"></script>
</head>

Timing & Loop Model

Important: popps.js runs draw() at a fixed 60 fps by default. This keeps game physics and frame-based logic consistent across different displays (60Hz, 120Hz, 144Hz). Without throttling, higher-refresh monitors would run games 2x or more too fast.

loop(fps) — Start the draw loop. Default 60 fps. Call from setup() or later.
noLoop() — Stop the draw loop (e.g. when game ends).
millis() — Milliseconds since the page loaded. Use for real-time timing.
frameCount — Number of frames drawn. Use for frame-based logic (e.g. spawn every 30 frames).

function setup() {
    createCanvas(400, 400);
    loop();  // or loop(30) for 30 fps
}
function draw() {
    background(0);
    if (frameCount % 60 == 0) { /* every second at 60fps */ }
}

Lifecycle

DOM loads → initPoppsJS() runs.
If you define preload() and setup(), preload runs first; when assets are ready, setup runs.
Otherwise, setup() runs immediately.
Call loop() in setup (or when ready). draw() is then called ~60 times per second.

Reference

createCanvas(w, h [, parentId])

Create a canvas. If parentId is given, use that element; otherwise append to body. Returns the 2D context.

createCanvas(800, 600);
createCanvas(400, 400, "gameContainer");

loop([fps])

Start the draw loop. Default 60 fps for consistent timing. Call from setup().

noLoop()

Stop the draw loop.

millis()

Returns milliseconds since init. Use for timers and delta-time.

fill(r [, g, b, a])

Set fill color. fill(255) gray, fill(255,0,0) red, fill(255,0,0,0.5) half-transparent.

stroke(r [, g, b, a])

Set stroke color. Same patterns as fill.

strokeWeight(w) / strokeWidth(w)

Set line width. Aliases for compatibility.

background(r [, g, b, a])

Clear canvas with color.

rect(x, y, w, h)

Draw filled rectangle.

strokeRect(x, y, w, h)

Draw stroked rectangle.

ellipse(x, y, r) or ellipse(x, y, rx, ry)

Draw filled ellipse. Three args: circle. Four args: oval (rx, ry radii).

strokeEllipse(x, y, r) / strokeEllipse(x, y, rx, ry)

Draw stroked ellipse.

point(x, y [, r])

Draw a filled circle (default radius 1).

line(x1, y1, x2, y2 [, w])

Draw a line. Optional width.

text(str, x, y)

Draw text at position. Use textSize(n) or fontSize("npx") to set size.

textSize(n) / fontSize(n)

Set text size (pixels). Aliases for p5 compatibility.

createVector(x, y)

Create a 2D vector. Methods: add, sub, mult, div, set.

applyForces(pos, vel, acc)

pos += vel; vel += acc. Simple Euler integration.

Math helpers

abs, dist, floor, ceil, min, max, constrain, map, random, randomInt, osc, oscSpeed, oneIn.

Events (define to use)

Define these functions and they are auto-registered: mouseClicked, mouseDown, mouseUp, mouseMoved, mouseDragged, mousePressed, keyPressed, keyDown, keyUp, windowResized. Globals: mouseX, mouseY, key, keycode, keyIsDown(k).

resizeCanvas(w, h)

Resize the canvas. Update width/height. Call from windowResized.