Update “Custom Shapes and Smooth Curves” tutorial for p5.js 2.x

[perminder-17]

Most appropriate sections of the p5.js website?

Tutorials

What is your operating system?

Linux

Web browser and version

Firefox

Actual Behavior

The “Custom Shapes and Smooth Curves” tutorial currently targets p5.js 1.x, including legacy calls to bezierCurve() and other outdated APIs. Since p5.js 2.0 has revised the curve and shape methods (and removed deprecated functions), we need to refresh this tutorial so it only demonstrates supported 2.x functionality.

Code samples use the old bezierCurve() signature and other removed shape-drawing functions. Tutorial text still references 1.x API names and parameters. Linked Web Editor sketches could also remain on p5.js 1.x and fail under 2.x.

Expected Behavior

• All curves and custom shapes use the updated p5.js 2.x methods with correct parameter order.
• Tutorial narrative only names functions that exist in p5.js 2.x.
• All external sketches are forked or updated to p5.js 2.x so examples run without errors.

Steps to reproduce

Here's the tutorial written. You could build the website in p5.js dev-2.0 branch

Here's how the website could be build

Would you like to work on the issue?

No, this could be assigned to volunteers.

[ksen0]

Thanks for spotting this @perminder-17 ! What do you think about not forking externally but rather including the whole (updated) body of the finished sketch at the end of the tutorial? This allows better maintenance overall, because then the tutorials are more self-contained.

Including @jules-kris (author of that tutorial) in this conversation in case he would like to weigh in on this!

[perminder-17]

Thanks for spotting this @perminder-17 ! What do you think about not forking externally but rather including the whole (updated) body of the finished sketch at the end of the tutorial? This allows better maintenance overall, because then the tutorials are more self-contained.

Hi @ksen0 , I agree that we don't need to think about forking externally but rather including the whole finished sketch at the end of the tutorial.

In short, just updating this : https://github.com/processing/p5.js-website/blob/2.0/src/content/tutorials/en/custom-shapes-and-smooth-curves.mdx.todo file with finished sketch at the end? Am I right?

[ksen0]

@perminder-17 that sounds good!

As far as I know, the main thing that needs to be updated there is bezierVertex usage. The person working on this can refer to the new reference or this example from the 2.x transition guide:

p5.js 1.x

p5.js 2.x

// Draw the curved star shape. beginShape(); // Original anchor at top. vertex(0, -100); // Top-right curve. bezierVertex(0, -50, 50, 0, 100, 0); // Bottom-right curve. bezierVertex(50, 0, 0, 50, 0, 100); // Bottom-left curve. bezierVertex(0, 50, -50, 0, -100, 0); // Top-left curve. bezierVertex(-50, 0, 0,-50, 0,-100); endShape();

// Draw the curved star shape. beginShape(); // Original anchor at top. bezierVertex(0, -100); // Top-right curve. bezierVertex(0, -50); bezierVertex(50, 0); bezierVertex(100, 0); // Bottom-right curve. bezierVertex(50, 0); bezierVertex(0, 50); bezierVertex(0, 100); // Bottom-left curve. bezierVertex(0, 50); bezierVertex(-50, 0); bezierVertex(-100, 0); // Top-left curve. bezierVertex(-50, 0); bezierVertex(0, -50); bezierVertex(0,-100); endShape();

[jishnunambiarr]

Hey @perminder-17 @ksen0 , I'd like to work on this issue.
If I understand correctly, the external fork at the end of the tutorial should be removed, and the bezierVertex usage throughout the document needs to be updated to the p5.js 2.x API. I checked the linked tutorial file, and updating the curvedSparkle() function seems to address the main compatibility issue. I'll also add the complete updated sketch at the end of the tutorial for better clarity and self-containment.

Please let me know if there's anything I might have missed before I get started!

[perminder-17]

Sounds good @jishnunambiarr , I have assigned you this issue. Feel free to add a PR to fix this :)

Really thanks for your help:)