Learn P5js - 10 Code Examples & CST Typing Practice Test

p5.js is a JavaScript library designed to make coding accessible for artists, designers, and beginners. It provides an intuitive way to create graphics, animations, and interactive content on the web using a friendly API inspired by Processing.

View all 10 P5js code examples →

Hello World in p5.js Moving Circle Bouncing Ball Colorful Rectangles Mouse Follow Circle Random Stars Growing Circle Rotating Line Random Walk Interactive Rectangle

Learn P5JS with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Hello World in p5.js

function setup() {
    createCanvas(400, 200);
    background(255);
    fill(0);
    textSize(32);
    text("Hello World", 100, 100);
}

A simple p5.js sketch that displays 'Hello World' in the browser canvas.

Let’s Try →

Moving Circle

let x = 0;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    ellipse(x, 100, 50, 50);
    x += 2;
    if(x > width) x = 0;
}

A circle moving horizontally across the canvas.

Let’s Try →

Bouncing Ball

let x = 200, y = 100;
let xspeed = 3, yspeed = 2;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    x += xspeed;
    y += yspeed;
    if(x > width || x < 0) xspeed *= -1;
    if(y > height || y < 0) yspeed *= -1;
    ellipse(x, y, 50, 50);
}

A ball bouncing off the edges of the canvas.

Let’s Try →

Colorful Rectangles

function setup() {
    createCanvas(400, 200);
    noLoop();
}
function draw() {
    for(let i=0; i<10; i++) {
        fill(random(255), random(255), random(255));
        rect(i*40, 50, 30, 100);
    }
}

Draws a series of colored rectangles.

Let’s Try →

Mouse Follow Circle

function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    fill(0, 100, 255);
    ellipse(mouseX, mouseY, 50, 50);
}

A circle that follows the mouse cursor.

Let’s Try →

Random Stars

function setup() {
    createCanvas(400, 200);
    background(0);
}
function draw() {
    fill(255);
    ellipse(random(width), random(height), 2, 2);
}

Draws random stars on the canvas every frame.

Let’s Try →

Growing Circle

let r = 10;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    ellipse(width/2, height/2, r, r);
    r += 1;
    if(r > width) r = 10;
}

A circle that grows in size over time.

Let’s Try →

Rotating Line

let angle = 0;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    translate(width/2, height/2);
    line(0, 0, 100*cos(angle), 100*sin(angle));
    angle += 0.05;
}

A line rotating around the center of the canvas.

Let’s Try →

Random Walk

let x, y;
function setup() {
    createCanvas(400, 200);
    x = width/2;
    y = height/2;
    background(255);
}
function draw() {
    stroke(0);
    x += random(-5, 5);
    y += random(-5, 5);
    point(x, y);
}

A point performing a random walk across the canvas.

Let’s Try →

Interactive Rectangle

function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    if(mouseIsPressed) {
        rect(150, 50, 100, 100);
    } else {
        rect(150, 50, 50, 50);
    }
}

Rectangle width changes when mouse is pressed.

Let’s Try →

Frequently Asked Questions about P5js

What is P5js?

What are the primary use cases for P5js?

Educational projects for teaching programming. Interactive art installations. Web-based animations and visualizations. Prototyping games and interactive experiences. Creative coding experiments

What are the strengths of P5js?

Easy to learn for beginners. Great for visual and interactive projects. Runs directly in browsers. Strong community and learning resources. Extensible via additional libraries (sound, DOM, ML)

What are the limitations of P5js?

Not optimized for high-performance applications. Limited to web/browser environment. Complex 3D graphics are harder than low-level WebGL. May require JavaScript knowledge for advanced features. Not ideal for enterprise-scale applications

How can I practice P5js typing speed?

CodeSpeedTest offers 10+ real P5js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn P5js - 10 Code Examples & CST Typing Practice Test

Code Sample Descriptions

Hello World in p5.js

function setup() {
    createCanvas(400, 200);
    background(255);
    fill(0);
    textSize(32);
    text("Hello World", 100, 100);
}

A simple p5.js sketch that displays 'Hello World' in the browser canvas.

Let’s Try →

Moving Circle

let x = 0;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    ellipse(x, 100, 50, 50);
    x += 2;
    if(x > width) x = 0;
}

A circle moving horizontally across the canvas.

Let’s Try →

Bouncing Ball

let x = 200, y = 100;
let xspeed = 3, yspeed = 2;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    x += xspeed;
    y += yspeed;
    if(x > width || x < 0) xspeed *= -1;
    if(y > height || y < 0) yspeed *= -1;
    ellipse(x, y, 50, 50);
}

A ball bouncing off the edges of the canvas.

Let’s Try →

Colorful Rectangles

function setup() {
    createCanvas(400, 200);
    noLoop();
}
function draw() {
    for(let i=0; i<10; i++) {
        fill(random(255), random(255), random(255));
        rect(i*40, 50, 30, 100);
    }
}

Draws a series of colored rectangles.

Let’s Try →

Mouse Follow Circle

function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    fill(0, 100, 255);
    ellipse(mouseX, mouseY, 50, 50);
}

A circle that follows the mouse cursor.

Let’s Try →

Random Stars

function setup() {
    createCanvas(400, 200);
    background(0);
}
function draw() {
    fill(255);
    ellipse(random(width), random(height), 2, 2);
}

Draws random stars on the canvas every frame.

Let’s Try →

Growing Circle

let r = 10;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    ellipse(width/2, height/2, r, r);
    r += 1;
    if(r > width) r = 10;
}

A circle that grows in size over time.

Let’s Try →

Rotating Line

let angle = 0;
function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    translate(width/2, height/2);
    line(0, 0, 100*cos(angle), 100*sin(angle));
    angle += 0.05;
}

A line rotating around the center of the canvas.

Let’s Try →

Random Walk

let x, y;
function setup() {
    createCanvas(400, 200);
    x = width/2;
    y = height/2;
    background(255);
}
function draw() {
    stroke(0);
    x += random(-5, 5);
    y += random(-5, 5);
    point(x, y);
}

A point performing a random walk across the canvas.

Let’s Try →

Interactive Rectangle

function setup() {
    createCanvas(400, 200);
}
function draw() {
    background(255);
    if(mouseIsPressed) {
        rect(150, 50, 100, 100);
    } else {
        rect(150, 50, 50, 50);
    }
}

Rectangle width changes when mouse is pressed.

Let’s Try →

Frequently Asked Questions about P5js

What is P5js?

What are the primary use cases for P5js?

Educational projects for teaching programming. Interactive art installations. Web-based animations and visualizations. Prototyping games and interactive experiences. Creative coding experiments

What are the strengths of P5js?

Easy to learn for beginners. Great for visual and interactive projects. Runs directly in browsers. Strong community and learning resources. Extensible via additional libraries (sound, DOM, ML)

What are the limitations of P5js?

How can I practice P5js typing speed?

CodeSpeedTest offers 10+ real P5js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.