v2.0.4-rc.0

What's Changed

What's Changed 🎊

• 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 code in 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

New Contributors

• @sophyphile made their first contribution in #7882
• @FerrinThreatt made their first contribution in #7908
• @madhav2348 made their first contribution in #7872
• @nking07049925 made their first contribution in #7956
• @nickswalker made their first contribution in #7973
• @acgillette made their first contribution in #7971

Full Changelog: v2.0.3...v2.0.4-rc.0

v1.11.9

What's Changed

This release includes bug-fixes and updates to documentation, including the publication of a revised stewardship process.

Bugfix 🐞

• Fixed loop variable in createFileInput() docs (dom.js) by @andrewmcwhae in #7422
• Respect p5.disableFriendlyErrors by @quinton-ashley in #7888
• Remove second call of _updateWindowSize() by @bensgilbert in #7847

Documentation 📚

• docs: add andrewmcwhae as a contributor for doc by @allcontributors[bot] in #7883
• docs: add bensgilbert as a contributor for code by @allcontributors[bot] in #7922
• Update stewards.yml by @ksen0 in #7923
• chore: update README table from stewards.yml by @ksen0 in #7925
• fix duplicate contributor (trivial) by @bensgilbert in #7924
• Fix typos in documentation and comments by @leopardracer in #7926
• docs: add leopardracer as a contributor for doc by @allcontributors[bot] in #7927
• Docs: Fix typos in documentation by @kilavvy in #7931
• docs: add kilavvy as a contributor for doc by @allcontributors[bot] in #7932
• docs: add shivasankaran18 as a contributor for doc by @allcontributors[bot] in #7943
• Revamped config.yml(branch:main) by @shivasankaran18 in #7775
• docs: add madhav2348 as a contributor for code by @allcontributors[bot] in #7948
• docs: add nking07049925 as a contributor for code by @allcontributors[bot] in #7962
• docs: add LalitNarayanYadav as a contributor for code by @allcontributors[bot] in #7916
• docs: add FerrinThreatt as a contributor for doc by @allcontributors[bot] in #7918
• docs: add vtjl10 as a contributor for doc by @allcontributors[bot] in #7914
• Update stewardship guildelines and process by @ksen0 in #7867
• Update stewards-update.yml to fix typo and include token by @ksen0 in #7892
• Added p5.js-website accessibility steward stewards.yml by @ksen0 in #7893
• Update stewards-update.yml to only make PR with README by @ksen0 in #7895
• Update README table from stewards.yml by @ksen0 in #7896
• docs: add atmajaa as a contributor for doc by @allcontributors[bot] in #7901
• Update labeler.yml to correctly group DevOps lables by @ksen0 in #7904
• docs: add SonyaCode as a contributor for a11y, blog, and 4 more by @allcontributors[bot] in #7907
• Correct username in stewards.yml by @IIITM-Jay in #7912
• Fix Typo in Comments: "trhough" to "through" in textOutput.js by @vtjl10 in #7911
• chore: update README table from stewards.yml by @ksen0 in #7913

New Contributors

• @andrewmcwhae made their first contribution in #7422
• @vtjl10 made their first contribution in #7911
• @leopardracer made their first contribution in #7926
• @kilavvy made their first contribution in #7931

Full Changelog: v1.11.8...v1.11.9

v1.11.8

What's Changed

What's Changed 🎊

• Add LalitNarayanYadav for doc by @ksen0 in #7830
• Reduce contributor avatar image size to 64px for improved performance #7788 by @LalitNarayanYadav in #7814
• fix: push() ignoring the ColorMode #7402 by @swastikCommits in #7586
• Revert "fix: push() ignoring the ColorMode #7402" by @ksen0 in #7848
• Fix typos by @omahs in #7855
• docs: add dpanshug as a contributor for doc by @ksen0 in #7864
• added instance of video in callback by @subCode321 in #7585
• chore: fix typos across codebase by @sukrucildirr in #7874

New Contributors

• @subCode321 made their first contribution in #7585
• @sukrucildirr made their first contribution in #7874

Full Changelog: v1.11.7...v1.11.8

v2.0.3

What's Changed

What's Changed 🎊

• 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

New Contributors

• @dpanshug made their first contribution in #7812

Full Changelog: v2.0.2...v2.0.3

v2.0.2

What's Changed

Documentation and Tests

• Fix typo in directionalLight reference (dev-2.0 branch) #7743 by @LalitNarayanYadav in #7778
• Rest types by @davepagurek in #7803
• Updating all the broken refrence examples. by @perminder-17 in #7739
• P2HDR docs by @perminder-17 in #7728
• Update creating addon libraries contributor docs by @limzykenneth in #7800

Improvements

• Improve antialiased framebuffer performance by @davepagurek in #7794
• Remove dayjs dependency and update date formatting in banner by @error-four-o-four in #7804

Bugfixes and Test(s) 🐞 💚

