Skip to content

Releases: processing/p5.js

v2.1.1

10 Nov 21:38
@ksen0 ksen0
v2.1.1
3dd4ffd

Choose a tag to compare

View all tags
v2.1.1 Latest
Latest

Use this link to load the library: https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js

What's new in p5.js 2.1 🌱

   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

Changes since 2.0 🎊

Read more

Contributors

nbogie, shawdm, and 29 other contributors
Assets 6
Loading

v2.1.0

10 Nov 21:17
@ksen0 ksen0
v2.1.0
97533b2

Choose a tag to compare

View all tags
v2.1.0

Use this link to load the library: https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js

What's new in p5.js 2.1 🌱

   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

Changes since 2.0 🎊

Read more

Contributors

nbogie, shawdm, and 29 other contributors
Loading

v2.1.0-rc.4

10 Nov 19:04
@ksen0 ksen0
v2.1.0-rc.4
d90033e

Choose a tag to compare

View all tags
v2.1.0-rc.4 Pre-release
Pre-release

What's Changed

What's Changed 🎊

Full Changelog: v2.1.0-rc.3...v2.1.0-rc.4

Contributors

ksen0, NalinDalal, and perminder-17
Loading

v2.1.0-rc.3

07 Nov 19:25
@ksen0 ksen0
v2.1.0-rc.3
9738e0e

Choose a tag to compare

View all tags
v2.1.0-rc.3 Pre-release
Pre-release

Help test the release candidate

Here are all the updates for the upcoming 2.1 milestone. This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Please help us to improve the stability of the newest version of p5.js by trying out this release candidate, and reporting bugs. The 2.1.0 minor release is now planned for release on November 7 10, 2025. Open tasks related to documentation will also be included, and suggestions to improve the docs are welcome!

Help testing...

   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

What's Changed

These are updates since the most recent release candidate.

What's Changed 🎊

Full Changelog: v2.1.0-rc.2...v2.1.0-rc.3

Contributors

nbogie, ksen0, and perminder-17
Loading

v2.1.0-rc.2

04 Nov 21:25
@ksen0 ksen0
v2.1.0-rc.2
888a9d0

Choose a tag to compare

View all tags
v2.1.0-rc.2 Pre-release
Pre-release

Help test the release candidate

Here are all the updates for the upcoming 2.1 milestone. This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Please help us to improve the stability of the newest version of p5.js by trying out this release candidate, and reporting bugs. The 2.1.0 minor release is now planned for release on November 7, 2025, unless there are bugs - then these will be fixed before release, with the new release candidate available for testing (for at least a week after the last major feature/code update). Open tasks related to documentation will also be included, and suggestions to improve the docs are welcome!

Help testing...

   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

What's Changed since 2.0 🎊

Read more

Contributors

shawdm, nickswalker, and 28 other contributors
Loading

v2.1.0-rc.1

31 Oct 10:03
@ksen0 ksen0
v2.1.0-rc.1
31163da

Choose a tag to compare

View all tags
v2.1.0-rc.1 Pre-release
Pre-release

Help test the release candidate

https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js

Here are all the updates for the upcoming 2.1 milestone. This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Please help us to improve the stability of the newest version of p5.js by trying out this release candidate, and reporting bugs. The 2.1.0 minor release is now planned for release on November 7, 2025, unless there are bugs - then these will be fixed before release, with the release candidate available for testing for a week. Open tasks related to documentation will also be included, and suggestions to improve the docs are welcome!

Help testing...

   let bgColor, fg1Color, fg2Color, msg1, msg2;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fg1Color = color(100);
     fg2Color = color(220);
  
     if(bgColor.contrast(fg1Color)){
       msg1 = 'good';
     }else{
       msg1 = 'bad';
     }
  
     if(bgColor.contrast(fg2Color)){
       msg2 = 'good';
     }else{
       msg2 = 'bad';
     }
  
     describe('A black canvas with a faint grey word saying "bad" at the top left and a brighter light grey word saying "good" in the middle of the canvas.');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(18);
  
     fill(fg1Color);
     text(msg1, 10, 30);
  
     fill(fg2Color);
     text(msg2, 10, 60);
   }

oneColor.contrast(anotherColor) checks the contrast between two colors. This method returns a boolean value to indicate if the two color has enough contrast. true means that the colors has enough contrast to be used as background color and body text color. false means there is not enough contrast.

