Create

sigmaskibidi

This is a minimal p5.js template that creates a canvas filling the entire browser window and maintains that full-screen size whenever the window is resized. It serves as a clean starting point for any p5.js creative coding project.

Open in Editor Remix View in Gallery

🧪 Try This!

Experiment with the code by making these changes:

  1. Paint the canvas blue — The background() function accepts RGB color values - three numbers from 0-255 for red, green, and blue
  2. Remove the background clearing — Without background(), drawing will accumulate each frame, creating trails and visual layering effects
  3. Use a fixed canvas size — Replace responsive sizing with fixed pixel dimensions to see how the canvas behaves differently when you resize your browser
Prefer the full editor? Open it there →

📖 About This Sketch

This sketch demonstrates the essential structure every p5.js project needs: a setup() function that initializes a full-screen canvas, a draw() function that runs every frame, and a windowResized() function that keeps the canvas responsive when the browser is resized. The canvas fills the entire browser window and stays centered and edge-to-edge no matter what size the viewport becomes.

By studying this template, you will learn the three core functions that power almost every p5.js sketch: how setup() prepares the environment once at startup, how draw() runs continuously to animate your work, and how windowResized() responds to real-world browser interactions. The accompanying HTML and CSS files show you exactly how to load the p5.js library from a CDN and remove default spacing around the canvas so it truly fills the screen.

⚙️ How It Works

  1. When the page loads, the HTML file imports the p5.js library from a content delivery network (CDN) and then loads sketch.js
  2. The setup() function runs once automatically - it creates a canvas using windowWidth and windowHeight to match the full browser window size
  3. The draw() function begins running at 60 frames per second, painting the canvas with a light gray background (220) every frame
  4. If the user resizes their browser window, the windowResized() function triggers automatically and calls resizeCanvas() to adjust the canvas to the new window dimensions
  5. The CSS file removes all default margins and padding from the body and ensures the canvas displays as a block element, making it truly flush with the window edges

🎓 Concepts You'll Learn

Canvas initializationResponsive designDraw loopWindow eventsSetup and initialization

📝 Code Breakdown

setup()

setup() runs exactly once when the sketch first loads. It is the perfect place to initialize your canvas size, load images, and set starting values for variables. After setup() completes, the draw() function begins running.

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas
}
Line-by-line explanation (1 lines)

🔧 Subcomponents:

calculation Full-window canvas creation createCanvas(windowWidth, windowHeight);

Creates a canvas whose width and height match the current browser window dimensions

createCanvas(windowWidth, windowHeight);
Creates a canvas that spans the exact width and height of the browser window - windowWidth and windowHeight are special p5.js variables that always hold the current window size

draw()

draw() is the beating heart of p5.js - it runs automatically and continuously at 60 frames per second by default. Every single animation and interactive effect in p5.js happens because draw() repeatedly updates and redraws the canvas. Without background(), previous frames would stack up and create trails instead of clearing.

🔬 What happens if you delete the background() line entirely or comment it out with //? How does the canvas behavior change on each new frame?

function draw() {
  background(220);
}
function draw() {
  background(220);
}
Line-by-line explanation (1 lines)

🔧 Subcomponents:

calculation Background clearing background(220);

Fills the entire canvas with a light gray color, erasing whatever was drawn the previous frame

background(220);
Fills the canvas with a gray color (220 is a shade of gray where 0 is black and 255 is white). This happens 60 times per second, clearing the previous frame before anything new is drawn

windowResized()

windowResized() is a special p5.js function that you do not need to call yourself - p5.js calls it automatically whenever the browser window changes size. This is how you keep a full-screen canvas responsive. Without this function, the canvas would stay the original size and become misaligned with the window edges.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}
Line-by-line explanation (1 lines)

🔧 Subcomponents:

calculation Canvas dimension update resizeCanvas(windowWidth, windowHeight);

Updates the canvas dimensions to match the new browser window size whenever the user resizes their window

resizeCanvas(windowWidth, windowHeight);
p5.js automatically calls this function whenever the browser window is resized. The resizeCanvas() function updates the canvas width and height to the new windowWidth and windowHeight values, preventing black bars or stretching

📦 Key Variables

windowWidth number

A special p5.js variable that always holds the current width of the browser window in pixels

createCanvas(windowWidth, windowHeight);
windowHeight number

A special p5.js variable that always holds the current height of the browser window in pixels

createCanvas(windowWidth, windowHeight);

🔧 Potential Improvements (3)

Here are some ways this code could be enhanced:

FEATURE draw()

The draw() function is empty except for background clearing - beginners have nothing to see when they load this sketch

💡 Add a simple shape like circle(mouseX, mouseY, 50) to demonstrate that the sketch is working and to give learners something to interact with immediately

STYLE sketch.js comments

The credits comment references 'p5js.ai IDE' which is not relevant to someone running this locally or on another platform

💡 Replace IDE-specific comments with educational comments that explain each function's purpose for beginners, like // Runs once at startup or // The draw loop runs 60 times per second

PERFORMANCE CSS styling

No explicit frameRate() is set, and no background preloading occurs, which is fine for this minimal template but could be optimized

💡 For performance-critical sketches, add frameRate(60) in setup() to explicitly set the frame rate, and consider preloading any media before the draw loop begins

🔄 Code Flow

Code flow showing setup, draw, windowresized

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

graph TD start[Start] --> setup[setup] setup --> createcanvas[create-canvas] createcanvas --> draw[draw loop] draw --> backgroundclear[background-clear] backgroundclear --> draw click setup href "#fn-setup" click draw href "#fn-draw" click createcanvas href "#sub-create-canvas" click backgroundclear href "#sub-background-clear" draw --> windowresized[windowresized] windowresized --> resizecanvas[resize-canvas] resizecanvas --> draw click windowresized href "#fn-windowresized" click resizecanvas href "#sub-resize-canvas"

❓ Frequently Asked Questions

What visual elements does the sigmaskibidi sketch create?

The sigmaskibidi sketch initializes a responsive canvas that displays a simple gray background, serving as a blank slate for further visual elements.

Is there any interaction in the sigmaskibidi sketch for users?

Currently, the sketch does not include interactive features; it only sets up a static background that adjusts to window resizing.

What creative coding concept is demonstrated in the sigmaskibidi sketch?

This sketch demonstrates the use of responsive design in creative coding by utilizing window dimensions to create a canvas that adapts to different screen sizes.

Explore More

p5js.ai

Create your own sketches with AI assistance

Gallery

Browse more creative coding examples

User Guide

Learn how to use p5js.ai

Preview

sigmaskibidi - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of sigmaskibidi - Code flow showing setup, draw, windowresized
Code Flow Diagram