• Fix corrupted textures when rendering too many WebGL characters by @davepagurek in #7792
• 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
• Fixing keyTyped() for dev-2.0 branch by @perminder-17 in #7809

Full Changelog

v2.0.1...v2.0.2

v1.11.7

What's Changed

What's Changed 🎊

• Consistent movedX and movedY behaviour across zoom levels by @IIITM-Jay in #7795
• Publish 1.x under r1 tag by @ksen0 in #7810

New Contributors

• @IIITM-Jay made their first contribution in #7795

Full Changelog: v1.11.6...v1.11.7

v1.11.6

What's Changed

What's Changed 🎊

• "Fix typo in directionalLight reference (main branch)" - #7743 by @LalitNarayanYadav in #7777
• Fix _isGlobal flag in ini method by @VANSH3104 in #7785
• Fix: keyTyped() can now accept the same char consecutively by @AhmedMagedC in #7808

New Contributors

• @AhmedMagedC made their first contribution in #7808

Full Changelog: v1.11.5...v1.11.6

v2.0.1

What's Changed 🎊

Documentation and Tests

• Updating foundation-section for async/await by @perminder-17 in #7721
• fixing keyReleased() function. by @perminder-17 in #7758

Bugfixes

• [2.x] Fix ESM export functionality by @limzykenneth in #7764
• Fix WebGL alpha blending by @davepagurek in #7769
• [2.0] Fix touch event not updating mouse coordinates by @limzykenneth in #7772
• Fixed Error in FES prevents message from being shown, Prevented 'window' properties from being overwritten by @HughJacks in #7765

Bugfix with Test 🐞 💚

• fix: add splineVertex to p5.Graphics prototype and fix unit test error by @VANSH3104 in #7757

New Contributors

• @HughJacks made their first contribution in #7765

Full Changelog: v2.0.0...v2.0.1

v2.0.0

We are releasing p5.js 2.0 to the community for testing and development! Here’s what you need to know.

• For reference: p5.js 1.x reference will stay on https://p5js.org/, and p5.js 2.x documentation will be on https://beta.p5js.org/
• In the p5.js Editor: the default will continue to be 1.x until at least August 2026 - more information and discussion on timeline can be found on this Discourse thread or this GitHub thread
• For updating sketches and add-on libraries: check out the compatibility add-on libraries and guides
• For contribution: npm latest will default to 2.x, but the git branches are still separated with main on 1.x and dev-2.0 on 2.x. We will switch the branches when we have updated all automations (including deploying updated documentation to the website). Want to contribute ideas or implementation? Check the 2.x project board for an overview of what still needs discussion, and what’s ready for work!

Start exploring 🌱

• Typography: textToContours(), textToModel() in WEBGL, and textWeight() for variable fonts!
• New color modes with colorMode()!
• Authoring shaders with JavaScript using p5.strands!
• Convert 3D screen coordinates to 2D screen coordinates with worldToScreen!
• Add-on Library Authoring Guide

More details of the changes 🌳

You can also checkout Dave Pagurek's reflections on p5.js 2.0 and an open source philosophy!

Typography

• A refactor of the typography system to be smaller, support variable fonts, and have more precise text measurement by Daniel Howe @dhowe
• Support for loading fonts via CSS (thanks to @dhowe)
• More ways to draw and manipulate text (thanks to @davepagurek)
• An approximately 350% performance improvement to textToPoints and 3D text extrusion support (thanks to @davepagurek)

Support for more color spaces in p5.Color (thanks to @limzykenneth and @dianamgalindo)

p5.js 2.0 now supports more color modes in addition to the existing RGB, HSB, and HSL color modes. Here are the list of new supported color mode and brief description of them:

• RGBHDR - High Dynamic Range RGB color defined within the Display P3 color space. You will need to use the HDR canvas described below to draw this color on the canvas accurately.
• HWB - Hue, Whiteness, Blackness. This is similar to HSL and HSB in that you will define a hue angle however instead of saturation and lightness, you will define the percentage of whiteness and blackness. It is the color model of the GUI color picker used by Chrome.
  
• LAB - Also called CIE Lab, defines color with Lightness, Alpha, and Beta. The color space is often used in professional color measuring context.
• LCH - An easier to use representation of a CIE Lab color with definition of Lightness, Chroma, and Hue instead.
• OKLAB - OkLab is a slight adjustment to CIE Lab color space mainly to fix a non-uniformity issue that exist in CIE Lab. This difference is more visible in the example below.
• OKLCH - An easier to use representation of an OkLab color with definition of Lightness, Chroma, and Hue instead.

Comparing HSL, LCH, and OKLCH in a sketch below:

From left to right are color wheels of HSL, LCH, and OKLCH respectively. Notice the evenness of color distribution between each wheel with OkLCH having the most even distribution. It can be noted that the LCH wheel has a large blue section that is fixed by OkLCH.

