Skip to content

Releases: processing/p5.js

v2.2.0

14 Jan 16:00
@ksen0 ksen0
v2.2.0
615684b

Choose a tag to compare

View all tags
v2.2.0 Latest
Latest

2.2: WebGPU and bugfixes

The 2.2 minor release contains work on WebGPU rendering that has been going on over the past year! WebGPU mode is included in a core add-on now. This release also contains a number of improvements in documentation and p5.strands bugfixes.

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);
}

Read more about how it works and where we plan on taking it here!
You're also welcome to come by the Discord #webgpu channel 🌱

What's Changed 🎊

New Contributors

Full Changelog: v2.1.2...v2.2.0

Contributors

nbogie, nakednous, and 9 other contributors
Assets 6
Loading

v2.2.0-rc.6

13 Jan 21:23
@ksen0 ksen0
v2.2.0-rc.6
f8a43b0

Choose a tag to compare

View all tags
v2.2.0-rc.6 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! This RC also contains bugfixes in p5.js, including in p5.strands.

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/ksen0/sketches/Ger2euN_J

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

New Contributors

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

What's Changed

What's Changed 🎊

Full Changelog: v2.2.0-rc.5...v2.2.0-rc.6

Contributors

nbogie, nakednous, and 9 other contributors
Loading

v1.11.12-rc.0

13 Jan 21:33
@ksen0 ksen0
v1.11.12-rc.0
f977cf0

Choose a tag to compare

View all tags
v1.11.12-rc.0

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

Since 1.11.11, the updates have been documentation and bugfixes.

What's Changed 🎊

New Contributors

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

Contributors

SableRaf, ksen0, and 9 other contributors
Loading

v2.2.0-rc.5

10 Jan 09:19
@ksen0 ksen0
v2.2.0-rc.5
b0da56f

Choose a tag to compare

View all tags
v2.2.0-rc.5 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! This RC also contains bugfixes in p5.js, including in p5.strands.

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/ksen0/sketches/Ger2euN_J

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 🎊

New Contributors

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

Contributors

nakednous, davepagurek, and 8 other contributors
Loading

v2.2.0-rc.4

01 Jan 14:17
@ksen0 ksen0
v2.2.0-rc.4
090ae9f

Choose a tag to compare

View all tags
v2.2.0-rc.4 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/ksen0/sketches/Ger2euN_J

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 🎊

New Contributors

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

Contributors

nakednous, davepagurek, and 7 other contributors
Loading

v2.2.0-rc.3

22 Dec 12:12
@ksen0 ksen0
v2.2.0-rc.3
f557d24

Choose a tag to compare

View all tags
v2.2.0-rc.3 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/ksen0/sketches/Ger2euN_J

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 🎊

New Contributors

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

Contributors

nakednous, davepagurek, and 5 other contributors
Loading

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

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
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