SineWave

Animated wave with thickness and softness

Props

colorstring

Default:#ffffff

The color of the sine wave

color

stringDefault: #ffffff

The color of the sine wave

amplitudenumber

Default:0.15

The height/amplitude of the sine wave

amplitude

numberDefault: 0.15

The height/amplitude of the sine wave

frequencynumber

Default:1

The frequency/number of wave cycles

frequency

numberDefault: 1

The frequency/number of wave cycles

speednumber

Default:1

The animation speed of the wave

speed

numberDefault: 1

The animation speed of the wave

anglenumber

Default:0

The rotation angle of the wave (in degrees)

angle

numberDefault: 0

The rotation angle of the wave (in degrees)

position{x: number, y: number}

Default:{"x":0.5,"y":0.5}

The center position of the wave

position

{x: number, y: number}Default: {"x":0.5,"y":0.5}

The center position of the wave

thicknessnumber

Default:0.2

The thickness of the wave line

thickness

numberDefault: 0.2

The thickness of the wave line

softnessnumber

Default:0.4

Edge softness of the wave line

softness

numberDefault: 0.4

Edge softness of the wave line

Usage

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

<Shader>
  <SineWave
    color="#ffffff"
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'SineWave', props: { color: '#ffffff' } }
  ]
})

SimplexNoise

Solarize

Documentation

SineWave

Props

Usage