To use these new color spaces in p5.js 2.0, the respective constants have been added and the colorMode() function can be used with these constants in the same way as RGB, HSL, and HSB.

function setup(){
  createCanvas(200, 200);
}

function draw(){
  colorMode(OKLCH);
  background(220); // Should show a teal colored canvas
}

Support for wide-gamut colors with the display-p3 mode (thanks to @limzykenneth)

You can now create a 2D canvas that supports HDR colors that will give you a more vibrant sketch and also HDR images. To use a HDR canvas you will need to create it using the P2DHDR constant like below:

function setup(){
  createCanvas(400, 400, P2DHDR);
}

When a P2DHDR canvas is created, the default color mode will be switched to the new RGBHDR color mode instead of RGB. In practice you can continue to use the same RGB color definition you have always used.

function setup(){
  createCanvas(400, 400, P2DHDR);
}

function draw(){
  background(255, 0, 0);
  fill(100, 255, 0);
  circle(100, 100, 50);
}

This example sketch shows a direct comparison between HDR and non-HDR colors, you should see three bands of red, green, and blue colors with a slightly dimmer red, green, and blue circles within. However, both your browser and your screen will need to support HDR to see the difference. Currently Firefox on desktop does not support HDR canvas so if you do not see a difference, try a different browser such as Safari or Chrome.

You can also now load HDR images and have them be displayed in full HDR in a HDR canvas. If you see a dark image on the linked sketch, your browser or screen does not support HDR and you should try a different browser/device.

A new simple lines mode for WebGL (thanks to contributions from @perminder-17)

If you are drawing lots of shapes, and don't need stroke caps or joins, you can use a simple lines mode for increased performance in WebGL. You can activate this mode by calling linesMode(SIMPLE) in your sketch.

Custom shaders for fills, strokes, images (thanks to @Garima3110 and @perminder-17)

You can now create your own shaders for fills, strokes, and images, and have them all applied at once! Use shader() to set a fill shader, strokeShader() to set a stroke shader, and imageShader() to set an image shader. Try using baseMaterialShader().modify(...) and baseStrokeShader().modify(...) to create custom shaders.

let myFillShader = baseMaterialShader.modify({
  'vec4 getFinalColor': `(vec4 color) {
    return vec4(1., 1., 0., 1.);
  }`
});
let myStrokeShader = baseStrokeShader.modify({
  'vec4 getFinalColor': `(vec4 color) {
    return vec4(1., 0., 1., 1.);
  }`
});
let myImageShader = baseMaterialShader.modify({
  'vec4 getFinalColor': `(vec4 color) {
    return vec4(0., 1., 1., 1.);
  }`
});

shader(myFillShader);
strokeShader(myStrokeShader);
imageShader(myImageShader);

sphere(); // Draws with the custom stroke and image shaders
image(myImg, 0, 0); // Draws with the custom image shader

Updated bezier and curve drawing functions (thanks to @GregStanton)

First off: you can combine multiple types of curves in one begin/endShape() block now!

Long cubic and quadratic bezier vertex calls are now split up into their individual control points. Both cubic and quadratic curves are done with bezierVertex now, and you can set bezierOrder() to change from cubic (order 3) to quadratic (order 2). For WebGL mode, this also means you can also specify texture coordinates per control point, or change the fill, stroke, normal, and more between control points.

1.x	2.0
beginShape(); vertex(10, 10); vertex(30, 10); bezierVertex(35, 10, 40, 15, 40, 20); vertex(40, 30); quadraticVertex(40, 40, 30, 40); vertex(10, 40); endShape(CLOSE);	beginShape(); vertex(10, 10); vertex(30, 10); // Default cubic bezierVertex(35, 10); bezierVertex(40, 15); bezierVertex(40, 20); vertex(40, 30); bezierOrder(2); bezierVertex(40, 40); bezierVertex(30, 40); vertex(10, 40); endShape(p5.CLOSE);

We've renamed curveVertex to splineVertex and have given it more options. By default, it will now go through every splineVertex, so you no longer have to double up the first/last point to get it to go through it:

1.x	2.0
beginShape(); curveVertex(10, 10); curveVertex(10, 10); curveVertex(15, 40); curveVertex(40, 35); curveVertex(25, 15); curveVertex(15, 25); curveVertex(15, 25); endShape();	beginShape(); splineVertex(10, 10); splineVertex(15, 40); splineVertex(40, 35); splineVertex(25, 15); splineVertex(15, 25); endShape();

Similarly, endShape(CLOSE) (or endContour(CLOSE) if you're in a contour) will cause a spline to smoothly loop back on itself so you no longer need to double up any points:

...

1.x	2.0

v1.11.5

This release is published on npm with the tag r1

What's Changed

What's Changed 🎊

• reorder npm run commands to make p5.js-website update the correct ver… by @lirenjie95 in #7747
• Update README.md - 2.0 Info by @ksen0 in #7751

Full Changelog: v1.11.4...v1.11.5