X Tutup
Skip to content

Releases: processing/p5.js

v2.2.2

22 Feb 20:56
@ksen0 ksen0
v2.2.2
369377d

Choose a tag to compare

View all tags
v2.2.2 Latest
Latest

What's Changed

This patch focuses on bugfixes, particularly on WebGPU performance and p5.strands. The goal is that all p5.strands shaders work with both WebGPU and WebGL canvases. This patch also adds millis() support inside strands code.

To use this patch, you can use this starter sketch!

Or load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

If you take any existing sketch, such as from the intro to strands tutorial, iyou can switch from WEBGL to WEBGPU (async/await will be needed!)

Read more about how the WebGPU-based renderer works and where we plan on taking it here!

millis() supported in p5.strands

Here is a sketch (thanks @perminder-17!) showing millis() being used inside a strands shader. Previously, const t = uniformFloat(() => millis()); was needed. This can still be used, but you can instead use millis() directly:

// p5.js (WEBGL) sketch showing millis() driving a wavy displacement
let mat;

function setup() {
  createCanvas(600, 400, WEBGL);
  pixelDensity(1);

  mat = baseMaterialShader().modify(() => {
    // displace geometry in world-space based on y + time
    getWorldInputs((inputs) => {
      const wave = sin(inputs.position.y * 0.05 + millis() * 0.004);
      inputs.position += [20, 25, 20] * wave;
      return inputs;
    });
  });
}

function draw() {
  background(15);
  orbitControl();

  // lights so the material shader looks nice
  ambientLight(40);
  directionalLight(255, 255, 255, 0.3, 0.6, -1);

  // apply the modified material shader + draw some geometry
  shader(mat);
  noStroke();

  // some rotation so you can see the displacement depth
  rotateY(frameCount * 0.01);
  rotateX(-0.25);

  // a tall shape so Y-based waves are obvious
  sphere(120, 80, 60);
}

What does p5.strands make possible?

(Special thanks to @davepagurek for creating the sketches! Excerpted from a blog post about 2.2 updates.)

image

First, consider this sketch, which uses JavaScript loops to draw a cube of cubes. It is only 40 lines, but if there are many more cubes, it will slow down very much. If it is running smoothly, try changing all the “15” to a higher and higher number, such as “30.” As the scene grows, the sketch performance will suffer very noticeably.

The purpose of shader is to use parallel, GPU-based computation to speed this up. Instead of for loops, here is a second version of the same sketch using GLSL. It is 200 lines of code, and, if you are not familiar with GLSL, may be very difficult to read. Look for the “15” here, too, and try changing it to a larger number, like “30” or beyond. The shader-based animation remains smooth, showing the performance benefits of GPU rendering.

Finally, the p5.strands version of this sketch combines a more accessible, readable style of JavaScript with the performance of GLSL.

With the introduction of the WebGPU-based renderer, p5.strands sketches can seamlessly switch between WEBGL or WEBGPU renderer. Here is the same example as above, but using the WebGPU-based renderer. The only changes needed were to use async/await with createCanvas(...), and to import both the main library and the p5.webgpu.js add-on:

    <script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.webgpu.js"></script>

All Changes

  • Refactor global node handling and add millis function by @perminder-17 in #8530
  • 2.0 strands docs: add simple noise() example for buildFilterShader by @nbogie in #8521
  • Sketch verifier: parse using the latest supported ECMAScript version by @dontwanttothink in #8522
  • Add support for negative vertex indices in OBJ loader for 2.x by @avinxshKD in #8512
  • Fix Show actual type in strands hook error messages by @Anshumancanrock in #8505
  • Improve WebGL font error message to suggest textFont() usage by @yugalkaushik in #8513
  • Fix/webgpu crash pixel density by @saurabh24thakur in #8476
  • Fix WebGPU bugs surfaced by the Intro to Strands tutorial by @davepagurek in #8538
  • Fix build*Shader methods in instance mode by forwarding optional scope by @aashu2006 in #8523
  • Fix broken reference links in lerpColor() documentation (p5.js 2.0) by @rakesh2OO5 in #8518
  • Fix WebGPU filter shader parameters being named differently than in WebGL by @davepagurek in #8546
  • Updated readme and contributors for 2.0 branch by @ksen0 in #8556
  • Updated readme and contributors for 2.0 branch (with attribution for image) by @ksen0 in #8557

New Contributors

Stewards

Code review and additional support with testing the release candidates by:

Full Changelog: v2.2.1...v2.2.2

Contributors

nbogie, ksen0, and 9 other contributors
Assets 6
Loading

v2.2.2-rc.2

21 Feb 19:21
@ksen0 ksen0
v2.2.2-rc.2
9c7a97f

Choose a tag to compare

View all tags
v2.2.2-rc.2 Pre-release
Pre-release

What's Changed

The upcoming patch focuses on bugfixes and documentation, particularly on strands and WebGPU. Specifically, the goal is that all strands shaders work with both WebGPU and WebGL canvases.

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 or #p5strands channels!

To test this patch, you can use this starter sketch!

Or load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.2/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.2/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

Read more about how it works and where we plan on taking it here!

