Update images of guide/README.md

[Ubayed-Bin-Sufian]

Summary

This Pull Request replaces the outdated images with the updated ones. It is a follow-up of #4243.

Changes introduced

• Update to latest images

Checklist

• The changes adhere to the project's contribution guidelines.
• Code changes have been implemented and tested.

[github-actions]

❌ Some Jest tests failed. Please check the logs and fix the issues before merging.

Failed Tests:

synthutils.test.js
VolumeActions.test.js
turtle-singer.test.js

[walterbender]

I am not sure it is worth replacing the SVG with PNG embedded in SVG. The differences are really cosmetic in almost every case.

There are issues with the pitchslider images. The sliders are set to the same position even though the pitches are different. It doesn't make sense.

[Ubayed-Bin-Sufian]

I am not sure it is worth replacing the SVG with PNG embedded in SVG. The differences are really cosmetic in almost every case.

There are issues with the pitchslider images. The sliders are set to the same position even though the pitches are different. It doesn't make sense.

I agree, the changes are trivial. I would change the core svg instead of embedding png in svg. Would you suggest a rebase for all the above images or a separate PR?

[walterbender]

Your changes to the text of the README are good. We need to fix the pitchslider images (SVG version). I think we can drop the other changes. Might be easiest in a new PR.

[Ubayed-Bin-Sufian]

I am not sure it is worth replacing the SVG with PNG embedded in SVG. The differences are really cosmetic in almost every case.

There are issues with the pitchslider images. The sliders are set to the same position even though the pitches are different. It doesn't make sense.

I have reviewed the guide, and it appears that the sliders are intended to be in the same position. I tested this behavior in both the master branch and the deployed version, and it seems to align with the original design intent.

• The Pitch Slider widget creates one column per Sine block, meaning each frequency gets its own vertical slider.
• Since (for eg: both 220 Hz and 440 Hz) are initial values for their respective sliders, they should appear aligned horizontally, starting at the middle or a neutral position of their individual columns.

[walterbender]

OK.