object spawner fps test

This sketch creates an interactive FPS performance test that spawns and animates hundreds or thousands of bouncing household objects. Users type a number and press ENTER to spawn that many objects, which then bounce around the canvas with rotation, collision detection, and detailed visual representations of items from electronics, school supplies, furniture, and outdoor gear categories.

🧪 Try This!

Experiment with the code by making these changes:

  1. Make objects huge — Objects will be much larger and fewer will fit on screen, making it easier to see the detail in each one
  2. Triple the movement speed — Objects will bounce around much faster and create more chaotic animation
  3. Remove all rotation — Objects will stay upright and not spin, making it easier to see their shapes clearly
  4. Lower the warning threshold — The red performance warning will appear when spawning just 100 objects instead of 1000
  5. Stop bouncing at walls — Objects will stack at the edges of the canvas instead of bouncing back
  6. Dark mode background
Prefer the full editor? Open it there →

📖 About This Sketch

This sketch is a performance testing tool that lets you spawn hundreds or thousands of bouncing objects on your canvas to measure how many animated items your browser can handle at 60 frames per second. Each object is a unique household item—a smartphone, pencil, chair, or fishing rod—drawn with custom shapes and colors. The sketch combines the draw loop, collision detection, object-oriented programming (the BouncingObject class), and object spawning from user input to create a visually complex stress test.

The code is organized around a BouncingObject class that encapsulates all the logic for a single bouncing item: position, velocity, rotation, and custom drawing code for 100 different object types across 4 categories. The main sketch handles input via keyTyped() and keyPressed(), spawns objects into an array, and updates/draws them every frame. By studying this sketch you will learn how to use ES6 classes to manage many identical but independent entities, how to build complex conditional drawing logic, and how to measure performance through frame count and object count.

⚙️ How It Works

  1. When the sketch loads, setup() creates a full-window canvas and displays an instruction prompt asking the user to type a number between 1 and 1,000,000.
  2. The user types digits on the keyboard; keyTyped() accumulates them in a string called typedNumber, displaying the typed input on screen in real time.
  3. When the user presses ENTER, keyPressed() converts the typed string to an integer and creates that many new BouncingObject instances, pushing each into the objects array, then clears the typed number.
  4. Every frame, draw() loops through every object in the array, calling its update() method to move it and handle bouncing off walls, then calling its display() method to draw it.
  5. Each object's display() method uses a nested switch statement to draw one of 100 different household items using basic shapes (rect, ellipse, triangle, arc, line) based on its randomly assigned category and type.
  6. The sketch includes windowResized() to adapt the canvas to browser resizing, and a performanceWarning flag that turns red text on-screen if you spawn more than 1000 objects.

🎓 Concepts You'll Learn

ES6 ClassesObject-oriented programmingCollision detectionVelocity and physicsNested switch statementsUser input and string parsingArray iterationCanvas transforms (translate, rotate)Color manipulation

📝 Code Breakdown

setup()

setup() runs once when the sketch starts. It is the perfect place to initialize your canvas size, set drawing properties like colors and text alignment, and display static instructions that appear before any animation.

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220); // Light grey background
  textAlign(CENTER, CENTER);
  textSize(18);
  fill(50);
  noStroke();

  // Initial prompt
  text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);
}
Line-by-line explanation (6 lines)
createCanvas(windowWidth, windowHeight);
Creates a canvas that fills the entire browser window, making the sketch responsive to different screen sizes
background(220);
Fills the canvas with light gray (RGB value 220 for all channels) as the starting background
textAlign(CENTER, CENTER);
Centers all text both horizontally and vertically at the coordinates where text is drawn
textSize(18);
Sets the font size to 18 pixels for the instruction text
fill(50);
Sets the color for all subsequent shapes and text to dark gray (RGB 50)
text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);
Displays the instruction prompt centered on the canvas, telling the user how to use the sketch

draw()

draw() is the heartbeat of p5.js—it runs 60 times per second. Every frame you must redraw everything from scratch. The background() call clears the previous frame, the text displays dynamic information, and the loop updates and displays each object. This is the core of animation in p5.js.

🔬 This loop updates and draws every object every frame. What happens if you comment out obj.update() so objects don't move?

  for (let obj of objects) {
    obj.update();
    obj.display();
  }
function draw() {
  background(220); // Clear the background each frame

  // Display instructions
  textSize(20);
  fill(50);
  text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, 30);
  text(`Objects to spawn: ${typedNumber || '...' }`, width / 2, 60);

  if (performanceWarning) {
    fill(255, 0, 0); // Red warning text
    textSize(16);
    text("Spawning a very large number of objects may impact performance.", width / 2, 90);
  }

  // Update and display each bouncing object
  for (let obj of objects) {
    obj.update();
    obj.display();
  }
}
Line-by-line explanation (9 lines)

🔧 Subcomponents:

conditional Instruction Text Display text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, 30);

Shows the user how to interact with the sketch every frame

conditional Typed Number Display text(`Objects to spawn: ${typedNumber || '...' }`, width / 2, 60);

Displays what the user has typed so far, or '...' if nothing has been typed yet

conditional Performance Warning Conditional if (performanceWarning) { fill(255, 0, 0); textSize(16); text("Spawning a very large number of objects may impact performance.", width / 2, 90); }

Shows a red warning message when the user spawns more than the warning threshold of objects

for-loop Object Update and Display Loop for (let obj of objects) { obj.update(); obj.display(); }

Iterates through every bouncing object, updates its position and rotation, and draws it to the canvas