What's Changed 🎊

  • Fix WebGPU filter shader parameters being named differently than in WebGL by @davepagurek in #8546

Full Changelog: v2.2.2-rc.1...v2.2.2-rc.2

Contributors

davepagurek
Loading

v2.2.2-rc.1

19 Feb 17:02
@ksen0 ksen0
v2.2.2-rc.1
8196270

Choose a tag to compare

View all tags
v2.2.2-rc.1 Pre-release
Pre-release

What's Changed

The upcoming patch focuses on bugfixes and documentation, particularly on strands and WebGPU. Specifically, the goal is that all strands shaders work with both WebGPU and WebGL canvases.

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 or #p5strands channels!

To test this patch, you can use this starter sketch!

Or load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.1/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

Read more about how it works and where we plan on taking it here!

What's Changed 🎊

  • Fix broken reference links in lerpColor() documentation (p5.js 2.0) by @rakesh2OO5 in #8518
  • Refactor global node handling and add millis function by @perminder-17 in #8530

Full Changelog: v2.2.2-rc.0...v2.2.2-rc.1

Contributors

perminder-17 and rakesh2OO5
Loading

v2.2.2-rc.0

18 Feb 12:01
@ksen0 ksen0
v2.2.2-rc.0
33369be

Choose a tag to compare

View all tags
v2.2.2-rc.0 Pre-release
Pre-release

What's Changed

The upcoming patch focuses on bugfixes and documentation, particularly on strands and WebGPU. Specifically, the goal is that all strands shaders work with both WebGPU and WebGL canvases.

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 or #p5strands channels!

To test this patch, you can load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2-rc.0/lib/p5.webgpu.js"></script>

Then load WebGPU mode in createCanvas - note the async/await, this is needed for WebGPU but not WebGL:

async function setup() {
  await createCanvas(400, 400, WEBGPU);
}

Read more about how it works and where we plan on taking it here!

What's Changed 🎊

New Contributors

Full Changelog: v2.2.1...v2.2.2-rc.0

Contributors

nbogie, davepagurek, and 6 other contributors
Loading

v2.2.1

11 Feb 11:57
@ksen0 ksen0
v2.2.1
276a96a

Choose a tag to compare

View all tags
v2.2.1

What's Changed

This patch includes documentation, bugfixes, and dependency updates. A flatter p5.strands API is also included as part of ongoing incremental strands API.

You can get started with the features in this release using these sketches:

The focus of this patch is performance improvements to WebGPU core add-on. You can load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.1/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!

What's Changed 🎊

New Contributors

Stewards

This patch was stewarded (through code review, comments, and discussion) by
@davepagurek
@limzykenneth
@nbogie
@perminder-17
@ksen0

Full Changelog: v2.2.0...v2.2.1

Contributors

nbogie, ksen0, and 13 other contributors
Loading

v2.2.1-rc.1

10 Feb 10:50
@ksen0 ksen0
v2.2.1-rc.1
8fb3748

Choose a tag to compare

View all tags
v2.2.1-rc.1 Pre-release
Pre-release

What's Changed

What's Changed 🎊

  • docs(p5.strands): document smoothstep by @jjnawaaz in #8459
  • gitignore vscode local.code-workspace allowing users project-specific overrides by @nbogie in #8479
  • fix(webgl): normalize nearly identical vertices before tessellation by @avinxshKD in #8221
  • Remove deprecated, unmaintained vscode extension "npm" from recommendations by @nbogie in #8497
  • Use --shallow in doc build to prevent documentation.js from processing GLSL imports by @nbogie in #8500
  • Dependencies updates by @limzykenneth in #8360
  • Add visual regression tests for WebGL 3D primitives by @aashu2006 in #8485
  • Add transform support to bezier shapes in clip() by @VANSH3104 in #8481
  • Fix instance mode usage of uniformFloat() in shader.modify() example by @aashu2006 in #8470
  • More performance updates for WebGPU mode by @davepagurek in #8502
  • More WebGPU optimizations by @davepagurek in #8510
  • fix: use @chainable per-overload by @LuLaValva in #8504
  • add getTexture docs and examples for p5.strands by @nbogie in #8446

New Contributors

Full Changelog: v2.2.1-rc.0...v2.2.1-rc.1

Contributors

nbogie, davepagurek, and 6 other contributors
Loading

v2.2.1-rc.0

01 Feb 19:06
@ksen0 ksen0
v2.2.1-rc.0
aaff6a7

Choose a tag to compare

View all tags
v2.2.1-rc.0 Pre-release
Pre-release

What's Changed

The upcoming patch focuses on bugfixes and documentation, particularly on WebGPU and strands. 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!

To test this patch, you can load both p5.js and WebGPU mode by adding these two script tags to your sketch:

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.1-rc.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.1-rc.0/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!

What's Changed 🎊

New Contributors

Full Changelog: v2.2.0...v2.2.1-rc.0

Contributors

davepagurek, skyash-dev, and 6 other contributors
Loading

v2.2.0

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

Choose a tag to compare

View all tags
v2.2.0

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/p5@2.2.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.0/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
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/p5@2.2.0-rc.6/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@2.2.0-rc.6/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
X Tutup