linear-color-space-gradient.tsx

import dynamic from "next/dynamic";
import p5Types from "p5";

const Sketch = dynamic(import("react-p5"), {
  loading: () => <></>,
  ssr: false,
});
const LinearColorSpaceGradient = () => {
  let rectHeight: number;
  let rectWidth: number;

  const setup = (p: p5Types, canvasParentRef: Element) => {
    p.createCanvas(500, 100).parent(canvasParentRef);
    p.rectMode(p.CENTER);
    rectHeight = p.height;
    rectWidth = p.width;
    p.noLoop();
  };
  const draw = (p: p5Types) => {
    if (p.drawingContext instanceof CanvasRenderingContext2D) {
      p.noStroke();
      // p.noFill();
      let gra = p.drawingContext.createLinearGradient(
        0,
        rectHeight / 2,
        rectWidth,
        rectHeight / 2
      );

      gra.addColorStop(0, "#000");
      gra.addColorStop(1, "#FFF");

      p.drawingContext.fillStyle = gra;
      p.rect(p.width / 2, p.height / 2, p.width, rectHeight);
    }

    p.loadPixels();
    const density = p.pixelDensity();
    const imageLength = 4 * (p.width * density) * (p.height * density);
    for (let i = 0; i < imageLength; i += 4) {
      // r
      // ガンマ補正 少数の場合、値は大きくなる = 白くなる
      //p.pixels[i] = p.pow(p.pixels[i] / 255, 1.0 / 2.2) * 255;
      // 逆ガンマ補正 値は小さくなる = 黒くなる
      p.pixels[i] = p.pow(p.pixels[i] / 255, 2.2) * 255;
      // g
      // ガンマ補正
      //p.pixels[i + 1] = p.pow(p.pixels[i + 1] / 255, 1.0 / 2.2) * 255;
      // 逆ガンマ補正
      p.pixels[i + 1] = p.pow(p.pixels[i + 1] / 255, 2.2) * 255;

      // b
      // ガンマ補正
      //p.pixels[i + 2] = p.pow(p.pixels[i + 2] / 255, 1.0 / 2.2) * 255;
      // 逆ガンマ補正
      p.pixels[i + 2] = p.pow(p.pixels[i + 2] / 255, 2.2) * 255;

      // alpha
      p.pixels[i + 3] = p.pixels[i + 3];
    }
    p.updatePixels();
  };
  return <Sketch setup={setup} draw={draw} />;
};

export default LinearColorSpaceGradient;