Skip to content

Releases: processing/p5.js

v2.0.0-beta.1

16 Jan 14:04
@limzykenneth limzykenneth
v2.0.0-beta.1
e35616f
This commit was signed with the committer’s verified signature. The key has expired.
limzykenneth Kenneth Lim
GPG key ID: E55E3D33A2174869
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.0.0-beta.1 Pre-release
Pre-release

We want your help!

Try testing out the beta and report any bugs you encounter!

What's Changed 🎊

In addition to lots of behind-the-scenes refactoring, here are some new features that we'd love your help testing out!

Async loading (thanks to @limzykenneth)

Rather than having a preload function, p5 2.0 has async setup!

1.x2.0
let img;

function preload() {
  img = loadImage('cat.jpg');
}

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

async function setup() {
  createCanvas(200, 200);
  img = await loadImage('cat.jpg');
}

Support for loading fonts via CSS (thanks to @dhowe)

In 2D mode, try loading fonts via a a path to a CSS font file, such as a Google Fonts link!

loadFont("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap")
loadFont(`@font-face { font-family: "Bricolage Grotesque", serif; font-optical-sizing: auto; font-weight: <weight> font-style: normal; font-variation-settings: "wdth" 100; }`);
loadFont({
    fontFamily: '"Bricolage Grotesque", serif',
    fontOpticalSizing: 'auto',
    fontWeight: '<weight>',
    fontStyle: 'normal',
    fontVariationSettings: '"wdth" 100',
});
loadFont("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf");
loadFont("path/to/localFont.ttf");
loadFont("system-font-name");

Support for variable font weight (thanks to contributions by @dhowe)

In 2D mode, if you've loaded a variable font, try changing its weight!

async function setup() {
  createCanvas(100, 100);
  const font = await loadFont(
    'https://fonts.googleapis.com/css2?family=Sniglet:wght@400;800&display=swap'
  );
}

function draw() {
  background(255);
  textFont(font);
  textAlign(LEFT, TOP);
  textSize(35);
  textWeight(sin(millis() * 0.002) * 200 + 400);
  text('p5*js', 0, 10);
}

More ways to draw and manipulate text (thanks to @davepagurek)

Like how textToPoints() gives you points on text, the new textToContours() function lets you edit the points on text and then draw them with fills!

createCanvas(100, 100);
const font = await loadFont('myFont.ttf');
background(200);
strokeWeight(2);
textSize(50);
const contours = font.textToContours('p5*js', 0, 50, { sampleFactor: 0.5 });
beginShape();
for (const pts of contours) {
  beginContour();
  for (const pt of pts) {
    vertex(x + 20*sin(y*0.01), y + 20*sin(x*0.01));
  }
  endContour(CLOSE);
}
endShape();

In WebGL, you can use textToModel to extrude a 3D model out of your text:

createCanvas(100, 100, WEBGL);
const font = await loadFont('myFont.ttf');
background(200);
textSize(50);
const geom = font.textToModel('p5*js', 0, 50, { sampleFactor: 2, extrude: 20 });
orbitControl();
model(geom);

A new pointer event handling system (thanks to @diyaayay)

Instead of having separate methods for mouse and touch, we now use the browser's pointer API to handle both simultaneously. Try defining mouse functions as usual and accessing the global touches array to see what pointers are active for multitouch support!

Custom shader attributes (thanks to @lukeplowden)

If you are using a shader and want custom per-vertex properties in addition to uniforms, which are the same across the whole shape, you can now call vertexProperty(name, value) before vertices.

const vertSrc = `#version 300 es
 precision mediump float;
 uniform mat4 uModelViewMatrix;
 uniform mat4 uProjectionMatrix;

 in vec3 aPosition;
 in vec2 aOffset;

 void main(){
   vec4 positionVec4 = vec4(aPosition.xyz, 1.0);
   positionVec4.xy += aOffset;
   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
 }
`;

const fragSrc = `#version 300 es
 precision mediump float;
 out vec4 outColor;
 void main(){
   outColor = vec4(0.0, 1.0, 1.0, 1.0);
 }
`;

function setup(){
  createCanvas(100, 100, WEBGL);

  // Create and use the custom shader.
  const myShader = createShader(vertSrc, fragSrc);
  shader(myShader);

  describe('A wobbly, cyan circle on a gray background.');
}

function draw(){
  // Set the styles
  background(125);
  noStroke();

  // Draw the circle.
  beginShape();
  for (let i = 0; i < 30; i++){
    const x = 40 * cos(i/30 * TWO_PI);
    const y = 40 * sin(i/30 * TWO_PI);

    // Apply some noise to the coordinates.
    const xOff = 10 * noise(x + millis()/1000) - 5;
    const yOff = 10 * noise(y + millis()/1000) - 5;

    // Apply these noise values to the following vertex.
    vertexProperty('aOffset', [xOff, yOff]);
    vertex(x, y);
  }
  endShape(CLOSE);
}

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.x2.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.x2.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.x2.0
beginShape();
curveVertex(15, 25);
curveVertex(10, 10);
curveVertex(15, 40);
curveVertex(40, 35);
curveVertex(25, 15);
curveVertex(15, 25);
curveVertex(10, 10);
curveVertex(15, 40);
endShape();
 
beginShape();

splineVertex(10, 10);
splineVertex(15, 40);
splineVertex(40, 35);
splineVertex(25, 15);
splineVertex(15, 25);


endShape(CLOSE);

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

A new public p5.Matrix class (thanks to @holomorfo)

TODO add examples

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

TODO add examples

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

TODO add examples

Full List

Read more

Contributors

nbogie, starzonmyarmz, and 30 other contributors
Assets 7
Loading

v1.11.2

28 Nov 15:32
@Qianqianye Qianqianye
v1.11.2
1ed240c
This commit was signed with the committer’s verified signature. The key has expired.
limzykenneth Kenneth Lim
GPG key ID: E55E3D33A2174869
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.11.2 Latest
Latest

What's Changed

What's Changed 🎊

New Contributors

Full Changelog: v1.11.1...v1.11.2

Contributors

muffinista, SableRaf, and 6 other contributors
Assets 7
Loading

v1.11.1

31 Oct 20:53
@Qianqianye Qianqianye
v1.11.1
6b69d26
Compare
Choose a tag to compare
v1.11.1

What's Changed 🎊

Code

Documentation

New Contributors 💗

Full Changelog: v1.11.0...v1.11.1

Contributors

shibomb, martinleopold, and 9 other contributors
Assets 7
Loading

v1.11.0

25 Sep 20:13
@Qianqianye Qianqianye
v1.11.0
5a7129b
Compare
Choose a tag to compare
v1.11.0

What's Changed 🎊

Code

Documentation

  • add non-code contributions to contrib guidelines readme by @sarahciston in #6941
  • Update README.md to include an updated get started link by @willallstet in #7232
  • Fix : broken link in contributor_docs/webgl_mode_architecture.md by @ashwanidey in #7235
  • Fix broken links in contributor_docs/steward_guidelines.md by @aleannab in #7240
  • Fix broken link in contributing_to_the_p5js_references.md by @aleannab in #7242
  • Fix : broken link in contributor_docs/webgl_contribution_guide.md by @ashwanidey in #7239
  • Fix Broken README Link by @benpalevsky in #7216
  • Fixed the broken link on p5.js website page for "p5.js Web Accessibility" by @shourysingh07 in #7254
  • Fixed the broken link on p5.js website page for "Our Focus on Access" by @shourysingh07 in #7255
  • Fixed broken links for p5js references by @visheshrwl in #7253
  • fix: broken links in lerpColor() by @M0nica in #7241
  • Fix broken links in contributor_docs/access.md by @aleannab in #7243
  • Fixed the broken link on p5.js website page for "WebGL Contribution Guide". by @shourysingh07 in #7263
  • Fixed the broken link on p5.js website page for "How to add Friendly Error Messages" by @shourysingh07 in #7264

New Contributors 💗

Thanks to all the contributors, and big shout out to the first time contributors!

Full Changelog: v1.10.0...v1.11.0

Contributors

aleannab, ksen0, and 24 other contributors
Assets 7
Loading

v1.10.0

31 Jul 20:35
@Qianqianye Qianqianye
v1.10.0
6c2e4eb
Compare
Choose a tag to compare
v1.10.0

What's Changed 🎊

Code

Documentation

New Contributors 💗

Full Changelog: v1.9.4...v1.10.0

Contributors

nbogie, starzonmyarmz, and 20 other contributors
Assets 7
Loading

v1.9.4

22 May 18:51
@Qianqianye Qianqianye
v1.9.4
c1859ce
Compare
Choose a tag to compare
v1.9.4

What's Changed 🎊

Code

Documentation

New Contributors 💗

Full Changelog: v1.9.3...v1.9.4

Contributors

IronBlood, bobbykaz, and 11 other contributors
Assets 7
Loading

v1.9.3

24 Apr 02:46
@Qianqianye Qianqianye
v1.9.3
7f3b48a
Compare
Choose a tag to compare
v1.9.3

What's Changed 🎊

Code

  • Fix vertices with different texture coordinates in imported models getting collapsed by @davepagurek in #6923
  • fixed parameters for normal() method by @kaiserarg in #6984
  • Fix for gif not animating when drawing to p5.graphics by @kaiserarg in #6935
  • add friendly error to createCapture() by @mdb0 in #6961
  • Fix main canvas clipping getting applied to framebuffers by @davepagurek in #6990

Documentation

Reference

Translation

New Contributors 💗

Full Changelog: v1.9.2...v1.9.3

Contributors

nickmcintyre, davepagurek, and 15 other contributors
Assets 7
Loading

v1.9.2

19 Mar 22:52
@Qianqianye Qianqianye
v1.9.2
b5797a5
Compare
Choose a tag to compare
v1.9.2

What's Changed 🎊

Code

Documentation

Reference

Translation

New Contributors 💗

Full Changelog: v1.9.1...v1.9.2

Contributors

nickmcintyre, davepagurek, and 15 other contributors
Assets 7
Loading

v1.9.1

29 Feb 19:16
@Qianqianye Qianqianye
v1.9.1
fd5dc4c
Compare
Choose a tag to compare
v1.9.1

What's Changed 🎊

Code

Documentation

New Contributors 💗

Full Changelog: v1.9.0...v1.9.1

Contributors

clemzio, IgnorantSapient, and 31 other contributors
Assets 7
Loading

v1.9.1-1 (beta)

20 Jan 13:59
@limzykenneth limzykenneth
v1.9.1-1
326bdd1
This commit was signed with the committer’s verified signature. The key has expired.
limzykenneth Kenneth Lim
GPG key ID: E55E3D33A2174869
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
v1.9.1-1 (beta) Pre-release
Pre-release

What's Changed

What's Changed 🎊

New Contributors

Full Changelog: v1.9.0...v1.9.1-1

Contributors

clemzio, IgnorantSapient, and 23 other contributors
Assets 7
Loading