github processing/p5.js v2.1.0-rc.1
on GitHub

pre-release2 days ago

Help test the release candidate

https://cdn.jsdelivr.net/npm/p5@2.1.0-rc.1/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 🎊

New Contributors

Full Changelog: v2.0.0...v2.1.0-rc.1

Check out latest releases or
releases around processing/p5.js v2.1.0-rc.1

Don't miss a new p5.js release

NewReleases is sending notifications on new releases.

Get notifications