Bouncing Ball - P5js Typing CST Test

Mode:

Duration:

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);
}Coding works best on desktop or with an external keyboard.

Bouncing Ball — P5js Code

A ball bouncing off the edges of the canvas.

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

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

More P5js Typing Exercises

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

Practice Other Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher

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

Coding works best on desktop or with an external keyboard.

Bouncing Ball — P5js Code

A ball bouncing off the edges of the canvas.

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

P5js Language Guide

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.