Adding tutorial for 2.x transition for middle school and high school teachers.

[ksen0]

Based on the document Adrienne Gifford has prepared.

Remains to be done:

• Updated version management in editor screenshots
• Screenshot for the compatibility addons in editor
• What should be the image for the tutorial? As a placeholder' I've used a screenshot of the "quick teacher reference" table at the end. Though this could also be improved as the header alignment doesn't quite work.

[xinemata]

Great work! This is nitpicky, but there are multiple ways p5.js version 2 is being referred to now across p5js.org and @p5xjs on instagram: p5.js 2.0, p5.js 2.x, p5.js v2. Based on latest discussion amongst Processing Foundation's core team, should we universally call it p5.js v2?

[ksen0]

After feedback in Discord, I've normalized using "p5.js v2" as the convention. I've also made the quick reference for async/await not have the awkward line breaks anymore, and used "cat.jpg" throughout (also to reduce line length and prevent wrapping).

Before

After

Featured image animation of the important concepts

Screen.Recording.2026-07-15.at.23.02.07.mov

Animation is in this sketch (edits welcome, though I know it's messy, sorry); and the easing function is from Dave's tutorial. Uncomment line 78 to export a prfect loop, then animate with ffmpeg:

mkdir -p sorted
n=0
for f in $(ls frame-*.png | sort -V); do
  printf -v name "sorted/frame-%04d.png" "$n"
  cp "$f" "$name"
  n=$((n+1))
done
ffmpeg -framerate 15 -i sorted/frame-%04d.png -vf palettegen -frames:v 1 palette.png
ffmpeg -framerate 15 -i sorted/frame-%04d.png -i palette.png -lavfi paletteuse output.gif

(I was planning to also compress it, but it looks crisp now, I worry about legibility, and it's not bigger than many of the assets on the site already)

[ksen0]

Thanks to @SableRaf 's input, colors were adjusted to pass WCAG AAA contrast check on normal test and for the background of the animation to not be white, so it appears as an obvious block in the layout.