Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork3.7k
Releases: processing/p5.js
v2.2.0-rc.2
Help test the release candidate
The2.2 proposed minor release contains the ongoing work on WebGPU rendering! This is arelease 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:
<scriptsrc="https://cdn.jsdelivr.net/npm/p5@2.2.0-rc.2/lib/p5.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/p5@2.2.0-rc.2/lib/p5.webgpu.js"></script>
Then load WebGPU mode increateCanvas:
asyncfunctionsetup(){awaitcreateCanvas(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 🎊
- Ported the stroke shader to WebGPU renderer by@lukeplowden in#7915
- Framebuffer support on WebGPU renderer by@davepagurek in#8008
- webgpu ci test by@tychedelia in#8023
- Add WIP WebGPU mode by@davepagurek in#8179
- Update release action to omit WebGPU tests, add TS tests by@davepagurek in#8337
- FES parameter validation decoration use
.apply()for faster function invocation by@limzykenneth in#8332 - Add WebGPU built files to npm releases by@davepagurek in#8338
New Contributors
- @tychedelia made their first contribution in#8023
Full Changelog:v2.1.2...v2.2.0-rc.2
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.2.0-rc.1
Help test the release candidate
- Use this link to load the library:https://cdn.jsdelivr.net/npm/p5@2.2.0-rc.1/lib/p5.js
The2.2 proposed minor release contains the ongoing work on WebGPU rendering! This is arelease 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 🎊
- Ported the stroke shader to WebGPU renderer by@lukeplowden in#7915
- Framebuffer support on WebGPU renderer by@davepagurek in#8008
- webgpu ci test by@tychedelia in#8023
- Add WIP WebGPU mode by@davepagurek in#8179
- Update release action to omit WebGPU tests, add TS tests by@davepagurek in#8337
- FES parameter validation decoration use
.apply()for faster function invocation by@limzykenneth in#8332
New Contributors
- @tychedelia made their first contribution in#8023
Full Changelog:v2.1.2...v2.2.0-rc.1
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.2
What's Changed
Use this link to load the library:https://cdn.jsdelivr.net/npm/p5@2.1.2/lib/p5.js
This patch includes documentation updates, bugfixes, and improvements on the experimental p5.strands feature.
What's Changed 🎊
- Add fallback for property tags that don't fully parse by@davepagurek in#8257
- Fix textToModel face normals for extruded text by@VANSH3104 in#8091
- Fix string quotes in font loading example by@dhowe in#8279
- Updated point() examples for visible points. by@menacingly-coded in#8291
- Add fallback for HTTP HEAD requests by@davepagurek in#8270
- Improve splineProperties() documentation by@Homaid in#8265
- Fix to#7984 by@dhowe in#8014
- Makes sure p5.strands cleans up after an error by@davepagurek in#8301
- Fix usage of int() typecast in p5.strands by@davepagurek in#8254
- Text alignment fixes by@davepagurek in#8317
- Update Spanish steward guidelines for p5.js 2.x by@marioguzzzman in#8310
- Update Spanish steward guidelines for p5.js 2.0 (remove Grunt referen… by@marioguzzzman in#8308
- Better visual centering of text by@davepagurek in#8320
- Make sure camera methods on framebuffers work with push/pop by@davepagurek in#8322
- Fixes 8323 by@dhowe in#8324
- Add noiseDetail() support for p5.strands by@hxrshxz in#8163
New Contributors
- @Homaid made their first contribution in#8265
- @marioguzzzman made their first contribution in#8310
Full Changelog:v2.1.1...v2.1.2
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.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/elseand loopingfor - ...Addon Events API
- ...Color contrast checker, which you can use like this:
letbgColor,fg1Color,fg2Color,msg1,msg2;functionsetup(){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.');}functiondraw(){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 theoptions argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.
letbgColor,fgColor,contrast;functionsetup(){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".');}functiondraw(){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 outthis page from color.js, and theWebAIM color contrast checker.
Changes since 2.0 🎊
- fix: add splineVertex to p5.Graphics prototype and fix unit test error by@VANSH3104 in#7757
- [2.x] Fix ESM export functionality by@limzykenneth in#7764
- Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by@HughJacks in#7765
- Fix WebGL alpha blending by@davepagurek in#7769
- [2.0] Fix touch event not updating mouse coordinates by@limzykenneth in#7772
- Updating foundation-section for async/await by@perminder-17 in#7721
- fixing keyReleased() function. by@perminder-17 in#7758
- Fix corrupted textures when rendering too many WebGL characters by@davepagurek in#7792
- Improve antialiased framebuffer performance by@davepagurek in#7794
- Fix FES check for image() not accepting some valid types by@limzykenneth in#7801
- Publish types on NPM with next release by@limzykenneth in#7802
- Fix typo in directionalLight reference (dev-2.0 branch)#7743 by@LalitNarayanYadav in#7778
- Remove dayjs dependency and update date formatting in banner by@error-four-o-four in#7804
- Rest types by@davepagurek in#7803
- Updating all the broken refrence examples. by@perminder-17 in#7739
- Fixing keyTyped() for dev-2.0 branch by@perminder-17 in#7809
- P2HDR docs by@perminder-17 in#7728
- Update creating addon libraries contributor docs by@limzykenneth in#7800
- docs(keyboard): clarify keyIsDown() documentation for key codes and browser compatibility by@dpanshug in#7812
- Prevent FES from checking nested properties by@IIITM-Jay in#7824
- update the model params to be correct for 2.0 in docs and FES by@lukeplowden in#7832
- Model params updated for YUIDocs by@lukeplowden in#7835
- add instance of video in callback (2.0) by@ksen0 in#7877
- Add font readiness wait to create() function in p5.Font.js by@sophyphile in#7882
- Fix typo in createFileInput example by@ksen0 in#7884
- Create Graphics fixing in dev-2.0 branch. by@perminder-17 in#7829
- Alias GLSL's mix function as lerp in p5.strands (#7875) by@LalitNarayanYadav in#7887
- added documentation to _getBrightness() and _getGreen() function by@FerrinThreatt in#7908
- Chore/upgrade eslint by@error-four-o-four in#7853
- Revamped config.yml(branch: dev-2.0) by@shivasankaran18 in#7776
- Update zod 3 to zod 4 support in p5.js dev-2.0 by@madhav2348 in#7872
- Updating visual tests docs for 2.x versions by@perminder-17 in#7827
- Skip adding degenerate faces in textToModel by@davepagurek in#7951
- Add GLSL-based noise(vec2) function to p5.strands (#7897) by@LalitNarayanYadav in#7921
- Fix inline anonymous functions causing a parsing error in p5.strands callbacks by@nking07049925 in#7956
- Fix p5.strands uniform calls, add instance mode construct by@davepagurek in#7961
- Enhance p5.strands noise() to support noise(x, y) and 4-octave fractal noise by@LalitNarayanYadav in#7964
- Adding docs for
codein the refrence. by@perminder-17 in#7902 - Individual flags to disable part of FES by the user by@limzykenneth in#7967
- Add minified ESM build output by@nickswalker in#7973
- Replace fn with direct downloadFile import to fix issue where fn was not found by@acgillette in#7971
- Documentation fix for swapped parameters in splinePoint and bezierPoint by@shawdm in#7997
- Update dev-2.0 docs with recently-added contributors and stewards by@ksen0 in#8000
- Remove incorrect mouseX/mouseY docs regarding WEBGL mode in dev-2.0 branch. by@perminder-17 in#8006
- Fix MediaElement.copy by@pearmini in#7980
- Reset millis() after setup by@davepagurek in#8005
- Fix: Corrected code block in textureMode() in dev2.0 by@harishbit in#8015
- Merge branch 'loopOptimization' ofhttps://github.com/awood0727/p5.js… by@awood0727 in#8024
- Update README.md by@perminder-17 in#8029
- Fixed syntax error at disableFriendleErrors by@Iron-56 in#8038
- Fix noise() getting overridden; add tests by@davepagurek in#8036
- A few documentation issues to fix by@perminder-17 in#8031
- Auto-link / Close Issues for 2.0 PRs (p5.js & p5.js-website) by@NalinDalal in#8025
- minor-fixing in shape docs by@perminder-17 in#8066
- Update auto-close-issues.yml by@ksen0 in#8069
- textWidth ignores leading and trailing spaces by@Nitin2332 in#8067
- [WIP] Docs: Add initial draft of Strands documentation (feedback wanted) by@Abhayaj247 in#7940
- Fix most of the eslint warnings currently generated by@limzykenneth in#8063
- Addon Events API and User Defined Functions access by@limzykenneth in#7947
- Adding some examples for shapes. by@perminder-17 in#8070
- textToContours is broken under textAlign(CENTER,CENTER) and use linebreak by@perminder-17 in#8083
- reference-fix-2.0 b...
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0
Use this link to load the library:https://cdn.jsdelivr.net/npm/p5@2.1.0/lib/p5.js
What's new in p5.js 2.1 🌱
- ...TypeScript integration
- ...p5.strands branching
if/elseand loopingfor - ...Addon Events API
- ...Color contrast checker, which you can use like this:
letbgColor,fg1Color,fg2Color,msg1,msg2;functionsetup(){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.');}functiondraw(){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 theoptions argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.
letbgColor,fgColor,contrast;functionsetup(){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".');}functiondraw(){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 outthis page from color.js, and theWebAIM color contrast checker.
Changes since 2.0 🎊
- fix: add splineVertex to p5.Graphics prototype and fix unit test error by@VANSH3104 in#7757
- [2.x] Fix ESM export functionality by@limzykenneth in#7764
- Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by@HughJacks in#7765
- Fix WebGL alpha blending by@davepagurek in#7769
- [2.0] Fix touch event not updating mouse coordinates by@limzykenneth in#7772
- Updating foundation-section for async/await by@perminder-17 in#7721
- fixing keyReleased() function. by@perminder-17 in#7758
- Fix corrupted textures when rendering too many WebGL characters by@davepagurek in#7792
- Improve antialiased framebuffer performance by@davepagurek in#7794
- Fix FES check for image() not accepting some valid types by@limzykenneth in#7801
- Publish types on NPM with next release by@limzykenneth in#7802
- Fix typo in directionalLight reference (dev-2.0 branch)#7743 by@LalitNarayanYadav in#7778
- Remove dayjs dependency and update date formatting in banner by@error-four-o-four in#7804
- Rest types by@davepagurek in#7803
- Updating all the broken refrence examples. by@perminder-17 in#7739
- Fixing keyTyped() for dev-2.0 branch by@perminder-17 in#7809
- P2HDR docs by@perminder-17 in#7728
- Update creating addon libraries contributor docs by@limzykenneth in#7800
- docs(keyboard): clarify keyIsDown() documentation for key codes and browser compatibility by@dpanshug in#7812
- Prevent FES from checking nested properties by@IIITM-Jay in#7824
- update the model params to be correct for 2.0 in docs and FES by@lukeplowden in#7832
- Model params updated for YUIDocs by@lukeplowden in#7835
- add instance of video in callback (2.0) by@ksen0 in#7877
- Add font readiness wait to create() function in p5.Font.js by@sophyphile in#7882
- Fix typo in createFileInput example by@ksen0 in#7884
- Create Graphics fixing in dev-2.0 branch. by@perminder-17 in#7829
- Alias GLSL's mix function as lerp in p5.strands (#7875) by@LalitNarayanYadav in#7887
- added documentation to _getBrightness() and _getGreen() function by@FerrinThreatt in#7908
- Chore/upgrade eslint by@error-four-o-four in#7853
- Revamped config.yml(branch: dev-2.0) by@shivasankaran18 in#7776
- Update zod 3 to zod 4 support in p5.js dev-2.0 by@madhav2348 in#7872
- Updating visual tests docs for 2.x versions by@perminder-17 in#7827
- Skip adding degenerate faces in textToModel by@davepagurek in#7951
- Add GLSL-based noise(vec2) function to p5.strands (#7897) by@LalitNarayanYadav in#7921
- Fix inline anonymous functions causing a parsing error in p5.strands callbacks by@nking07049925 in#7956
- Fix p5.strands uniform calls, add instance mode construct by@davepagurek in#7961
- Enhance p5.strands noise() to support noise(x, y) and 4-octave fractal noise by@LalitNarayanYadav in#7964
- Adding docs for
codein the refrence. by@perminder-17 in#7902 - Individual flags to disable part of FES by the user by@limzykenneth in#7967
- Add minified ESM build output by@nickswalker in#7973
- Replace fn with direct downloadFile import to fix issue where fn was not found by@acgillette in#7971
- Documentation fix for swapped parameters in splinePoint and bezierPoint by@shawdm in#7997
- Update dev-2.0 docs with recently-added contributors and stewards by@ksen0 in#8000
- Remove incorrect mouseX/mouseY docs regarding WEBGL mode in dev-2.0 branch. by@perminder-17 in#8006
- Fix MediaElement.copy by@pearmini in#7980
- Reset millis() after setup by@davepagurek in#8005
- Fix: Corrected code block in textureMode() in dev2.0 by@harishbit in#8015
- Merge branch 'loopOptimization' ofhttps://github.com/awood0727/p5.js… by@awood0727 in#8024
- Update README.md by@perminder-17 in#8029
- Fixed syntax error at disableFriendleErrors by@Iron-56 in#8038
- Fix noise() getting overridden; add tests by@davepagurek in#8036
- A few documentation issues to fix by@perminder-17 in#8031
- Auto-link / Close Issues for 2.0 PRs (p5.js & p5.js-website) by@NalinDalal in#8025
- minor-fixing in shape docs by@perminder-17 in#8066
- Update auto-close-issues.yml by@ksen0 in#8069
- textWidth ignores leading and trailing spaces by@Nitin2332 in#8067
- [WIP] Docs: Add initial draft of Strands documentation (feedback wanted) by@Abhayaj247 in#7940
- Fix most of the eslint warnings currently generated by@limzykenneth in#8063
- Addon Events API and User Defined Functions access by@limzykenneth in#7947
- Adding some examples for shapes. by@perminder-17 in#8070
- textToContours is broken under textAlign(CENTER,CENTER) and use linebreak by@perminder-17 in#8083
- reference-fix-2.0 b...
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0-rc.4
What's Changed
What's Changed 🎊
- enhancing noop file to have error handeling. by@perminder-17 in#8243
- Improve Accessibility Guidance for
describe()Usage by@NalinDalal in#8101 - Removing grunt from contributor guidelines by@perminder-17 in#8245
- Add
AGENTS.md[dev-2.0 branch] by@ksen0 in#8249
Full Changelog:v2.1.0-rc.3...v2.1.0-rc.4
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0-rc.3
Help test the release candidate
- Use this link to load the library:https://cdn.jsdelivr.net/npm/p5@2.1.0-rc.3/lib/p5.js
Here are all the updates for theupcoming2.1 milestone. This is arelease 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 onNovember7 10, 2025. Open tasks related to documentation will also be included, and suggestions to improve the docs are welcome!
Help testing...
- ...TypeScript integration
- ...p5.strands branching
if/elseand loopingfor - ...Addon Events API
- ...Color contrast checker, which you can use like this:
letbgColor,fg1Color,fg2Color,msg1,msg2;functionsetup(){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.');}functiondraw(){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 theoptions argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.
letbgColor,fgColor,contrast;functionsetup(){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".');}functiondraw(){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 outthis page from color.js, and theWebAIM color contrast checker.
What's Changed
These are updates since themost recent release candidate.
What's Changed 🎊
- Fix missing mouseButton property types by@nbogie in#8232
- Update preload error in 2.x by@ksen0 in#8239
- Stabilize behavior of createVector() with zero arguments by@perminder-17 in#8203
Full Changelog:v2.1.0-rc.2...v2.1.0-rc.3
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0-rc.2
Help test the release candidate
- Copy & editthis sketch
- Or use this link to load the library:https://cdn.jsdelivr.net/npm/p5@2.1.0-rc.2/lib/p5.js
Here are all the updates for theupcoming2.1 milestone. This is arelease 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 onNovember 7, 2025, unless there are bugs - then these will be fixed before release, withthe 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...
- ...TypeScript integration
- ...p5.strands branching
if/elseand loopingfor - ...Addon Events API
- ...Color contrast checker, which you can use like this:
letbgColor,fg1Color,fg2Color,msg1,msg2;functionsetup(){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.');}functiondraw(){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 theoptions argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.
letbgColor,fgColor,contrast;functionsetup(){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".');}functiondraw(){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 outthis page from color.js, and theWebAIM color contrast checker.
What's Changed since 2.0 🎊
- fix: add splineVertex to p5.Graphics prototype and fix unit test error by@VANSH3104 in#7757
- [2.x] Fix ESM export functionality by@limzykenneth in#7764
- Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by@HughJacks in#7765
- Fix WebGL alpha blending by@davepagurek in#7769
- [2.0] Fix touch event not updating mouse coordinates by@limzykenneth in#7772
- Updating foundation-section for async/await by@perminder-17 in#7721
- fixing keyReleased() function. by@perminder-17 in#7758
- Fix corrupted textures when rendering too many WebGL characters by@davepagurek in#7792
- Improve antialiased framebuffer performance by@davepagurek in#7794
- Fix FES check for image() not accepting some valid types by@limzykenneth in#7801
- Publish types on NPM with next release by@limzykenneth in#7802
- Fix typo in directionalLight reference (dev-2.0 branch)#7743 by@LalitNarayanYadav in#7778
- Remove dayjs dependency and update date formatting in banner by@error-four-o-four in#7804
- Rest types by@davepagurek in#7803
- Updating all the broken refrence examples. by@perminder-17 in#7739
- Fixing keyTyped() for dev-2.0 branch by@perminder-17 in#7809
- P2HDR docs by@perminder-17 in#7728
- Update creating addon libraries contributor docs by@limzykenneth in#7800
- docs(keyboard): clarify keyIsDown() documentation for key codes and browser compatibility by@dpanshug in#7812
- Prevent FES from checking nested properties by@IIITM-Jay in#7824
- update the model params to be correct for 2.0 in docs and FES by@lukeplowden in#7832
- Model params updated for YUIDocs by@lukeplowden in#7835
- add instance of video in callback (2.0) by@ksen0 in#7877
- Add font readiness wait to create() function in p5.Font.js by@sophyphile in#7882
- Fix typo in createFileInput example by@ksen0 in#7884
- Create Graphics fixing in dev-2.0 branch. by@perminder-17 in#7829
- Alias GLSL's mix function as lerp in p5.strands (#7875) by@LalitNarayanYadav in#7887
- added documentation to _getBrightness() and _getGreen() function by@FerrinThreatt in#7908
- Chore/upgrade eslint by@error-four-o-four in#7853
- Revamped config.yml(branch: dev-2.0) by@shivasankaran18 in#7776
- Update zod 3 to zod 4 support in p5.js dev-2.0 by@madhav2348 in#7872
- Updating visual tests docs for 2.x versions by@perminder-17 in#7827
- Skip adding degenerate faces in textToModel by@davepagurek in#7951
- Add GLSL-based noise(vec2) function to p5.strands (#7897) by@LalitNarayanYadav in#7921
- Fix inline anonymous functions causing a parsing error in p5.strands callbacks by@nking07049925 in#7956
- Fix p5.strands uniform calls, add instance mode construct by@davepagurek in#7961
- Enhance p5.strands noise() to support noise(x, y) and 4-octave fractal noise by@LalitNarayanYadav in#7964
- Adding docs for
codein the refrence. by@perminder-17 in#7902 - Individual flags to disable part of FES by the user by@limzykenneth in#7967
- Add minified ESM build output by@nickswalker in#7973
- Replace fn with direct downloadFile import to fix issue where fn was not found by@acgillette in#7971
- Documentation fix for swapped parameters in splinePoint and bezierPoint by@shawdm in#7997
- Update dev-2.0 docs with recently-added contributors and stewards by@ksen0 in#8000
- Remove incorrect mouseX/mouseY docs regarding WEBGL mode in dev-2.0 branch. by@perminder-17 in#8006
- Fix MediaElement.copy by@pearmini in#7980
- Reset millis() after setup by@davepagurek in#8005
- Fix: Corrected code block in textureMode() in dev2.0 by@harishbit in#8015
- Merge branch 'loopOptimization' ofhttps://github.com/awood0727/p5.js… by@awood0727 in#8024
- Update README.md by@perminder-17 in#8029
- Fixed syntax error at disableFriendleErrors by@Iron-56 in#8038
- Fix noise() getting overridden; add tests by@davepagurek in#8036
- A few documentation issues to fix by@perminder-17 in#8031
- Auto-link / Close Issues for 2.0 PRs (p5.js & p5.js-website) by@NalinDalal in#8025
- minor-fixing in shape docs by@perminder-17 inhttps://git...
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0-rc.1
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 theupcoming2.1 milestone. This is arelease 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 onNovember 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...
- ...TypeScript integration
- ...p5.strands branching
if/elseand loopingfor - ...Addon Events API
- ...Color contrast checker, which you can use like this:
letbgColor,fg1Color,fg2Color,msg1,msg2;functionsetup(){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.');}functiondraw(){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 theoptions argument, an object containing more details is returned. The details object will include the calculated contrast value of the colors and different passing criteria.
letbgColor,fgColor,contrast;functionsetup(){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".');}functiondraw(){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 outthis page from color.js, and theWebAIM color contrast checker.
What's Changed since 2.0 🎊
- fix: add splineVertex to p5.Graphics prototype and fix unit test error by@VANSH3104 in#7757
- [2.x] Fix ESM export functionality by@limzykenneth in#7764
- Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by@HughJacks in#7765
- Fix WebGL alpha blending by@davepagurek in#7769
- [2.0] Fix touch event not updating mouse coordinates by@limzykenneth in#7772
- Updating foundation-section for async/await by@perminder-17 in#7721
- fixing keyReleased() function. by@perminder-17 in#7758
- Fix corrupted textures when rendering too many WebGL characters by@davepagurek in#7792
- Improve antialiased framebuffer performance by@davepagurek in#7794
- Fix FES check for image() not accepting some valid types by@limzykenneth in#7801
- Publish types on NPM with next release by@limzykenneth in#7802
- Fix typo in directionalLight reference (dev-2.0 branch)#7743 by@LalitNarayanYadav in#7778
- Remove dayjs dependency and update date formatting in banner by@error-four-o-four in#7804
- Rest types by@davepagurek in#7803
- Updating all the broken refrence examples. by@perminder-17 in#7739
- Fixing keyTyped() for dev-2.0 branch by@perminder-17 in#7809
- P2HDR docs by@perminder-17 in#7728
- Update creating addon libraries contributor docs by@limzykenneth in#7800
- docs(keyboard): clarify keyIsDown() documentation for key codes and browser compatibility by@dpanshug in#7812
- Prevent FES from checking nested properties by@IIITM-Jay in#7824
- update the model params to be correct for 2.0 in docs and FES by@lukeplowden in#7832
- Model params updated for YUIDocs by@lukeplowden in#7835
- add instance of video in callback (2.0) by@ksen0 in#7877
- Add font readiness wait to create() function in p5.Font.js by@sophyphile in#7882
- Fix typo in createFileInput example by@ksen0 in#7884
- Create Graphics fixing in dev-2.0 branch. by@perminder-17 in#7829
- Alias GLSL's mix function as lerp in p5.strands (#7875) by@LalitNarayanYadav in#7887
- added documentation to _getBrightness() and _getGreen() function by@FerrinThreatt in#7908
- Chore/upgrade eslint by@error-four-o-four in#7853
- Revamped config.yml(branch: dev-2.0) by@shivasankaran18 in#7776
- Update zod 3 to zod 4 support in p5.js dev-2.0 by@madhav2348 in#7872
- Updating visual tests docs for 2.x versions by@perminder-17 in#7827
- Skip adding degenerate faces in textToModel by@davepagurek in#7951
- Add GLSL-based noise(vec2) function to p5.strands (#7897) by@LalitNarayanYadav in#7921
- Fix inline anonymous functions causing a parsing error in p5.strands callbacks by@nking07049925 in#7956
- Fix p5.strands uniform calls, add instance mode construct by@davepagurek in#7961
- Enhance p5.strands noise() to support noise(x, y) and 4-octave fractal noise by@LalitNarayanYadav in#7964
- Adding docs for
codein the refrence. by@perminder-17 in#7902 - Individual flags to disable part of FES by the user by@limzykenneth in#7967
- Add minified ESM build output by@nickswalker in#7973
- Replace fn with direct downloadFile import to fix issue where fn was not found by@acgillette in#7971
- Documentation fix for swapped parameters in splinePoint and bezierPoint by@shawdm in#7997
- Update dev-2.0 docs with recently-added contributors and stewards by@ksen0 in#8000
- Remove incorrect mouseX/mouseY docs regarding WEBGL mode in dev-2.0 branch. by@perminder-17 in#8006
- Fix MediaElement.copy by@pearmini in#7980
- Reset millis() after setup by@davepagurek in#8005
- Fix: Corrected code block in textureMode() in dev2.0 by@harishbit in#8015
- Merge branch 'loopOptimization' ofhttps://github.com/awood0727/p5.js… by@awood0727 in#8024
- Update README.md by@perminder-17 in#8029
- Fixed syntax error at disableFriendleErrors by@Iron-56 in#8038
- Fix noise() getting overridden; add tests by@davepagurek in#8036
- A few documentation issues to fix by@perminder-17 in#8031
- Auto-link / Close Issues for 2.0 PRs (p5.js & p5.js-website) by@NalinDalal in#8025
- minor-fixing in shape docs by@perminder-17 in#8066
- Update auto-close-issues.yml by@ksen0 in#8069
- textWidth ignores le...
Assets6
Uh oh!
There was an error while loading.Please reload this page.
v2.1.0-rc.0
Help test the release candidate
https://cdn.jsdelivr.net/npm/p5@2.1.0-rc.0/lib/p5.js
Here are all the updates for theupcoming2.1 milestone. This is arelease 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 onOctober 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/elseand loopingfor - ...Addon Events API
What's Changed 🎊
- [2.x] Fix ESM export functionality by@limzykenneth in#7764
- Publish types on NPM with next release by@limzykenneth in#7802
- fix: add splineVertex to p5.Graphics prototype and fix unit test error by@VANSH3104 in#7757
- Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by@HughJacks in#7765
- Fix WebGL alpha blending by@davepagurek in#7769
- [2.0] Fix touch event not updating mouse coordinates by@limzykenneth in#7772
- Updating foundation-section for async/await by@perminder-17 in#7721
- fixing keyReleased() function. by@perminder-17 in#7758
- Fix corrupted textures when rendering too many WebGL characters by@davepagurek in#7792
- Improve antialiased framebuffer performance by@davepagurek in#7794
- Fix FES check for image() not accepting some valid types by@limzykenneth in#7801
- Fix typo in directionalLight reference (dev-2.0 branch)#7743 by@LalitNarayanYadav in#7778
- Remove dayjs dependency and update date formatting in banner by@error-four-o-four in#7804
- Rest types by@davepagurek in#7803
- Updating all the broken refrence examples. by@perminder-17 in#7739
- Fixing keyTyped() for dev-2.0 branch by@perminder-17 in#7809
- P2HDR docs by@perminder-17 in#7728
- Update creating addon libraries contributor docs by@limzykenneth in#7800
- docs(keyboard): clarify keyIsDown() documentation for key codes and browser compatibility by@dpanshug in#7812
- Prevent FES from checking nested properties by@IIITM-Jay in#7824
- update the model params to be correct for 2.0 in docs and FES by@lukeplowden in#7832
- Model params updated for YUIDocs by@lukeplowden in#7835
- add instance of video in callback (2.0) by@ksen0 in#7877
- Add font readiness wait to create() function in p5.Font.js by@sophyphile in#7882
- Fix typo in createFileInput example by@ksen0 in#7884
- Create Graphics fixing in dev-2.0 branch. by@perminder-17 in#7829
- Alias GLSL's mix function as lerp in p5.strands (#7875) by@LalitNarayanYadav in#7887
- added documentation to _getBrightness() and _getGreen() function by@FerrinThreatt in#7908
- Chore/upgrade eslint by@error-four-o-four in#7853
- Revamped config.yml(branch: dev-2.0) by@shivasankaran18 in#7776
- Update zod 3 to zod 4 support in p5.js dev-2.0 by@madhav2348 in#7872
- Updating visual tests docs for 2.x versions by@perminder-17 in#7827
- Skip adding degenerate faces in textToModel by@davepagurek in#7951
- Add GLSL-based noise(vec2) function to p5.strands (#7897) by@LalitNarayanYadav in#7921
- Fix inline anonymous functions causing a parsing error in p5.strands callbacks by@nking07049925 in#7956
- Fix p5.strands uniform calls, add instance mode construct by@davepagurek in#7961
- Enhance p5.strands noise() to support noise(x, y) and 4-octave fractal noise by@LalitNarayanYadav in#7964
- Adding docs for
codein the refrence. by@perminder-17 in#7902 - Individual flags to disable part of FES by the user by@limzykenneth in#7967
- Add minified ESM build output by@nickswalker in#7973
- Replace fn with direct downloadFile import to fix issue where fn was not found by@acgillette in#7971
- Documentation fix for swapped parameters in splinePoint and bezierPoint by@shawdm in#7997
- Update dev-2.0 docs with recently-added contributors and stewards by@ksen0 in#8000
- Remove incorrect mouseX/mouseY docs regarding WEBGL mode in dev-2.0 branch. by@perminder-17 in#8006
- Fix MediaElement.copy by@pearmini in#7980
- Reset millis() after setup by@davepagurek in#8005
- Fix: Corrected code block in textureMode() in dev2.0 by@harishbit in#8015
- Merge branch 'loopOptimization' ofhttps://github.com/awood0727/p5.js… by@awood0727 in#8024
- Update README.md by@perminder-17 in#8029
- Fixed syntax error at disableFriendleErrors by@Iron-56 in#8038
- Fix noise() getting overridden; add tests by@davepagurek in#8036
- A few documentation issues to fix by@perminder-17 in#8031
- Auto-link / Close Issues for 2.0 PRs (p5.js & p5.js-website) by@NalinDalal in#8025
- minor-fixing in shape docs by@perminder-17 in#8066
- Update auto-close-issues.yml by@ksen0 in#8069
- textWidth ignores leading and trailing spaces by@Nitin2332 in#8067
- [WIP] Docs: Add initial draft of Strands documentation (feedback wanted) by@Abhayaj247 in#7940
- Fix most of the eslint warnings currently generated by@limzykenneth in#8063
- Addon Events API and User Defined Functions access by@limzykenneth in#7947
- Adding some examples for shapes. by@perminder-17 in#8070
- textToContours is broken under textAlign(CENTER,CENTER) and use linebreak by@perminder-17 in#8083
- reference-fix-2.0 by@Nitin2332 in#8086
- Include use of relevant maxes in
hue(),saturation(),brightness()andlightness()by@limzykenneth in#8062 - Optimize bottlenecks in 2.0 code by@davepagurek in#8094
- Fix: allow single-arg atan() outside strands; add unit test by@Abhayaj247 in#8096
- [p5.strands] Significant refactor for p5.strands by@lukeplowden in#8009
- Update createCamera docs since it no longer sets the active camera by@davepagurek in#8100
- Use FES internationalization within the minor version by@ksen0 in#8106
- Comma included in load font by@perminder-17 in#8084
- typography error message fixes by@Nitin2332 in#8115
- Re-bind globals when assigned in addons by@davepagurek in#8099
- fromAngle returns a 2D Vector by@ksen0 in#8142
- Bugfix: Prevent genType from being inferred as int in GLSL wrappers by@reshma045 in#7942
- Skip text/gridOutput with a warning in WebGL in 2.0 by@davepagurek in#8147
- Add 3D noise(vec3) support to p5.strands by@LalitNarayanYadav in#7978
- fixed the bug of black-frames by@ayushman1210 in#8132
- Branching and looping for p5.strands by@davepagurek in#8120
- Refactor typescript type generation by...
Assets6
Uh oh!
There was an error while loading.Please reload this page.