Noisify

<img width="64" src="https://github.com/mrevanzak/noisify/blob/main/src/assets/images/icon.png" align="left" />

Noisify is an app to turn your favorite photo into a stunning wallpaper. Just snap a pic with your camera and let our app add a beautiful gradient and some cool noise effects. It’s like magic!

DEMO

How it works

Noisify uses react-native-vision-camera to display a Camera preview.

Using the VisionCamera's Frame Processors API and the VisionCamera's Skia Frame Processors integration, we can draws 2d graphics (in this case blur and noisy filter) directly to Camera Frames in realtime at 60 FPS.

This is the relevant code:

  const paint = useGrainyBlurShader();
  const frameProcessor = useSkiaFrameProcessor(
    (frame) => {
      "worklet";
      frame.render(paint);
    },
    [paint],
  );

export function useGrainyBlurShader() {
  const blur = useControlCenterStore((state) => state.blur);
  const noiseStrength = useControlCenterStore((state) => state.noiseStrength);
  const saturation = useControlCenterStore((state) => state.saturation);

  return useMemo(() => {
    shaderBuilder.setUniform("noiseStrength", [noiseStrength]); // Set the noise strength
    shaderBuilder.setUniform("saturation", [saturation]); // Set the saturation factor

    const blurFilter = Skia.ImageFilter.MakeBlur(
      blur,
      blur,
      TileMode.Mirror,
      null,
    );
    const grainyBlurFilter = Skia.ImageFilter.MakeRuntimeShader(
      shaderBuilder,
      null,
      blurFilter,
    );

    const paint = Skia.Paint();
    paint.setImageFilter(grainyBlurFilter);

    return paint;
  }, [blur, noiseStrength, saturation]);
}

See index.tsx for the full code.