AI Procrastinating Rocket - Countdown with Excuses

This sketch creates a humorous animation of a procrastinating rocket that counts down to launch but keeps resetting with random excuses. The rocket displays a countdown timer, tracks launch attempts, and shows excuses like 'Wait, did I leave the stove on?' that interrupt the countdown, creating a relatable comedy about procrastination that never reaches zero.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopTiming with millis()Conditional logicRandom selectionText renderingCanvas transformationsState managementEvent-driven behavior

🔄 Code Flow

Code flow showing setup, draw, drawrocket, triggerexcuse, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> cloudanimation[cloud-animation] draw --> countdowntimer[countdown-timer] draw --> excusetrigger[excuse-trigger] draw --> zerotrigger[zero-trigger] draw --> excusetimeout[excuse-timeout] draw --> drawrocket[drawrocket] drawrocket --> rocketbody[rocket-body] drawrocket --> rocketnose[rocket-nose] drawrocket --> rocketfins[rocket-fins] drawrocket --> launchpad[launch-pad] triggerexcuse --> showexcuse[show-excuse] triggerexcuse --> selectexcuse[select-excuse] triggerexcuse --> recordtime[record-time] triggerexcuse --> incrementattempts[increment-attempts] triggerexcuse --> resetcountdown[reset-countdown] click setup href "#fn-setup" click draw href "#fn-draw" click cloudanimation href "#sub-cloud-animation" click countdowntimer href "#sub-countdown-timer" click excusetrigger href "#sub-excuse-trigger" click zerotrigger href "#sub-zero-trigger" click excusetimeout href "#sub-excuse-timeout" click drawrocket href "#fn-drawrocket" click rocketbody href "#sub-rocket-body" click rocketnose href "#sub-rocket-nose" click rocketfins href "#sub-rocket-fins" click launchpad href "#sub-launch-pad" click showexcuse href "#sub-show-excuse" click selectexcuse href "#sub-select-excuse" click recordtime href "#sub-record-time" click incrementattempts href "#sub-increment-attempts" click resetcountdown href "#sub-reset-countdown"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It configures the canvas size and text/shape drawing modes that will be used throughout the sketch. Using windowWidth and windowHeight makes the sketch responsive to different screen sizes.

function setup(){
  createCanvas(windowWidth,windowHeight);
  textAlign(CENTER,CENTER);
  textSize(32);
  rectMode(CENTER);
}

Line by Line:

createCanvas(windowWidth,windowHeight): Creates a canvas that fills the entire browser window, making the sketch responsive to window size
textAlign(CENTER,CENTER): Centers all text both horizontally and vertically around the coordinates where text is drawn
textSize(32): Sets the font size to 32 pixels for all text drawn after this point
rectMode(CENTER): Changes rectangle drawing mode so coordinates represent the center point instead of the top-left corner

`draw()`

draw() runs 60 times per second, creating the animation. This function handles the main game logic: managing the countdown timer, randomly triggering excuses, and displaying all visual elements. The key to understanding this sketch is how millis() tracks real time to create the countdown independent of frame rate.

function draw(){
  background(150,200,255);
  noStroke();fill(255);
  for(let i=0;i<3;i++){
    let cx=width*(0.2+0.3*i),cy=height*0.2+20*sin(frameCount*0.01+i);
    ellipse(cx,cy,120,60);
    ellipse(cx+40,cy+10,80,50);
    ellipse(cx-40,cy+10,80,50);
  }
  let now=millis();
  if(!showing&&now-lastTick>1000){
    lastTick=now;
    if(random()<0.25&&count<10) triggerExcuse();
    else{
      count--;
      if(count<=0) triggerExcuse();
    }
  }
  if(showing&&now-excuseStart>2500) showing=false;
  drawRocket();
  fill(0);
  text('Countdown: '+count,width/2,50);
  text('Launch Attempts: '+attempts,width/2,90);
  if(showing) text(excuse,width/2,height*0.3);
}

🔧 Subcomponents:

for-loop Animated Cloud Background for(let i=0;i<3;i++){...}

Draws three animated clouds that bob up and down using sine wave motion to create a sky effect

conditional Countdown Logic if(!showing&&now-lastTick>1000){...}

Decrements the countdown every 1000 milliseconds (1 second) unless an excuse is currently showing

conditional Random Excuse Trigger if(random()<0.25&&count<10) triggerExcuse();

Has a 25% chance to trigger an excuse before countdown reaches zero, adding unpredictability

conditional Zero Countdown Trigger if(count<=0) triggerExcuse();

Triggers an excuse when countdown reaches zero instead of launching

conditional Excuse Display Timeout if(showing&&now-excuseStart>2500) showing=false;

Hides the excuse text after 2.5 seconds so the countdown can resume

Line by Line:

background(150,200,255): Fills the entire canvas with a light blue color, clearing the previous frame
noStroke();fill(255): Removes outlines from shapes and sets fill color to white for drawing clouds
for(let i=0;i<3;i++){: Loops 3 times to draw 3 clouds at different positions across the sky
let cx=width*(0.2+0.3*i),cy=height*0.2+20*sin(frameCount*0.01+i): Calculates cloud position: cx spreads clouds horizontally (20%, 50%, 80% of width), cy makes them bob vertically using a sine wave
ellipse(cx,cy,120,60);ellipse(cx+40,cy+10,80,50);ellipse(cx-40,cy+10,80,50): Draws three overlapping ellipses to create a fluffy cloud shape
let now=millis(): Gets the current time in milliseconds since the sketch started
if(!showing&&now-lastTick>1000){: Checks if no excuse is showing AND at least 1000 milliseconds have passed since the last countdown tick
lastTick=now: Records the current time as the last time the countdown was updated
if(random()<0.25&&count<10) triggerExcuse(): 25% chance to trigger an excuse if countdown hasn't reached zero yet, adding randomness to procrastination
else{count--;if(count<=0) triggerExcuse();}: Otherwise, decrements the countdown; if it reaches zero, triggers an excuse instead of launching
if(showing&&now-excuseStart>2500) showing=false: After 2.5 seconds of showing an excuse, hides it and resets the countdown
drawRocket(): Calls the function that draws the rocket graphic
fill(0);text('Countdown: '+count,width/2,50): Sets text color to black and displays the current countdown number at the top center
text('Launch Attempts: '+attempts,width/2,90): Displays the total number of times the rocket has tried to launch
if(showing) text(excuse,width/2,height*0.3): If an excuse is currently active, displays it in the middle of the screen

`drawRocket()`

This function is purely visual - it draws a stylized rocket made from basic shapes (rectangles and triangles). The rocket never actually moves; it stays in the same position while the countdown and excuses change around it. This is a good example of separating visual rendering into its own function for code organization.

function drawRocket(){
  let rx=width/2,ry=height*0.75,bh=140,bw=50;
  fill(200);rect(rx,ry,bw,bh);
  fill(220,0,60);triangle(rx,ry-bh/2-40,rx-30,ry-bh/2,rx+30,ry-bh/2);
  fill(255,120,0);
  triangle(rx-bw/2,ry+bh/2,rx-bw,ry+bh/4,rx-bw,ry+bh/2+30);
  triangle(rx+bw/2,ry+bh/2,rx+bw,ry+bh/4,rx+bw,ry+bh/2+30);
  fill(80);rect(width/2,height*0.9,140,25);
  rect(width/2,height*0.82,12,90);
}

🔧 Subcomponents:

calculation Rocket Body fill(200);rect(rx,ry,bw,bh)

Draws the main gray cylindrical body of the rocket

calculation Rocket Nose Cone fill(220,0,60);triangle(rx,ry-bh/2-40,rx-30,ry-bh/2,rx+30,ry-bh/2)

Draws the red pointed nose cone at the top of the rocket

calculation Rocket Fins fill(255,120,0);triangle(...);triangle(...)

Draws two orange flame-colored fins on the sides of the rocket

calculation Launch Pad fill(80);rect(width/2,height*0.9,140,25);rect(width/2,height*0.82,12,90)

Draws the dark gray launch pad platform and support structure beneath the rocket

Line by Line:

let rx=width/2,ry=height*0.75,bh=140,bw=50: Sets up variables: rx/ry are rocket center position (middle horizontally, 75% down vertically), bh is body height (140), bw is body width (50)
fill(200);rect(rx,ry,bw,bh): Fills with gray and draws the main rocket body as a rectangle centered at (rx, ry)
fill(220,0,60);triangle(rx,ry-bh/2-40,rx-30,ry-bh/2,rx+30,ry-bh/2): Fills with red and draws a pointed nose cone triangle above the rocket body
fill(255,120,0);triangle(rx-bw/2,ry+bh/2,rx-bw,ry+bh/4,rx-bw,ry+bh/2+30): Fills with orange and draws the left fin as a triangle extending from the bottom-left of the rocket
triangle(rx+bw/2,ry+bh/2,rx+bw,ry+bh/4,rx+bw,ry+bh/2+30): Draws the right fin as a triangle extending from the bottom-right of the rocket
fill(80);rect(width/2,height*0.9,140,25): Fills with dark gray and draws the launch pad platform below the rocket
rect(width/2,height*0.82,12,90): Draws a vertical support structure connecting the platform to the rocket

`triggerExcuse()`

This function is called whenever the rocket needs to make an excuse. It's a state-changing function that updates multiple variables at once: it enables excuse display, picks a random excuse, records the time, increments the attempt counter, and resets the countdown. This is a good example of bundling related state changes into a single function.

function triggerExcuse(){showing=true;excuse=random(excuses);excuseStart=millis();attempts++;count=10;}

🔧 Subcomponents:

assignment Enable Excuse Display showing=true

Sets the flag to true so the excuse text will be drawn in the next draw() call

calculation Random Excuse Selection excuse=random(excuses)

calculation Record Excuse Start Time excuseStart=millis()

Saves the current time so we know when to hide the excuse (after 2.5 seconds)

calculation Increment Launch Attempts attempts++

Increases the launch attempts counter by 1

assignment Reset Countdown count=10

Resets the countdown back to 10 so it starts over after the excuse

Line by Line:

showing=true: Sets the showing flag to true, which tells draw() to display the current excuse text
excuse=random(excuses): Randomly selects one excuse from the excuses array and stores it in the excuse variable
excuseStart=millis(): Records the current time in milliseconds so we can measure when 2.5 seconds have passed
attempts++: Increments the attempts counter by 1, tracking how many times the rocket has tried to launch
count=10: Resets the countdown back to 10, so after the excuse disappears, the countdown starts fresh

`windowResized()`

windowResized() is a special p5.js function that automatically gets called whenever the browser window is resized. By calling resizeCanvas(), we ensure the sketch always fills the entire window, making it responsive to different screen sizes. This is important for creating sketches that work on phones, tablets, and desktops.

function windowResized(){resizeCanvas(windowWidth,windowHeight);}

Line by Line:

resizeCanvas(windowWidth,windowHeight): Automatically resizes the p5.js canvas to match the new window dimensions when the browser window is resized

📦 Key Variables

count number

Stores the current countdown value (starts at 10, decrements each second, resets when excuse is triggered)

let count=10;

lastTick number

Stores the time (in milliseconds) of the last countdown update, used to create the 1-second interval between countdown decrements

let lastTick=0;

excuse string

Stores the current excuse text that is displayed on screen

let excuse='';

showing boolean

Boolean flag that tracks whether an excuse is currently being displayed (true) or hidden (false)

let showing=false;

excuseStart number

Stores the time (in milliseconds) when the current excuse started showing, used to know when to hide it after 2.5 seconds

let excuseStart=0;

attempts number

Tracks the total number of launch attempts (incremented each time an excuse is triggered)

let attempts=0;

excuses array

Array of strings containing all possible excuses that the rocket can use to procrastinate

const excuses=['Wait, did I leave the stove on?','Actually, space looks cold...','One more minute...','Is my insurance valid?'];

🧪 Try This!

Experiment with the code by making these changes:

Change the countdown starting number from 10 to 5 on line 1 (let count=10) to make the rocket launch faster, or change it to 20 to give it more time to procrastinate
Modify the excuses array to add your own procrastination excuses like 'Did I lock the door?' or 'Let me check my phone first' - add them as new strings in the array
Change the 0.25 probability on line 17 (if(random()<0.25&&count<10)) to 0.5 to make excuses trigger twice as often, or 0.1 to make them rarer
Increase the excuse display time from 2500 milliseconds to 4000 on line 20 to keep excuses visible longer before the countdown resumes
Change the rocket's vertical position from height*0.75 to height*0.5 in drawRocket() to move it higher on the screen

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

BUG draw() line 17-21

If an excuse is triggered at count=0, the countdown resets to 10 but then immediately decrements to 9 in the next second because the logic doesn't prevent double-triggering

💡 Add a check to prevent countdown from decrementing while showing=true, or restructure the if-else logic to be mutually exclusive

STYLE All functions

Variable names are abbreviated (rx, ry, bh, bw, cx, cy) which makes code harder to read for beginners

💡 Use more descriptive names like rocketX, rocketY, bodyHeight, bodyWidth, cloudX, cloudY to improve readability

FEATURE triggerExcuse() function

Excuses can repeat consecutively if random() picks the same one twice in a row, reducing humor

💡 Track the last excuse shown and ensure the next one is different: let lastExcuse=''; then use a while loop to pick a different one

PERFORMANCE draw() line 6-10

Cloud animation uses sin(frameCount*0.01+i) which recalculates every frame; with high framerates this could be optimized

💡 This is actually fine for this sketch, but for larger sketches, pre-calculating sine values or using noise() could be more efficient

FEATURE sketch overall

The rocket never actually launches - it just keeps resetting. There's no end state or win condition

💡 Add a rare chance (like 0.01) that the rocket actually launches and plays a celebratory animation, giving players a goal to work toward

Preview

Code flow diagram showing the structure of AI Procrastinating Rocket - Countdown with Excuses - Code flow showing setup, draw, drawrocket, triggerexcuse, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview