Moving Circle - P5js Typing CST Test
Loading…
Moving Circle — P5js Code
A circle moving horizontally across the canvas.
let x = 0;
function setup() {
createCanvas(400, 200);
}
function draw() {
background(255);
ellipse(x, 100, 50, 50);
x += 2;
if(x > width) x = 0;
}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.