Interactive Rectangle - P5js Typing CST Test
Loading…
Interactive Rectangle — P5js Code
Rectangle width changes when mouse is pressed.
function setup() {
createCanvas(400, 200);
}
function draw() {
background(255);
if(mouseIsPressed) {
rect(150, 50, 100, 100);
} else {
rect(150, 50, 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.