A second argument can be passed to the method, options , which defines the algorithm to be used. The algorithms currently supported are WCAG 2.1 ('WCAG21') or APCA ('APCA'). The default is WCAG 2.1. If a value of 'all' is passed to the options argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.

   let bgColor, fgColor, contrast;
   function setup() {
     createCanvas(100, 100);
     bgColor = color(0);
     fgColor = color(200);
     contrast = bgColor.contrast(fgColor, 'all');
  
     describe('A black canvas with four short lines of grey text that respectively says: "WCAG 2.1", "12.55", "APCA", and "-73.30".');
   }
  
   function draw(){
     background(bgColor);
  
     textSize(14);
  
     fill(fgColor);
     text('WCAG 2.1', 10, 25);
     text(nf(contrast.WCAG21.value, 0, 2), 10, 40);
  
     text('APCA', 10, 70);
     text(nf(contrast.APCA.value, 0, 2), 10, 85);
   }

For more details about color contrast, you can check out this page from color.js, and the WebAIM color contrast checker.

What's Changed since 2.0 🎊

Read more

Contributors

shawdm, nickswalker, and 28 other contributors
Loading

v2.1.0-rc.0

20 Oct 21:43
@ksen0 ksen0
v2.1.0-rc.0
75cace3

Choose a tag to compare

View all tags
v2.1.0-rc.0 Pre-release
Pre-release

Help test the release candidate

https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js

Here are all the updates for the upcoming 2.1 milestone. This is a release candidate (RC), which means it is not yet live on the p5.js Editor. Please help us to improve the stability of the newest version of p5.js by trying out this release candidate, and reporting bugs. The 2.1.0 minor release is planned for release on October 27, 2025, unless there are bugs - then these will be fixed before release.

EDIT: New release candidate and date

Help testing...

  • ...TypeScript integration
  • ...p5.strands branching if/else and looping for
  • ...Addon Events API

What's Changed 🎊

Read more

Contributors

shawdm, nickswalker, and 27 other contributors
Loading

v1.11.11

20 Oct 17:59
@ksen0 ksen0
v1.11.11
28b17b5

Choose a tag to compare

View all tags
v1.11.11

How to Use

To use this version, import p5.js from: https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js or duplicate this sketch

In the p5.js Editor, make sure this is in the index.html page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>

Problems or Questions?

You can post an issue on GitHub or ask on Discord

Next Release?

Currently, we are focusing on expanding and improving 2.x - therefore, no new features will be added to 1.x. However, the goal is to keep 1.x available as a stable version of p5.js longer-term, so bugfinding, bugfixes and documentation improvements are welcome. Any new release will first have a release candidate available for testing, which is available on GitHub, for several weeks beforehand.

What's Changed 🎊

Because the focus is on p5.js 1.x stability, most of the updates are improvements in documentation, related to development workflow, or bugfixes:

New Contributors

Full Changelog: v1.11.10...v1.11.11

Contributors

yogan, ksen0, and 8 other contributors
Loading

v1.11.11-rc.1

20 Oct 11:07
@ksen0 ksen0
v1.11.11-rc.1
6bdba46

Choose a tag to compare

View all tags
v1.11.11-rc.1 Pre-release
Pre-release

How to test

Please report any issues you find with this release candidate before it goes live as the next version of 1.x! To help test, you can use the downloads below. In the p5.js Editor, you can upload p5.min.js and use it in the index.html page.

What's Changed

Below are the changes in 1.11.11-rc.1 - primarily documentation, but also addressing some dependency updates and a bugfix.

What's Changed 🎊

New Contributors

Full Changelog: v1.11.11-rc.0...v1.11.11-rc.1

Contributors

yogan, ksen0, and 5 other contributors
Loading

v1.11.11-rc.0

24 Sep 20:30
@ksen0 ksen0
v1.11.11-rc.0
8fcf60d

Choose a tag to compare

View all tags
v1.11.11-rc.0 Pre-release
Pre-release

How to test

Please report any issues you find with this release candidate before it goes live as the next version of 1.x! To help test, you can use the downloads below. In the p5.js Editor, you can upload p5.min.js and use it in the index.html page.

What's Changed

Below are the changes in 1.11.11-rc - primarily documentation, but also addressing some dependency updates and a bugfix.

What's Changed 🎊

New Contributors

Full Changelog: v1.11.10...v1.11.11-rc.0

Contributors

ksen0, allcontributors, and 4 other contributors
Loading