AI Coin Flip - Heads or Tails with Stats

This sketch creates an interactive coin flip simulator with a satisfying animation. When you click the canvas, a gold coin spins for one second using a cosine wave to create a realistic flip effect, then randomly lands on either Heads or Tails. The sketch tracks your flip history and displays running counts of each result.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation timingTrigonometric functionsMouse interactionCanvas transformationState managementRandom number generationTime-based animation

🔄 Code Flow

Code flow showing setup, draw, mousepressed, windowresized

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

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> ui-text[UI Text Display] draw --> flip-animation[Flip Animation Logic] draw --> coin-drawing[Coin Rendering] flip-animation --> elapsed-time[Calculate Elapsed Time] flip-animation --> cosine-value[Calculate Cosine Value] flip-animation --> animation-control[Animate Spin with Cosine] flip-animation --> final-result[Determine Final Result] click setup href "#fn-setup" click draw href "#fn-draw" click ui-text href "#sub-ui-text" click flip-animation href "#sub-flip-animation" click coin-drawing href "#sub-coin-drawing" click elapsed-time href "#sub-elapsed-time" click cosine-value href "#sub-cosine-value" click animation-control href "#sub-animation-control" click final-result href "#sub-final-result"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. It's the perfect place to initialize your canvas and set default drawing settings that apply to the whole sketch.

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

Line by Line:

createCanvas(windowWidth, windowHeight): Creates a canvas that fills the entire browser window, making the coin flip experience fullscreen
textAlign(CENTER, CENTER): Sets text alignment so that all text is centered both horizontally and vertically at its coordinates
textSize(80): Sets the default text size to 80 pixels (this will be overridden in draw() for different text elements)

`draw()`

draw() runs 60 times per second, creating smooth animation. The key to this sketch is using millis() to track time since the flip started, then using that elapsed time to calculate the cosine value that creates the spinning effect. The coin appears to flip because we're rapidly changing its Y scale from 1 to -1 and back using a cosine wave.

function draw() {
  background(220); // Light gray
  fill(0); textSize(24); text('Click to flip!', width/2, height/4); // Top instruction
  textSize(20); text(`H: ${h} | T: ${t}`, width/2, height*3/4); // Result counts

  push(); translate(width/2, height/2); // Center coin
  if (f) {
    let e=millis()-fs;
    if (e<1000) sy=cos(e*.02*PI); // Flip animation: scaleY oscillates for 1 second
    else {
      f=0; (random()<0.5) ? (r='H',h++,sy=1) : (r='T',t++,sy=-1); // Random result, update counts, set final scaleY
    }
  }
  scale(1,sy); fill(255,215,0); noStroke(); circle(0,0,150); // Coin circle
  fill(0); textSize(80); text(r,0,0); // Coin text
  pop();
}

🔧 Subcomponents:

drawing UI Text Display

fill(0); textSize(24); text('Click to flip!', width/2, height/4);
  textSize(20); text(`H: ${h} | T: ${t}`, width/2, height*3/4);

Displays the instruction text at the top and the running count of heads and tails at the bottom

conditional Flip Animation Logic

if (f) {
    let e=millis()-fs;
    if (e<1000) sy=cos(e*.02*PI);
    else {
      f=0; (random()<0.5) ? (r='H',h++,sy=1) : (r='T',t++,sy=-1);
    }
  }

Controls the coin flip animation - calculates elapsed time, animates the spin using cosine, and determines the final result

drawing Coin Rendering

scale(1,sy); fill(255,215,0); noStroke(); circle(0,0,150);
  fill(0); textSize(80); text(r,0,0);

Draws the gold coin circle and the result letter (H or T) in the center

Line by Line:

background(220): Clears the canvas with light gray color each frame, erasing the previous frame's drawing
fill(0); textSize(24); text('Click to flip!', width/2, height/4): Sets text color to black, size to 24, and draws the instruction text at the top center of the screen
textSize(20); text(`H: ${h} | T: ${t}`, width/2, height*3/4): Changes text size to 20 and displays the current count of heads and tails at the bottom of the screen
push(); translate(width/2, height/2): Saves the current drawing state and moves the origin (0,0) to the center of the canvas so the coin draws centered
if (f) {: Checks if a flip is currently in progress (f equals 1 when flipping, 0 when idle)
let e=millis()-fs: Calculates elapsed time in milliseconds since the flip started by subtracting the flip start time from current time
if (e<1000) sy=cos(e*.02*PI): While less than 1 second has passed, updates the Y scale using cosine to create a smooth spinning effect that oscillates between -1 and 1
else {: When 1 second has passed, the flip animation is complete
f=0: Stops the flip animation by setting f to 0
(random()<0.5) ? (r='H',h++,sy=1) : (r='T',t++,sy=-1): Uses a ternary operator to randomly choose heads or tails: 50% chance for H (increment h count, set sy to 1), 50% for T (increment t count, set sy to -1)
scale(1,sy): Applies the Y scale transformation to squash or stretch the coin vertically, creating the flip illusion
fill(255,215,0); noStroke(); circle(0,0,150): Sets fill to gold color, removes outline, and draws a circle with diameter 150 at the center
fill(0); textSize(80); text(r,0,0): Sets text color to black, size to 80, and draws the result letter (H or T) at the coin's center
pop(): Restores the previous drawing state and coordinate system, undoing the translate and scale transformations

`mousePressed()`

This function is called automatically whenever the mouse is clicked. By checking if (!f), we prevent multiple flips from happening at the same time - you have to wait for one flip to complete before starting another.

function mousePressed() { if (!f) { f=1; fs=millis(); } }

Line by Line:

if (!f) {: Checks if no flip is currently in progress (!f means f equals 0, so the coin is idle)
f=1: Starts a new flip by setting f to 1, which triggers the animation in draw()
fs=millis(): Records the current time in milliseconds, which is used to calculate how long the flip has been running

`windowResized()`

This function is called automatically by p5.js whenever the browser window is resized. It ensures the coin flipper always fills the entire screen, even if you resize your browser.

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

Line by Line:

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

📦 Key Variables

h number

Stores the count of how many times Heads has been flipped. Incremented each time the coin lands on H.

let h = 0;

t number

Stores the count of how many times Tails has been flipped. Incremented each time the coin lands on T.

let t = 0;

f number

Flip state flag: 0 when idle (no flip happening), 1 when a flip is in progress. Controls whether animation should run.

let f = 0;

fs number

Flip start time: stores the millisecond timestamp when a flip begins, used to calculate elapsed time during animation.

let fs = 0;

r string

Result: stores the current coin result as either 'H' for Heads or 'T' for Tails. Displayed on the coin.

let r = 'H';

sy number

Scale Y: controls the vertical scale of the coin (1 to -1). Creates the flip animation by squashing/stretching the coin vertically.

let sy = 1;

🧪 Try This!

Experiment with the code by making these changes:

Change the gold color from fill(255,215,0) to fill(200,100,200) to make the coin purple instead
Modify the flip duration from 1000 milliseconds to 2000 to make the coin spin for 2 seconds instead of 1
Change the coin size from circle(0,0,150) to circle(0,0,200) to make it larger, or 100 to make it smaller
Add a sound effect by using p5.sound library - play a sound when the flip completes (after the else statement on line where f=0)
Change the animation formula from sy=cos(e*.02*PI) to sy=cos(e*.04*PI) to make the coin spin twice as fast during the flip

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

STYLE Variable declarations

Variables use single-letter names (h, t, f, fs, r, sy) which are hard to understand without comments

💡 Use descriptive names like: let headsCount=0, tailsCount=0, isFlipping=0, flipStartTime=0, result='H', scaleY=1

BUG mousePressed() function

The function doesn't return false, which means the default browser click behavior might interfere with the sketch

💡 Add 'return false;' at the end of mousePressed() to prevent unwanted browser interactions

PERFORMANCE draw() function - text rendering

textSize() is called multiple times per frame even though it doesn't change between frames

💡 Move textSize(24) and textSize(20) calls outside the draw loop or cache them as constants to reduce unnecessary function calls

FEATURE Overall sketch

No visual feedback that the coin landed - the transition from spinning to final result is abrupt

💡 Add a brief pause or visual effect (like a flash or bounce) when the flip completes to make the result feel more satisfying

FEATURE Statistics display

Only shows raw counts, no percentage or probability information

💡 Add a percentage display like 'H: 5 (50%) | T: 5 (50%)' to help visualize if results are balanced

Preview

Code flow diagram showing the structure of AI Coin Flip - Heads or Tails with Stats - Code flow showing setup, draw, mousepressed, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview