Skip to content

Releases: processing/p5.js

v2.2.0-rc.2

17 Dec 18:12
@ksen0 ksen0
v2.2.0-rc.2
0c7fd4a

Choose a tag to compare

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

Help test the release candidate

The 2.2 proposed minor release contains the ongoing work on WebGPU rendering! 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. You can also share your thoughts or get involved on Discord in the #webpgu channel!

Testing WebGPU mode

WebGPU mode is included in a core add-on now. To load both p5.js and WebGPU mode, add these two script tags to your sketch:

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

Then load WebGPU mode in createCanvas:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

Or, feel free to duplicate this project on the p5.js web editor: https://editor.p5js.org/davepagurek/sketches/bmEYKK2aw

Read more about how it works and where we plan on taking it here: https://github.com/processing/p5.js/blob/dev-2.0/contributor_docs/webgpu.md

What's Changed

What's Changed 🎊

New Contributors

Full Changelog: v2.1.2...v2.2.0-rc.2

Contributors

davepagurek, limzykenneth, and 2 other contributors
Loading

v2.2.0-rc.1

17 Dec 15:38
@ksen0 ksen0
v2.2.0-rc.1
4dcd13b

Choose a tag to compare

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

Help test the release candidate

The 2.2 proposed minor release contains the ongoing work on WebGPU rendering! 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. You can also share your thoughts or get involved on Discord in the #webpgu channel!

What's Changed 🎊

New Contributors

Full Changelog: v2.1.2...v2.2.0-rc.1

Contributors

davepagurek, limzykenneth, and 2 other contributors
Loading

v2.1.2

16 Dec 21:17
@ksen0 ksen0
v2.1.2
815a456

Choose a tag to compare

View all tags
v2.1.2 Latest
Latest

What's Changed

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

This patch includes documentation updates, bugfixes, and improvements on the experimental p5.strands feature.

What's Changed 🎊

New Contributors

Full Changelog: v2.1.1...v2.1.2

Contributors

dhowe, davepagurek, and 5 other contributors
Assets 6
Loading

v2.1.1

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

Choose a tag to compare

View all tags
v2.1.1

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

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