background(220);
Clears the canvas with light gray every frame, erasing the previous frame's objects to prevent trails
textSize(20);
Sets font size to 20 pixels for the instruction text at the top
fill(50);
Sets text color to dark gray for readability
text(`Objects to spawn: ${typedNumber || '...' }`, width / 2, 60);
Displays the typed number string; if empty, shows '...' as a placeholder
if (performanceWarning) {
Checks if the performanceWarning flag is true (set when user spawns over 1000 objects)
fill(255, 0, 0);
Changes text color to red for the warning message to draw attention
for (let obj of objects) {
Loops through every object in the objects array using a for-of loop
obj.update();
Calls the update method on the current object, which moves it and handles wall bounces
obj.display();
Calls the display method on the current object, which draws it to the canvas at its new position

keyTyped()

keyTyped() is called every time a key is pressed that produces a visible character. It runs BEFORE keyPressed(), making it perfect for accumulating text input. By storing typed characters in a string, we build up the user's intended number before they press ENTER.

🔬 This function only accepts digits 0-9. What happens if you remove the digit check so ANY key gets added to typedNumber?

  if (key >= '0' && key <= '9') {
    // Allow up to 7 digits for 1,000,000
    if (typedNumber.length < 7) {
      typedNumber += key;
    }
  }
function keyTyped() {
  // Check if the typed key is a digit
  if (key >= '0' && key <= '9') {
    // Allow up to 7 digits for 1,000,000
    if (typedNumber.length < 7) {
      typedNumber += key;
    }
  }
}
Line-by-line explanation (3 lines)

🔧 Subcomponents:

conditional Digit Validation Check if (key >= '0' && key <= '9') {

Ensures only numeric characters (0-9) are added to the typed number string

conditional Length Limit Check if (typedNumber.length < 7) {

Prevents the user from typing more than 7 digits (which would exceed 1,000,000)

if (key >= '0' && key <= '9') {
Checks if the pressed key is a digit by comparing its character code; only digits pass this test
if (typedNumber.length < 7) {
Checks that the typed number string is less than 7 characters long before allowing another digit
typedNumber += key;
Appends the pressed digit character to the end of the typedNumber string

keyPressed()

keyPressed() runs when a key is physically pressed (as opposed to keyTyped() which fires when a character is produced). It has access to keyCode, which identifies specific keys like ENTER. This is where you detect action keys and execute major state changes like spawning all objects at once.

🔬 These lines clear all previous objects. What happens if you comment out the objects = [] line so you KEEP adding objects without clearing?

    // Clear existing objects
    objects = [];
    performanceWarning = false;

🔬 This loop creates numToSpawn objects. What if you change it to only spawn every OTHER object, like for (let i = 0; i < numToSpawn; i += 2)?

    // Spawn new objects based on the typed number
    for (let i = 0; i < numToSpawn; i++) {
      objects.push(new BouncingObject());
    }
function keyPressed() {
  // If ENTER or RETURN is pressed and a number has been typed
  if ((keyCode === ENTER || keyCode === RETURN) && typedNumber !== '') {
    const numToSpawn = parseInt(typedNumber, 10); // Convert typed string to integer

    // Clear existing objects
    objects = [];
    performanceWarning = false;

    // Show performance warning for large numbers
    if (numToSpawn > 1000) { // Threshold for warning (can be adjusted)
      performanceWarning = true;
    }

    // Spawn new objects based on the typed number
    for (let i = 0; i < numToSpawn; i++) {
      objects.push(new BouncingObject());
    }

    // Reset the typed number string
    typedNumber = '';
  }
}
Line-by-line explanation (9 lines)

🔧 Subcomponents:

conditional ENTER Key Detection if ((keyCode === ENTER || keyCode === RETURN) && typedNumber !== '') {

Checks that ENTER was pressed and that the user has typed at least one digit

calculation String to Integer Conversion const numToSpawn = parseInt(typedNumber, 10);

Converts the accumulated digit string into an actual number for the loop counter

conditional Performance Warning Trigger if (numToSpawn > 1000) {

Sets the performanceWarning flag to true if too many objects are being spawned

for-loop Object Spawning Loop for (let i = 0; i < numToSpawn; i++) { objects.push(new BouncingObject()); }

Creates numToSpawn new BouncingObject instances and adds each to the objects array

if ((keyCode === ENTER || keyCode === RETURN) && typedNumber !== '') {
Checks that the ENTER key was pressed AND that the user has typed at least one digit before proceeding
const numToSpawn = parseInt(typedNumber, 10);
Converts the typed string into an integer using base-10 (decimal) numbering; e.g., '100' becomes 100
objects = [];
Clears the objects array completely, removing all previously spawned objects
performanceWarning = false;
Resets the warning flag to false so it can be set again if the new count is large
if (numToSpawn > 1000) {
Checks if the user is spawning more than 1000 objects, which may strain performance
performanceWarning = true;
Sets the flag to true, which causes draw() to display the red warning message
for (let i = 0; i < numToSpawn; i++) {
Creates a loop that will run numToSpawn times, creating one new object per iteration
objects.push(new BouncingObject());
Creates a new BouncingObject and adds it to the end of the objects array
typedNumber = '';
Resets the typed number string to empty so the user can type a new number for the next spawn

BouncingObject (class)

The constructor is called whenever you write 'new BouncingObject()'. It initializes all the properties of that single object: where it starts, how fast it moves, what color it is, and what type of household item to draw. Every object gets random values so each feels unique.

class BouncingObject {
  constructor() {
    this.size = random(30, 80); // Random size
    this.x = random(this.size / 2, width - this.size / 2); // Random initial position
    this.y = random(this.size / 2, height - this.size / 2);
    this.vx = random(-4, 4); // Random initial velocity
    this.vy = random(-4, 4);
    this.color = color(random(255), random(255), random(255)); // Random color

    // Pick a random category and then a random type from that category
    const categories = Object.keys(householdObjectTypes);
    this.category = random(categories);
    this.type = random(householdObjectTypes[this.category]);

    this.angle = random(TWO_PI); // Random initial rotation
    this.rotationSpeed = random(-0.02, 0.02); // Random rotation speed
  }
Line-by-line explanation (11 lines)

🔧 Subcomponents:

calculation Random Size Assignment this.size = random(30, 80);

Sets a random diameter between 30 and 80 pixels for this object

calculation Random Position Assignment this.x = random(this.size / 2, width - this.size / 2); this.y = random(this.size / 2, height - this.size / 2);

Positions the object randomly on the canvas while ensuring it doesn't spawn outside the canvas edges

calculation Random Velocity Assignment this.vx = random(-4, 4); this.vy = random(-4, 4);

Gives the object a random velocity in both directions, between -4 and 4 pixels per frame

calculation Random Color Assignment this.color = color(random(255), random(255), random(255));

Creates a random RGB color for this object's appearance

calculation Random Object Type Selection const categories = Object.keys(householdObjectTypes); this.category = random(categories); this.type = random(householdObjectTypes[this.category]);

Randomly picks one of four categories, then randomly picks a specific object type from that category

calculation Rotation Properties this.angle = random(TWO_PI); this.rotationSpeed = random(-0.02, 0.02);

Starts the object at a random rotation angle and gives it a random spin speed

this.size = random(30, 80);
random(30, 80) picks a decimal number between 30 and 80; this becomes the object's width and height
this.x = random(this.size / 2, width - this.size / 2);
Places the object at a random x position, offset by its radius to keep it fully inside the canvas width
this.y = random(this.size / 2, height - this.size / 2);
Places the object at a random y position, offset by its radius to keep it fully inside the canvas height
this.vx = random(-4, 4);
Gives the object a random horizontal velocity between -4 (moving left) and 4 (moving right) pixels per frame
this.vy = random(-4, 4);
Gives the object a random vertical velocity between -4 (moving up) and 4 (moving down) pixels per frame
this.color = color(random(255), random(255), random(255));
Creates a random color by picking random values (0-255) for red, green, and blue channels
const categories = Object.keys(householdObjectTypes);
Gets an array of the category names ('electronics', 'school_supplies', 'household', 'outdoor_supplies')
this.category = random(categories);
Picks one random category from the array
this.type = random(householdObjectTypes[this.category]);
Looks up the chosen category in the householdObjectTypes object and picks a random object type from that category's array
this.angle = random(TWO_PI);
Starts the object at a random rotation angle from 0 to 360 degrees (TWO_PI radians)
this.rotationSpeed = random(-0.02, 0.02);
Assigns a random rotation speed between -0.02 and 0.02 radians per frame, controlling how fast it spins

update()

update() is called every frame for every object. It moves the object by its velocity and handles bounces. This is the simplest form of physics simulation—no gravity, no friction, just linear motion and wall reflection. The size/2 offsets in the bounce conditions prevent the object from going halfway outside the canvas before bouncing back.

🔬 These bounces reverse velocity. What happens if you change *= -1 to *= 0 so objects stop when they hit a wall?

    // Bounce off horizontal walls
    if (this.x > width - this.size / 2 || this.x < this.size / 2) {
      this.vx *= -1;
    }

    // Bounce off vertical walls
    if (this.y > height - this.size / 2 || this.y < this.size / 2) {
      this.vy *= -1;
    }
  update() {
    // Update position
    this.x += this.vx;
    this.y += this.vy;
    this.angle += this.rotationSpeed; // Update rotation

    // Bounce off horizontal walls
    if (this.x > width - this.size / 2 || this.x < this.size / 2) {
      this.vx *= -1;
    }

    // Bounce off vertical walls
    if (this.y > height - this.size / 2 || this.y < this.size / 2) {
      this.vy *= -1;
    }
  }
Line-by-line explanation (7 lines)

🔧 Subcomponents:

calculation Position Update this.x += this.vx; this.y += this.vy;

Moves the object by adding its velocity to its position each frame

calculation Rotation Update this.angle += this.rotationSpeed;

Increases the object's rotation angle by its rotation speed each frame

conditional Horizontal Bounce Detection if (this.x > width - this.size / 2 || this.x < this.size / 2) { this.vx *= -1; }

Reverses horizontal velocity when the object crosses the left or right canvas edge

conditional Vertical Bounce Detection if (this.y > height - this.size / 2 || this.y < this.size / 2) { this.vy *= -1; }

Reverses vertical velocity when the object crosses the top or bottom canvas edge

this.x += this.vx;
Adds the horizontal velocity to the x position, moving the object left or right
this.y += this.vy;
Adds the vertical velocity to the y position, moving the object up or down
this.angle += this.rotationSpeed;
Adds the rotation speed to the current angle, making the object spin gradually
if (this.x > width - this.size / 2 || this.x < this.size / 2) {
Checks if the object has moved past the right edge (x > width - size/2) OR past the left edge (x < size/2)
this.vx *= -1;
Multiplies velocity by -1, flipping its sign; positive velocity becomes negative and vice versa, reversing direction
if (this.y > height - this.size / 2 || this.y < this.size / 2) {
Checks if the object has moved past the bottom edge (y > height - size/2) OR past the top edge (y < size/2)
this.vy *= -1;
Reverses vertical velocity when hitting the top or bottom wall

display()

display() is called every frame for every object. It uses push()/pop() to save and restore the canvas state, then translate and rotate to position and orient the object. The nested switch statements are very long (100 cases total) but follow the same pattern: set colors, draw shapes. This is the most visually complex part of the sketch—each case is a small drawing routine.

🔬 These lines move the origin and rotate the canvas. What happens if you comment out rotate(this.angle) so objects don't spin?

    push();
    translate(this.x, this.y);
    rotate(this.angle);
  display() {
    fill(this.color);
    noStroke();
    push();
    translate(this.x, this.y);
    rotate(this.angle);

    // Draw different objects based on category and type
    switch (this.category) {
      case 'electronics':
        switch (this.type) {
          case 'smartphone':
            rect(-this.size / 3, -this.size / 2, this.size * 2 / 3, this.size, 5); // Body
            fill(this.color.levels[0] * 0.8, this.color.levels[1] * 0.8, this.color.levels[2] * 0.8);
            rect(-this.size / 4, -this.size / 2 + 5, this.size / 2, this.size - 10, 3); // Screen
            fill(255); ellipse(0, this.size / 2 - 10, 5, 5); // Button
            break;
          // ... 24 more electronics cases ...
        }
        break;
      case 'school_supplies':
        switch (this.type) {
          // ... 25 school_supplies cases ...
        }
        break;
      case 'household':
        switch (this.type) {
          // ... 25 household cases ...
        }
        break;
      case 'outdoor_supplies':
        switch (this.type) {
          // ... 25 outdoor_supplies cases ...
        }
        break;
    }
    pop();
  }
Line-by-line explanation (9 lines)

🔧 Subcomponents:

calculation Drawing Setup fill(this.color); noStroke(); push(); translate(this.x, this.y); rotate(this.angle);

Sets the fill color, disables outlines, and transforms the coordinate system to this object's position and rotation

switch-case Category Selection Switch switch (this.category) {

Routes to the correct drawing code based on the object's category (electronics, school_supplies, household, outdoor_supplies)

switch-case Object Type Switch switch (this.type) {

Within each category, routes to the specific drawing code for that object type (e.g., 'smartphone', 'pencil', 'chair')

calculation Coordinate Cleanup pop();

Restores the canvas coordinate system to its previous state, undoing the translate and rotate

fill(this.color);
Sets the fill color to this object's random color
noStroke();
Disables outlines on all shapes drawn in this object
push();
Saves the current canvas state (position, rotation, fill color) so we can restore it later
translate(this.x, this.y);
Moves the origin (0,0) to this object's x,y position on the canvas
rotate(this.angle);
Rotates the entire coordinate system by this object's current angle, so all shapes drawn are rotated
switch (this.category) {
Begins a switch statement that directs execution to the correct case based on the object's category
case 'electronics':
If this.category equals 'electronics', execute the nested switch statement for electronics types
switch (this.type) {
A nested switch that selects the specific drawing code for this object's type within the category
pop();
Restores the canvas state, undoing the translate and rotate so other objects draw at the correct position

windowResized()

windowResized() is called automatically whenever the browser window is resized. By calling resizeCanvas(), we ensure the sketch always fills the entire visible window. This is optional but makes the sketch more responsive to user actions.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-display initial prompt if no objects are present
  if (objects.length === 0) {
    background(220);
    textAlign(CENTER, CENTER);
    textSize(18);
    fill(50);
    text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);
  }
}
Line-by-line explanation (4 lines)

🔧 Subcomponents:

calculation Canvas Resize resizeCanvas(windowWidth, windowHeight);

Resizes the canvas to match the new window dimensions when the browser is resized

conditional Prompt Redisplay Conditional if (objects.length === 0) {

Checks if no objects are currently spawned, and if so, redisplays the instruction prompt

resizeCanvas(windowWidth, windowHeight);
Changes the canvas dimensions to match the current browser window width and height
if (objects.length === 0) {
Checks if the objects array is empty (no bouncing objects are currently on screen)
background(220);
Clears the canvas with light gray
text("Type a number (1-1,000,000) and press ENTER to spawn objects.", width / 2, height / 2);
Redisplays the instruction prompt centered on the newly sized canvas

📦 Key Variables

objects array

Stores all currently active BouncingObject instances; cleared and repopulated when the user spawns new objects

let objects = [];
typedNumber string

Accumulates the digits the user types, displayed on screen, and converted to an integer when ENTER is pressed

let typedNumber = '';
performanceWarning boolean

Flag that is set to true when the user spawns more than the warning threshold of objects, triggering a red warning message

let performanceWarning = false;
householdObjectTypes object

An object with four keys (categories) that each contain an array of 25 object type names (strings) to randomly pick from when creating new BouncingObjects

const householdObjectTypes = { electronics: [...], school_supplies: [...], household: [...], outdoor_supplies: [...] };
x number

The horizontal position of a BouncingObject on the canvas

this.x = random(this.size / 2, width - this.size / 2);
y number

The vertical position of a BouncingObject on the canvas

this.y = random(this.size / 2, height - this.size / 2);
vx number

The horizontal velocity of a BouncingObject in pixels per frame; added to x every frame

this.vx = random(-4, 4);
vy number

The vertical velocity of a BouncingObject in pixels per frame; added to y every frame

this.vy = random(-4, 4);
size number

The width and height diameter of a BouncingObject in pixels

this.size = random(30, 80);
color p5.Color

The RGB fill color of a BouncingObject, randomly assigned at creation

this.color = color(random(255), random(255), random(255));
category string

The category name of this object's type: 'electronics', 'school_supplies', 'household', or 'outdoor_supplies'

this.category = random(categories);
type string

The specific type name of this object (e.g., 'smartphone', 'pencil', 'chair'), randomly selected from the category's array

this.type = random(householdObjectTypes[this.category]);
angle number

The rotation angle of a BouncingObject in radians, increased by rotationSpeed every frame

this.angle = random(TWO_PI);
rotationSpeed number

How many radians per frame this BouncingObject's angle increases; controls spin speed

this.rotationSpeed = random(-0.02, 0.02);

🔧 Potential Improvements (5)

Here are some ways this code could be enhanced:

PERFORMANCE display() method, nested switch statements

100 nested switch/case statements make the display() method extremely long (~500+ lines) and hard to maintain. As the number of object types grows, performance of the switch statement evaluation increases.

💡 Refactor to use a drawingFunctions object that maps type names to drawing functions: const drawingFunctions = { smartphone: (size, color) => {...}, pencil: (size, color) => {...} }; Then call drawingFunctions[this.type](this.size, this.color) instead of giant switch statements.

BUG BouncingObject.constructor()

Objects can be spawned very close to or exactly on the canvas edges, causing them to instantly bounce back and forth. The boundary check in update() uses this.size / 2 but the spawn position allows objects to start at exactly that boundary.

💡 Add a small margin when spawning: this.x = random(this.size / 2 + 5, width - this.size / 2 - 5); to ensure objects spawn safely away from walls.

STYLE householdObjectTypes constant

The object has 'clipboard' listed twice in school_supplies (lines for both 'clipboard' and a duplicate 'clipboard' case in display()), and 'compass' appears in both school_supplies and outdoor_supplies, which creates redundancy.

💡 Remove the duplicate 'clipboard' from school_supplies and either remove 'compass' from one category or rename it (e.g., 'school_compass' vs 'orienteering_compass') to maintain unique types.

FEATURE keyPressed() or global scope

There is no way to stop or pause the animation, clear all objects with a single keypress, or adjust the warning threshold interactively.

💡 Add a spacebar listener to toggle pause/resume, and allow the user to press 'C' to clear all objects or 'W' to toggle the warning off. Example: if (key === ' ') togglePause = !togglePause; at the start of draw().

PERFORMANCE display() color brightness adjustment

Every frame, every object accesses this.color.levels[0/1/2] to create darker shades for details. The .levels property is accessed 3x per object per frame. With 1000+ objects, this is thousands of property accesses per frame.

💡 Cache the darker color in the constructor: this.darkColor = color(this.color.levels[0] * 0.8, this.color.levels[1] * 0.8, this.color.levels[2] * 0.8); Then use this.darkColor in display() instead of recalculating.

🔄 Code Flow

Code flow showing setup, draw, keytyped, keypressed, bouncingobject, update, display, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> instruction-display[Instruction Text Display] draw --> typed-number-display[Typed Number Display] draw --> performance-warning[Performance Warning Conditional] draw --> object-update-loop[Object Update and Display Loop] object-update-loop --> update[update] update --> position-update[Position Update] update --> rotation-update[Rotation Update] update --> horizontal-bounce[Horizontal Bounce Detection] update --> vertical-bounce[Vertical Bounce Detection] object-update-loop --> display[display] display --> setup-drawing[Drawing Setup] display --> category-switch[Category Selection Switch] category-switch --> type-switch[Object Type Switch] display --> cleanup[Coordinate Cleanup] draw --> windowresized[windowResized] click setup href "#fn-setup" click draw href "#fn-draw" click instruction-display href "#sub-instruction-display" click typed-number-display href "#sub-typed-number-display" click performance-warning href "#sub-performance-warning" click object-update-loop href "#sub-object-update-loop" click update href "#fn-update" click position-update href "#sub-position-update" click rotation-update href "#sub-rotation-update" click horizontal-bounce href "#sub-horizontal-bounce" click vertical-bounce href "#sub-vertical-bounce" click display href "#fn-display" click setup-drawing href "#sub-setup-drawing" click category-switch href "#sub-category-switch" click type-switch href "#sub-type-switch" click cleanup href "#sub-cleanup" click windowresized href "#fn-windowresized" draw --> keytyped[keyTyped] keytyped --> digit-check[Digit Validation Check] digit-check --> length-limit[Length Limit Check] length-limit --> enter-check[ENTER Key Detection] enter-check --> parse-number[String to Integer Conversion] parse-number --> spawn-loop[Object Spawning Loop] spawn-loop --> size-init[Random Size Assignment] spawn-loop --> position-init[Random Position Assignment] spawn-loop --> velocity-init[Random Velocity Assignment] spawn-loop --> color-init[Random Color Assignment] spawn-loop --> type-selection[Random Object Type Selection] spawn-loop --> rotation-init[Rotation Properties] spawn-loop --> warning-check[Performance Warning Trigger] click keytyped href "#fn-keytyped" click digit-check href "#sub-digit-check" click length-limit href "#sub-length-limit" click enter-check href "#sub-enter-check" click parse-number href "#sub-parse-number" click spawn-loop href "#sub-spawn-loop" click size-init href "#sub-size-init" click position-init href "#sub-position-init" click velocity-init href "#sub-velocity-init" click color-init href "#sub-color-init" click type-selection href "#sub-type-selection" click rotation-init href "#sub-rotation-init" click warning-check href "#sub-warning-check" draw --> prompt-redisplay[Prompt Redisplay Conditional] click prompt-redisplay href "#sub-prompt-redisplay"

❓ Frequently Asked Questions

What visual elements does the object spawner FPS test sketch create?

The sketch visually generates various household and outdoor objects that bounce around the canvas, creating a dynamic and colorful display.

How can users interact with the object spawner sketch?

Users can type a number to specify how many objects they want to spawn, allowing for customization of the visual experience.

What creative coding concepts are demonstrated in the object spawner FPS test?

This sketch showcases techniques such as object-oriented programming through the use of arrays and dynamic object creation, as well as performance testing by observing frame rates with varying object counts.

Preview

object spawner fps test - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of object spawner fps test - Code flow showing setup, draw, keytyped, keypressed, bouncingobject, update, display, windowresized
Code Flow Diagram