setup()
setup() runs once when the sketch starts. It initializes the physics world, creates static boundary sprites, and calls createBuddy() to assemble the interactive character. The 'static' collider type means these walls never move—only the buddy responds to collisions and gravity.
function setup() {
createCanvas(windowWidth, windowHeight);
world.gravity.y = 10; // Set gravity for physics simulation
// --- Create Environment ---
// Ground
ground = new Sprite(width / 2, height - 10, width, 20);
ground.collider = 'static';
ground.color = color(100, 100, 100);
// Walls
wallLeft = new Sprite(10, height / 2, 20, height);
wallLeft.collider = 'static';
wallLeft.color = color(100, 100, 100);
wallRight = new Sprite(width - 10, height / 2, 20, height);
wallRight.collider = 'static';
wallRight.color = color(100, 100, 100);
// Ceiling
ceiling = new Sprite(width / 2, 10, width, 20);
ceiling.collider = 'static';
ceiling.color = color(100, 100, 100);
// --- Create Buddy Ragdoll ---
createBuddy();
}Line-by-line explanation (6 lines)
🔧 Subcomponents:
calculation
Canvas Setup
createCanvas(windowWidth, windowHeight);
Creates a full-screen canvas that matches the browser window dimensions
assignment
Physics Gravity
world.gravity.y = 10;
Enables downward gravity in the physics world so sprites fall naturally
calculation
Environment Boundary Sprites
ground = new Sprite(width / 2, height - 10, width, 20);
Creates static walls, ceiling, and ground that trap the buddy inside the canvas
createCanvas(windowWidth, windowHeight);- Creates a canvas as tall and wide as the browser window, making the sketch responsive
world.gravity.y = 10;- Activates gravity in the p5play physics world; positive y pulls sprites downward at strength 10
ground = new Sprite(width / 2, height - 10, width, 20);- Creates a ground sprite centered horizontally near the bottom of the canvas (height - 10)
ground.collider = 'static';- Marks the ground as static so it doesn't move when the buddy collides with it
ground.color = color(100, 100, 100);- Colors the ground dark gray so it's visible against the light background
createBuddy();- Calls the helper function that assembles the buddy ragdoll character from individual parts
