p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
Top Related Projects
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Minimal WebGL Library
JavaScript 3D Library.
Desktop/Android/HTML5/iOS Java game development framework
Cocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.
Quick Overview
p5.js is a JavaScript library that makes coding accessible for artists, designers, educators, and beginners. It is a reinterpretation of Processing for the web, providing a complete set of drawing functionality in an approachable way. p5.js aims to foster a diverse community of creators who can use code as a means of expression.
Pros
- Easy to learn and use, especially for beginners and non-programmers
- Extensive documentation and community support
- Cross-platform compatibility (works in web browsers)
- Rich set of drawing and interactive features
Cons
- Performance may be slower compared to lower-level graphics libraries
- Limited 3D capabilities compared to specialized 3D engines
- May not be suitable for large-scale, complex applications
- Dependency on web technologies can be limiting for some use cases
Code Examples
- Drawing a simple shape:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
fill(255, 0, 0);
ellipse(200, 200, 100, 100);
}
This code creates a canvas and draws a red circle in the center.
- Creating an interactive element:
let x = 0;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(x, 200, 50, 50);
if (mouseIsPressed) {
x = mouseX;
}
}
This example creates a circle that follows the mouse when clicked.
- Using the sound library:
let song;
function preload() {
song = loadSound('path/to/song.mp3');
}
function setup() {
createCanvas(400, 400);
background(220);
}
function mousePressed() {
if (song.isPlaying()) {
song.pause();
} else {
song.play();
}
}
This code loads and plays an audio file when the mouse is clicked.
Getting Started
- Include the p5.js library in your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
- Create a new JavaScript file (e.g.,
sketch.js
) and add your p5.js code:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(mouseX, mouseY, 50, 50);
}
- Link your JavaScript file in the HTML:
<script src="sketch.js"></script>
- Open the HTML file in a web browser to see your p5.js sketch in action.
Competitor Comparisons
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Pros of PixiJS
- Higher performance for complex graphics and animations
- Better suited for game development with built-in sprite and scene management
- More extensive WebGL support for advanced rendering techniques
Cons of PixiJS
- Steeper learning curve for beginners
- Less focus on creative coding and artistic expression
- Smaller community and fewer educational resources compared to p5.js
Code Comparison
p5.js:
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(50, 50, 80, 80);
}
PixiJS:
const app = new PIXI.Application({ width: 400, height: 400 });
document.body.appendChild(app.view);
const graphics = new PIXI.Graphics();
graphics.beginFill(0xFFFFFF);
graphics.drawCircle(50, 50, 40);
app.stage.addChild(graphics);
Summary
p5.js is more beginner-friendly and focused on creative coding, while PixiJS offers higher performance and is better suited for game development. p5.js has a larger community and more educational resources, but PixiJS provides more advanced rendering capabilities and better performance for complex graphics. The choice between the two depends on the project requirements and the developer's experience level.
Minimal WebGL Library
Pros of OGL
- Focused on high-performance WebGL rendering
- Lightweight and modular architecture
- Better suited for complex 3D graphics applications
Cons of OGL
- Steeper learning curve for beginners
- Less extensive documentation and community support
- Narrower scope, primarily focused on 3D graphics
Code Comparison
OGL example:
const renderer = new Renderer();
const gl = renderer.gl;
const camera = new Camera(gl);
const scene = new Transform();
const geometry = new Box(gl);
const material = new Program(gl, {
vertex,
fragment,
});
p5.js example:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(50, 50, 80, 80);
}
Summary
OGL is a specialized WebGL library focused on high-performance 3D graphics, while p5.js is a more accessible and versatile creative coding library. OGL offers better performance for complex 3D applications but has a steeper learning curve. p5.js provides a wider range of features and is more beginner-friendly, but may not be as optimized for intensive 3D rendering. The choice between the two depends on the specific project requirements and the developer's experience level.
JavaScript 3D Library.
Pros of three.js
- More powerful 3D rendering capabilities
- Better performance for complex 3D scenes
- Extensive documentation and large community support
Cons of three.js
- Steeper learning curve for beginners
- Requires more setup and boilerplate code
- Less suitable for quick prototyping or simple 2D projects
Code Comparison
p5.js:
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(200, 200, 50, 50);
}
three.js:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Desktop/Android/HTML5/iOS Java game development framework
Pros of libGDX
- Cross-platform development for desktop, mobile, and web
- More powerful and feature-rich for game development
- Better performance for complex games and applications
Cons of libGDX
- Steeper learning curve, especially for beginners
- Requires more setup and configuration
- Less suitable for quick prototyping or simple sketches
Code Comparison
p5.js:
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(50, 50, 80, 80);
}
libGDX:
public class MyGame extends ApplicationAdapter {
SpriteBatch batch;
ShapeRenderer shapeRenderer;
@Override
public void create() {
batch = new SpriteBatch();
shapeRenderer = new ShapeRenderer();
}
@Override
public void render() {
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
shapeRenderer.circle(50, 50, 40);
shapeRenderer.end();
}
}
The code comparison shows that p5.js is more concise and easier to get started with, while libGDX requires more setup but offers more control and features for game development. p5.js is ideal for creative coding and quick sketches, whereas libGDX is better suited for more complex game projects across multiple platforms.
Cocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.
Pros of cocos-engine
- More comprehensive game development framework with built-in physics, audio, and UI systems
- Better performance for complex 2D and 3D games
- Stronger support for mobile and cross-platform development
Cons of cocos-engine
- Steeper learning curve due to its complexity
- Less suitable for quick prototyping or simple creative coding projects
- Requires more setup and configuration compared to p5.js
Code Comparison
p5.js:
function setup() {
createCanvas(400, 400);
}
function draw() {
ellipse(mouseX, mouseY, 50, 50);
}
cocos-engine:
cc.Class({
extends: cc.Component,
properties: {},
start() {},
update(dt) {
this.node.position = cc.v2(this.node.parent.convertToNodeSpaceAR(cc.v2(cc.game.canvas.mouseX, cc.game.canvas.mouseY)));
},
});
The p5.js example shows its simplicity for quick sketches, while the cocos-engine code demonstrates its more structured, component-based approach for game development.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
p5.js
Welcome! ððð¿ðð½ðð»ðð¾ðð¼
p5.js is a free and open-source JavaScript library for accessible creative coding. It is a nurturing community, an approachable language, an exploratory tool, an accessible environment, an inclusive platform, welcoming and playful for artists, designers, educators, beginners, and anyone else!
|
Get Started â Reference â Tutorials â Examples â Libraries â Forum â Discord
About
p5.js is built and organized to prioritize accessibility, inclusivity, community, and joy. Similar to sketching, p5.js has a full set of tools to draw. It also supports creating audio-visual, interactive, experimental, and generative works for the web. p5.js enables thinking of a web page as your sketch. p5.js is accessible in multiple languages and has an expansive documentation with visual examples. You can find tutorials on the p5.js website and start coding right now in the p5.js web editor. You can extend p5.js with many community-created libraries that bring different capabilities. Its community provides endless inspiration and support for creators.
p5.js encourages iterative and exploratory code for creative expression. Its friendly, diverse community shares art, code, and learning resources to help elevate all voices. We share our values in open source and access for all, to learn, create, imagine, design, share and code freely.
Community
The p5.js community shares an interest in exploring the creation of art and design with technology. We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, caste, religion, culture, subculture, immigration status, age, skill level, occupation, and background. We stand in solidarity with justice and liberation movements. We work to acknowledge, dismantle, and prevent barriers to access p5.js code and the p5.js community.
Learn more about our community and read our community statement and code of conduct. You can directly support our work with p5.js by donating to the Processing Foundation.
Issues
If you have found a bug in the p5.js library or want to request new features, feel free to file an issue! See our contributor guidelines for a full reference of our contribution process. A set of templates for reporting issues and requesting features are provided to assist you (and us!). Different parts of p5.js are in different repositories. You can open an issue on each of them through these links:
p5.js â p5.js website â- p5.js web editor
p5.js is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can.
Get Started for Contributors
p5.js is a collaborative project with many contributors, mostly volunteers, and you are invited to help. All types of involvement are welcome. See the contribute for more in-depth details about contributing to different areas of the project, including code, bug fixes, documentation, discussion, and more.
A quick Getting Started with the Build and setting up the repository could be found here.
Stewards
Stewards are contributors who are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community. You can read more about the organization of the project in our p5.js Contributor Guidelines and p5.js Steward Guidelines.
Anyone interested can volunteer to be a steward! There are no specific requirements for expertise, just an interest in actively learning and participating. If youâre familiar with or interested in actively learning and participating in some of the p5.js areas below, please reply to this issue mentioning which area(s) you are interested in volunteering as a steward! ððð
p5.js was created by Lauren Lee McCarthy in 2013 as a new interpretation of Processing for the context of the web. Since then we have allowed ourselves space to deviate and grow, while drawing inspiration from Processing and our shared community. p5.js is sustained by a community of contributors, with support from the Processing Foundation. p5.js follows a rotating leadership model started in 2020, and Qianqian Ye has been leading p5.js since 2021. Learn more about the people behind p5.js.
Current Lead/Mentor
- @qianqianye - p5.js Leadï¼2021-present
- @limzykenneth - p5.js Mentorï¼2023-present
Lead/Mentor Alumni
- @lmccart- p5.js Creator
- @outofambit - p5.js Co-Lead 2021-22, Mentor 2022-2023
- @mcturner1995 - p5.js Lead 2020
Contributors
We recognize all types of contributions. This project follows the all-contributors specification and the Emoji Key ⨠for contribution types. Instructions to add yourself or add contribution emojis to your name are here. You can also post an issue or comment on a pull request with the text: @all-contributors please add @YOUR-USERNAME for THINGS
(where THINGS
is a comma-separated list of entries from the list of possible contribution types) and our nice bot will add you.
Thanks to all the wonderful contributors! ð
Top Related Projects
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Minimal WebGL Library
JavaScript 3D Library.
Desktop/Android/HTML5/iOS Java game development framework
Cocos simplifies game creation and distribution with Cocos Creator, a free, open-source, cross-platform game engine. Empowering millions of developers to create high-performance, engaging 2D/3D games and instant web entertainment.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot