CP2: Grayscale Conversion – Image Filters
Converting an image to grayscale is perhaps the simplest of filters we can implement ourselves. While p5.js' grayscale filter is a one-line, easy option, it's useful to understand how it works, and, as you'll see below, we can also improve it a bit, too! ?? https://editor.p5js.org/jeffThompson/sketches/W4lhQnysj ALL THE VIDEOS IN THIS UNIT ? https://youtube.com/playlist?list=PLsGCUnpinsDkDT1Kr4oy5tmpd2N3LP9qJ CHALLENGES ❓ Another way to create a grayscale image is to average the values for red, green, and blue. Can you implement that below? Do you prefer those results or just the red value? ❓ This demo uses get() and set(), which can be slow with large images – can you convert this to use the pixels array instead?
Converting an image to grayscale is perhaps the simplest of filters we can implement ourselves. While p5.js' grayscale filter is a one-line, easy option, it's useful to understand how it works, and, as you'll see below, we can also improve it a bit, too! ?? https://editor.p5js.org/jeffThompson/sketches/W4lhQnysj ALL THE VIDEOS IN THIS UNIT ? https://youtube.com/playlist?list=PLsGCUnpinsDkDT1Kr4oy5tmpd2N3LP9qJ CHALLENGES ❓ Another way to create a grayscale image is to average the values for red, green, and blue. Can you implement that below? Do you prefer those results or just the red value? ❓ This demo uses get() and set(), which can be slow with large images – can you convert this to use the pixels array instead?