1. Home
  2. /
  3. P5js Typing Test
  4. /
  5. Random Walk

Random Walk - P5js Typing CST Test

Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
Mode:
Duration:
1
2
3
4
5
6
7
8
9
10
11
12
13
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);
}
Coding works best on desktop or with an external keyboard.
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.

Random Walk — P5js Code

A point performing a random walk across the canvas.

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);
}

P5js Language Guide

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.

Primary Use Cases

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

Notable Features

  • ▸Simplifies HTML5 Canvas and WebGL interactions
  • ▸High-level functions for drawing and animation
  • ▸Event handling for mouse, keyboard, and touch
  • ▸Supports multimedia like sound and video
  • ▸Open-source and community-driven

Origin & Creator

p5.js was created by Lauren McCarthy in 2014 as a JavaScript adaptation of Processing to make creative coding more web-friendly and accessible.

Industrial Note

Primarily used in education, art, and creative coding communities rather than enterprise software. Its focus is on learning, prototyping, and interactive visualization.

Quick Explain

  • ▸p5.js simplifies drawing shapes, handling events, and creating animations in JavaScript.
  • ▸It provides a high-level API for 2D and 3D graphics, sound, and video.
  • ▸The library encourages creative coding and visual experimentation.
  • ▸It abstracts complex web APIs like Canvas and WebGL for easy use.
  • ▸p5.js can run directly in a browser without setup.

Core Features

  • ▸`setup()` and `draw()` loop for initialization and animation
  • ▸Functions for shapes: `rect()`, `ellipse()`, `line()`
  • ▸Color and style management: `fill()`, `stroke()`
  • ▸Mouse and keyboard event callbacks
  • ▸Integration with DOM and HTML elements

Learning Path

  • ▸Learn basic JavaScript syntax
  • ▸Understand `setup()` and `draw()`
  • ▸Experiment with shapes, colors, and animation
  • ▸Handle events like mouse and keyboard
  • ▸Create interactive sketches and small projects

Practical Examples

  • ▸Animating bouncing balls on canvas
  • ▸Drawing interactive fractals
  • ▸Creating generative art patterns
  • ▸Visualizing data with graphs and shapes
  • ▸Building simple browser-based games

Comparisons

  • ▸p5.js vs Processing -> JavaScript vs Java, both beginner-friendly
  • ▸p5.js vs Three.js -> p5.js simpler 2D/3D, Three.js more advanced 3D
  • ▸p5.js vs D3.js -> p5.js creative coding, D3.js data visualization
  • ▸p5.js vs vanilla Canvas -> p5.js easier, abstracts low-level details
  • ▸p5.js vs PixiJS -> p5.js general creative coding, PixiJS optimized for WebGL graphics

Strengths

  • ▸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)

Limitations

  • ▸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

When NOT to Use

  • ▸High-performance games requiring WebGL optimization
  • ▸Enterprise web apps without graphical components
  • ▸Backend server applications
  • ▸Complex 3D graphics projects better suited for Three.js
  • ▸Large-scale data visualization projects requiring D3.js features

Cheat Sheet

  • ▸createCanvas(width, height) - initialize drawing area
  • ▸background(color) - set canvas background
  • ▸fill(color) - set fill color for shapes
  • ▸stroke(color) - set outline color for shapes
  • ▸ellipse(x, y, w, h), rect(x, y, w, h) - draw shapes

FAQ

  • ▸Is p5.js suitable for beginners? -> Yes, designed for accessibility
  • ▸Can I use p5.js for 3D graphics? -> Yes, with WEBGL mode
  • ▸Does it work in all browsers? -> Modern browsers supported
  • ▸Do I need prior JS knowledge? -> Helpful but not strictly required
  • ▸Are there extensions for sound or ML? -> Yes, p5.sound and ml5.js

30-Day Skill Plan

  • ▸Week 1: Draw shapes and apply colors
  • ▸Week 2: Animate objects and learn frame updates
  • ▸Week 3: Handle mouse/keyboard events
  • ▸Week 4: Work with images, sounds, and video
  • ▸Week 5: Build interactive projects and mini-games

Final Summary

  • ▸p5.js is a beginner-friendly creative coding library for the web.
  • ▸It simplifies drawing, animation, and interactivity in JavaScript.
  • ▸Primarily used in education, art, and creative coding.
  • ▸Supports multimedia, events, and extensible features.
  • ▸Encourages experimentation and visual programming.

Project Structure

  • ▸Single HTML file with embedded JS script
  • ▸Optional external JS files for modularity
  • ▸Optional assets folder for images, sounds, etc.
  • ▸Sketch code usually global in scope
  • ▸Libraries included as needed

Monetization

  • ▸Mostly educational and hobbyist use
  • ▸Online courses and workshops
  • ▸Interactive web projects for clients
  • ▸Portfolio showcases for artists and developers
  • ▸Digital art sales and NFT projects

Productivity Tips

  • ▸Start with small sketches
  • ▸Reuse code and functions
  • ▸Leverage community examples
  • ▸Test continuously in browser
  • ▸Focus on visual clarity and interaction

Basic Concepts

  • ▸Sketch - a p5.js program containing `setup()` and `draw()`
  • ▸`setup()` - runs once for initialization
  • ▸`draw()` - runs continuously for animation
  • ▸Shapes - `rect()`, `ellipse()`, `line()` to draw graphics
  • ▸Events - `mousePressed()`, `keyPressed()` for interactivity

Official Docs

  • ▸https://p5js.org/reference/
  • ▸https://p5js.org/

More P5js Typing Exercises

Hello World in p5.jsMoving CircleBouncing BallColorful RectanglesMouse Follow CircleRandom StarsGrowing CircleRotating LineInteractive Rectangle

Practice Other Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypher