柏林噪声着色器

分形柏林噪声着色器

返回带有柏林分形噪声的着色器。

名称	类型	描述
freqX	数字	X 方向的基本频率；范围[0.0, 1.0]
freqY	数字	Y 方向的基本频率；范围[0.0, 1.0]
八度	数字
种子	数字
tileWidth?	数字	如果此值和tileHeight是非零值，则将修改频率，以便噪声对于给定的大小是可平铺的。
tileHeight?	数字	如果此值和tileWidth是非零值，则将修改频率，以便噪声对于给定的大小是可平铺的。

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  FractalNoise,
  Skia,
  Shader,
  Fill,
  vec
} from "@shopify/react-native-skia";
 
export const FractalNoiseDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  FractalNoise,
  Skia,
  Shader,
  Fill,
  vec
} from "@shopify/react-native-skia";
 
export const FractalNoiseDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <FractalNoise freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

结果

湍流柏林噪声着色器

返回具有柏林湍流的着色器。

名称	类型	描述
freqX	数字	X 方向的基本频率；范围[0.0, 1.0]
freqY	数字	Y 方向的基本频率；范围[0.0, 1.0]
八度	数字
种子	数字
tileWidth?	数字	如果此值和tileHeight是非零值，则将修改频率，以便噪声对于给定的大小是可平铺的。
tileHeight?	数字	如果此值和tileWidth是非零值，则将修改频率，以便噪声对于给定的大小是可平铺的。

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  vec
} from "@shopify/react-native-skia";
 
export const TurbulenceDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  vec
} from "@shopify/react-native-skia";
 
export const TurbulenceDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill color="white" />
      <Rect x={0} y={0} width={256} height={256}>
        <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
      </Rect>
    </Canvas>
  );
};

结果