Skip to main content

Using Cookie Images Instead of Shapes

Instead of drawing the cookie as a brown circle with an emoji, you can use an actual cookie image file. This guide shows you how to load and display images in p5.js!

What You'll Learn​

  • How to use the preload() function
  • How to load images from the web or your computer
  • How to display images at the center of the canvas
  • How to scale images with animations

Understanding preload()​

The preload() function runs before setup() and is perfect for loading files like images, sounds, and fonts. This ensures everything is ready before your program starts.

function preload() {
  // Load images here
  cookieImage = loadImage('URL_TO_YOUR_IMAGE_HERE');
}

Breaking it down:

  • preload() is a special p5.js function that runs first
  • loadImage() loads an image from a URL or file path
  • We store it in the cookieImage variable so we can use it in draw()

Option 1: Use an Image from the Web​

Find a cookie image online (a good cookie PNG with transparency):

function preload() {
  cookieImage = loadImage('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400');
}

Recommended sources:

Option 2: Upload an Image in p5.js Editor​

  1. In the p5.js Web Editor, click the file icon (folder icon) in the top-left
  2. Click "Upload file"
  3. Choose your cookie image file
  4. Use the uploaded image path:
function preload() {
  cookieImage = loadImage('cookie.png');  // Use your filename
}

Drawing the Image​

Basic Image Display​

Add a cookieImage variable at the top and update your draw() function:

let cookieImage;

function preload() {
  cookieImage = loadImage('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400');
}

function draw() {
  background(240, 230, 220);
  
  // Draw the cookie image at the center
  push();
  imageMode(CENTER);
  image(cookieImage, width/2, height/2, 150, 150);
  pop();
  
  // Display score
  fill(0);
  textSize(36);
  textAlign(CENTER);
  text(score + ' cookies', width/2, 50);
}

Breaking it down:

push() and pop()​

push();
// ... drawing code ...
pop();
  • push() saves the current drawing settings (colors, transformations, etc.)
  • pop() restores those settings to how they were before push()
  • This keeps our image settings from affecting other drawings

imageMode(CENTER)​

imageMode(CENTER);
  • By default, image() positions the top-left corner at the coordinates
  • imageMode(CENTER) positions the center of the image at the coordinates
  • This makes it easier to center the image on the canvas

Drawing the Image​

image(cookieImage, width/2, height/2, 150, 150);
  • cookieImage - The image to display
  • width/2 - X position (horizontal center)
  • height/2 - Y position (vertical center)
  • 150 - Width in pixels
  • 150 - Height in pixels

Adding Animation​

You can animate the image size just like before! Update your variables:

let cookieImage;
let cookieSize = 150;
let score = 0;

function preload() {
  cookieImage = loadImage('https://images.unsplash.com/photo-1499636136210-6f4ee915583e?w=400');
}

function draw() {
  background(240, 230, 220);
  
  // Grow the cookie back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the animated cookie image
  push();
  imageMode(CENTER);
  image(cookieImage, width/2, height/2 - 50, cookieSize, cookieSize);
  pop();
  
  // Display score
  fill(0);
  textSize(36);
  textAlign(CENTER);
  text(score + ' cookies', width/2, 50);
}

function mousePressed() {
  // Check if cookie is clicked
  let d = dist(mouseX, mouseY, width/2, height/2 - 50);
  
  if (d < 75) {  // 75 is the radius
    score++;
    cookieSize = 135;  // Shrink the cookie
  }
}

Complete Code with Image​

Here's how to modify the complete code to use an image:

// Global variables
let score = 0;
let cookieSize = 150;
let cookieImage;
let floatingTexts = [];
let autoClickers = 0;
let autoClickerCost = 10;
let buttonX, buttonY;
let buttonWidth = 200;
let buttonHeight = 60;
let particles = [];

function preload() {
  // Load the cookie image from the web
  cookieImage = loadImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-0fda82kJu_k4skgYTqbZFam6J6zaK6bw2A&s');
}

function setup() {
  createCanvas(800, 600);
  buttonX = width/2 - buttonWidth/2;
  buttonY = height - 120;
}

function draw() {
  background(240, 230, 220);
  
  // Auto-generate cookies every second
  if (frameCount % 60 === 0 && autoClickers > 0) {
    score += autoClickers;
  }
  
  // Cookie animation - smoothly grow back to normal size
  if (cookieSize < 150) {
    cookieSize += 2;
  }
  
  // Draw the cookie image
  push();
  imageMode(CENTER);
  image(cookieImage, width/2, height/2 - 50, cookieSize, cookieSize);
  pop();
  
  // ... rest of your draw code (floating texts, particles, buttons, etc.)
}

function mousePressed() {
  // Check if cookie is clicked
  let d = dist(mouseX, mouseY, width/2, height/2 - 50);
  
  if (d < 75) {  // 75 is the radius
    score++;
    cookieSize = 135;
    
    // Create floating text and particles...
  }
  
  // ... rest of your mousePressed code
}
Finding Good Cookie Images

Look for:

  • ✅ PNG format with transparent background (looks better)
  • ✅ Square images (easier to scale)
  • ✅ High resolution (scales down nicely)
  • ✅ Perspective shot that looks good at small sizes
Image Performance
  • Images from the web need an internet connection
  • For faster loading, upload images to the p5.js editor
  • Keep image files under 500KB for best performance
Customization Ideas
  • Use different cookie images based on score milestones
  • Animate the rotation with the rotate() function
  • Add shadows using darker images or canvas effects
  • Use a golden glow with filters

Common Issues​

Image Not Loading?​

Problem: You see a blank space instead of your image.

Solutions:

  • Check the image URL is correct and accessible
  • Make sure preload() is spelled correctly
  • Try a different image URL
  • Check your browser console for error messages (F12)

Image is Blurry?​

Problem: The image looks pixelated or unclear.

Solutions:

  • Use a higher resolution image
  • Don't scale the image larger than its original size
  • Try a different cookie image

Click Detection Doesn't Work?​

Problem: Clicking the image doesn't register.

Explanation: The click detection uses a circular area (dist() calculates distance), not the image shape. If your cookie image is very non-circular, the click area might feel wrong.

Solution: Adjust the click radius (75 in the example) to match your image better.

Next Steps​

Now that you have a beautiful cookie image:

  • 🎨 Try different cookie images
  • 🎯 Adjust the click detection radius for your specific image
  • ✨ Add rotation or other effects using p5.js transformations
  • 🎮 Apply this technique to other game elements!