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.

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

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

Assets & Preloading

Call loadImage() / loadJSON() inside preload() to have popps.js wait for them before running setup(). Outside of preload(), they just fetch immediately (image loads async, JSON loads synchronously).

var sprite, levelData;

function preload() {
    sprite = loadImage("sprite.png");
    levelData = loadJSON("level1.json");
}

function setup() {
    createCanvas(400, 400);
    loop();
}
loadImage(url)
Load an image, returning an Image you can pass to image(). In preload(), setup waits for it.
loadJSON(path)
Fetch and parse a JSON file, returning the parsed object. Synchronous, so it's ready to use as soon as the call returns.
getCropped(img, sx, sy, w, h)
Crop a region out of a loaded image and return it as a new image — handy for sprite sheets.

Audio

Load a sound once, then play it as many times as you like — each playSound() call is an independent, overlappable instance.

var jumpSound;

function preload() {
    jumpSound = loadAudio("jump.wav");
}

function keyPressed() {
    if (key === " ") playSound(jumpSound);
}
loadAudio(src)
Load a sound file, returning a buffer to pass to playSound().
playSound(buffer [, delay, startPoint, duration])
Play a loaded sound buffer. Returns a sound instance with .volume(v), .loop(), .noloop(), .pauseSound(), .resumeSound(), and .stop().
stopAllSounds()
Immediately stop every sound instance currently playing.

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.
clearBackground()
Clear the canvas to fully transparent (no fill color).
noStroke()
Disable stroke — shapes drawn after this have no outline until stroke() is called again.
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.
arc(x, y, r, startAngle, endAngle [, counterclockwise])
Draw a filled arc/wedge, angles in radians. strokeArc(...) draws the outline only.
point(x, y [, r])
Draw a filled circle (default radius 1). strokePoint(x, y [, r]) draws the outline only.
line(x1, y1, x2, y2 [, w])
Draw a line. Optional width.
text(str, x, y)
Draw filled text at position. strokeText(str, x, y) draws the outline only. Use textSize(n) or fontSize("npx") to set size.
textSize(n) / fontSize(n)
Set text size (pixels). Aliases for p5 compatibility.
font(family) / setFont(family)
Set the font family used by text(), e.g. font("serif"). Aliases for the same setter.
image(img, sx, sy [, sWidth, sHeight, x, y, width, height])
Draw a loaded image. 3 args: draw at (sx, sy) at native size. 5 args: draw at (sx, sy) scaled to (sWidth, sHeight). 9 args: draw a (sx, sy, sWidth, sHeight) region of the source image into the (x, y, width, height) destination rect.
createVector(x, y)
Create a 2D vector, defaulting to (0, 0) if args are omitted. Methods: add, sub, mult, div, set — each accepts either another vector or a plain number.
applyForces(pos, vel, acc)
pos += vel; vel += acc. Simple Euler integration.
Math helpers
abs, dist, floor, ceil, min, max, constrain, map, random, randomInt, randomRound, osc, oscSpeed, oneIn, fiftyFifty.
random([low] [, high]) / randomInt([low] [, high])
No args: 0–1. One arg: 0–low. Two args: low–high. Pass an array to random() to pick a random element. randomInt floors the result.
oneIn(chance) / fiftyFifty()
oneIn(n) is true with 1-in-n odds. fiftyFifty() is a 50% coin flip.
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.