Download Latest Version p5.zip (4.8 MB)
Email in envelope

Get an email when there's a new version of p5.js

Home / v2.1.1
Name Modified Size InfoDownloads / Week
Parent folder
p5.esm.js 2025-11-10 4.1 MB
0
p5.js 2025-11-10 4.3 MB
0
p5.min.js 2025-11-10 937.3 kB
0
p5.zip 2025-11-10 4.8 MB
1 1 weekly downloads
README.md 2025-11-10 16.5 kB
0
v2.1.1 source code.tar.gz 2025-11-10 16.9 MB
0
v2.1.1 source code.zip 2025-11-10 17.6 MB
0
Totals: 7 Items   48.7 MB 1

Use this link to load the library: https://cdn.jsdelivr.net/npm/p5@2.1.1/lib/p5.js

What's new in p5.js 2.1 🌱

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

  • ...Color contrast checker, which you can use like this:

    :::js 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.

:::js
   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 🎊

New Contributors

Full Changelog: https://github.com/processing/p5.js/compare/v2.0.0...v2.1.1

Source: README.md, updated 2025-11-10