ENA-230: Request for a "set saturation effect" block

Hi Scratch team,

Myself and many other creators on scratch would like to request a "set saturation effect" block in Scratch. This would allow users to adjust the intensity of the colors in a sprite, making them more or less vibrant.

Why should this suggestion be implemented?

My personal need for this block is because I want to be able to stamp with a specific saturation. This would make it possible for my project: https://scratch.mit.edu/projects/723419988/ to stamp any solid coloured triangle quickly.

In addition to my use case of stamping rgb quickly, this effect would be useful for regular scratch usage. Some ideas of how it could be used are:

• Easy shadows: clone a sprite, send it to the back layer, offset slightly and set the saturation to 0 and you have a quick shadow.
• Grayed out options: If a scratcher makes a GUI for their game, they might want buttons which are grayed out. For example in a level select menu, you want to gray out future levels.
• Fun animations: with saturation scratchers can create animations which take advantage of saturation. One example, might be a player sprite which smoothly transistions from colour to grayscale and back to represent the character being at low health.

These are just some ideas I thought of off the top of my head, but I'm sure if you made a saturation effect easily accessible it would inspire even more creative ideas.

What workarounds exist?

A workaround for this block exists with this: https://scratch.mit.edu/projects/623945749/ but it requires two stamps and alot of calculations which causes it to be much slower than a built in block would be. This workaround is also inaccessible and unintuitive for regular scratchers to use. (most scratchers do not know about the existence of this method, let alone how it works)

A workaround for achieving grayscale specifically exists which is to set the colour effect to infinity. However similarly this is quite inaccessible and unintuitive.

How could this suggestion be implemented?

The implementation of this suggestion is not neccessarily simple (nothing is ever simple!), but it's certainly not difficult. Since the block "set colour effect" exists, the saturation block can be created by just copying the code for the "set colour effect" in every location that "set colour effect" is referenced and modifying it for "set saturation effect"

Specifically the changes required are:

• in scratch-render/src/shaders/sprite.frag add a shader for saturation. This is very similar to the one for colour except it simply clamps the saturation value and then sets hsv.y to this value. You would also need to update the color shader to allow for saturation to go to 0, when saturation is enabled, as at the moment it sets a minimum saturation of 0.11
• in scratch-render/src/EffectTransform.js add logic for saturation. The logic here is similar to what is used in sprite.frag to add saturation. The structure can be copied from the logic for color.

sprite.frag and effectTransform have the main changes but the below files also need minor changes:

• in scratch-render/src/ShaderManager.js the new saturation effect needs to be added. This can be almost exactly copied from the object used for brightness
• in scratch-render/src/playground/ index.html and playground.js do minor changes to make sure the render demos still work correctly.
• in scratch-blocks/blocks_vertical/looks.js add the new 'SATURATION' option to the setEffect block dropdown options.
• scratch-blocks/msg/json/en.json add the new 'SATURATION' option
• in scratch-l10n/editor/blocks add a new option to the json for each language called "LOOKS_EFFECT_SATURATION". The value for this can be automatically taken from "COLOUR_SATURATION_LABEL" just change it to lower case ;)

I hope you will consider this feature request. Thank you for your time and for creating such a wonderful platform for creativity and learning.

Best regards,
Joe (Chrome_Cat)

Start by tracing the existing colour-effect implementation in scratch-render/src/shaders/sprite.frag and scratch-render/src/EffectTransform.js, then check scratch-render/src/ShaderManager.js. Review the playground files, scratch-blocks/blocks_vertical/looks.js, scratch-blocks/msg/json/en.json, and scratch-l10n/editor/blocks for the corresponding integration points. Done means the saturation option is represented consistently across rendering, demos, the block dropdown, and localization files.