Class: SynthSource

A chainable synthesis source that accumulates transforms to be compiled into a shader.

This is the core class that enables hydra-like method chaining for generating procedural textmode visuals. Each method call adds a transform to the chain, which is later compiled into a GLSL shader.

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

const synth = noise(10)
  .rotate(0.2)
  .scroll(0.1, 0)
  .charColor(osc(5, 0.1, 1.2).kaleid(4))
  .cellColor(osc(5, 0.1, 1.2).kaleid(4).invert())
  .charMap('@#%*+=-:. ');

t.layers.base.synth(synth);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Extends

ISynthSource

Methods

osc()

osc(
   frequency?, 
   sync?, 
   offset?): this;

Generate oscillating patterns using sine waves.

Parameters

Parameter	Type	Description
`frequency?`	`SynthParameterValue`	Frequency of the oscillation (default: 60.0)
`sync?`	`SynthParameterValue`	Synchronization offset (default: 0.1)
`offset?`	`SynthParameterValue`	Phase offset (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .kaleid(5)
    .color(0.9, 0.2, 1.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.osc

noise()

noise(scale?, speed?): this;

Generate Perlin noise patterns.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Scale of the noise pattern (default: 10.0)
`speed?`	`SynthParameterValue`	Animation speed (default: 0.1)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(10, 0.1)
    .color(0.2, 0.6, 1.0)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.noise

plasma()

plasma(
   scale?, 
   speed?, 
   phase?, 
   contrast?): this;

Generate plasma-like sine field patterns.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Spatial scale of the plasma (default: 10.0)
`speed?`	`SynthParameterValue`	Animation speed (default: 0.5)
`phase?`	`SynthParameterValue`	Phase offset (default: 0.0)
`contrast?`	`SynthParameterValue`	Contrast adjustment (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  plasma(8, 0.6, 0.2, 1.3)
    .kaleid(4)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.plasma

moire()

moire(
   freqA?, 
   freqB?, 
   angleA?, 
   angleB?, 
   speed?, 
   phase?): this;

Generate moire interference patterns.

Parameters

Parameter	Type	Description
`freqA?`	`SynthParameterValue`	Frequency of first grating (default: 20.0)
`freqB?`	`SynthParameterValue`	Frequency of second grating (default: 21.0)
`angleA?`	`SynthParameterValue`	Angle of first grating in radians (default: 0.0)
`angleB?`	`SynthParameterValue`	Angle of second grating in radians (default: 1.5708)
`speed?`	`SynthParameterValue`	Animation speed (default: 0.1)
`phase?`	`SynthParameterValue`	Phase offset (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  moire(14, 15, 0.2, 1.2, 0.2, 0.1)
    .color(0.7, 0.5, 1.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.moire

voronoi()

voronoi(
   scale?, 
   speed?, 
   blending?): this;

Generate voronoi patterns.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Scale of voronoi cells (default: 5.0)
`speed?`	`SynthParameterValue`	Animation speed (default: 0.3)
`blending?`	`SynthParameterValue`	Blending between cell regions (default: 0.3)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  voronoi(6, 0.4, 0.2)
    .color(0.8, 0.4, 1.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.voronoi

gradient()

gradient(speed?): this;

Generate a rotating radial gradient.

Parameters

Parameter	Type	Description
`speed?`	`SynthParameterValue`	Rotation speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .kaleid(5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.gradient

shape()

shape(
   sides?, 
   radius?, 
   smoothing?): this;

Generate geometric shapes (polygons).

Parameters

Parameter	Type	Description
`sides?`	`SynthParameterValue`	Number of sides (default: 3)
`radius?`	`SynthParameterValue`	Radius of the shape (default: 0.3)
`smoothing?`	`SynthParameterValue`	Edge smoothing amount (default: 0.01)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(6, 0.35, 0.02)
    .rotate(() => t.secs)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.shape

solid()

Call Signature

solid(gray): this;

Generate a solid grayscale color.

Parameters

Parameter	Type	Description
`gray`	`SynthParameterValue`	Grayscale value (0-1)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  solid(0.4)
    .char(osc(6, 0.1, 1.2))
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.solid

Call Signature

solid(
   r?, 
   g?, 
   b?, 
   a?): this;

Generate a solid color.

Parameters

Parameter	Type	Description
`r?`	`SynthParameterValue`	Red channel (0-1, default: 0.0)
`g?`	`SynthParameterValue`	Green channel (0-1, default: 0.0)
`b?`	`SynthParameterValue`	Blue channel (0-1, default: 0.0)
`a?`	`SynthParameterValue`	Alpha channel (0-1, default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  solid(0.1, 0.2, 0.5, 1)
    .char(noise(8))
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.solid

src()

src(layer?): this;

Sample the previous frame for feedback effects, or sample from another layer.

Self-feedback (no argument): src() samples the current layer's previous frame. The sampled texture is context-aware based on where it's used in the synth chain:

Inside char(...) → samples previous frame's character data
Inside charColor(...) → samples previous frame's primary color (character foreground)
Inside cellColor(...) → samples previous frame's cell color (character background)
Outside all three → samples previous frame's primary color

Cross-layer sampling (with layer argument): src(layer) samples from another layer's output, enabling hydra-style multi-output compositions. The sampled texture is still context-aware based on the current compilation target.

This is the core of feedback loops and multi-layer compositions - enabling effects like trails, motion blur, recursive patterns, and complex layered visuals. Equivalent to hydra's src(o0).

Parameters

Parameter	Type	Description
`layer?`	`TextmodeLayer`	Optional TextmodeLayer to sample from. If omitted, samples from self (feedback).

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  src()
    .scale(1.01)
    .blend(osc(6, 0.1, 1.2), 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.src

rotate()

rotate(angle?, speed?): this;

Rotate coordinates.

Parameters

Parameter	Type	Description
`angle?`	`SynthParameterValue`	Rotation angle in radians (default: 10.0)
`speed?`	`SynthParameterValue`	Rotation speed multiplier (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .rotate(0.4, 0.1)
    .kaleid(5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.rotate

scale()

scale(
   amount?, 
   xMult?, 
   yMult?, 
   offsetX?, 
   offsetY?): this;

Scale coordinates.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Scale amount (default: 1.5)
`xMult?`	`SynthParameterValue`	X axis multiplier (default: 1.0)
`yMult?`	`SynthParameterValue`	Y axis multiplier (default: 1.0)
`offsetX?`	`SynthParameterValue`	X offset (default: 0.5)
`offsetY?`	`SynthParameterValue`	Y offset (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.35)
    .scale(1.6, 1.2, 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.scale

scroll()

scroll(
   scrollX?, 
   scrollY?, 
   speedX?, 
   speedY?): this;

Scroll coordinates in both X and Y directions.

Parameters

Parameter	Type	Description
`scrollX?`	`SynthParameterValue`	X scroll amount (default: 0.5)
`scrollY?`	`SynthParameterValue`	Y scroll amount (default: 0.5)
`speedX?`	`SynthParameterValue`	X scroll speed (default: 0.0)
`speedY?`	`SynthParameterValue`	Y scroll speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(6, 0.1)
    .scroll(0.2, -0.1, 0.05, 0.02)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.scroll

scrollX()

scrollX(scrollX?, speed?): this;

Scroll coordinates in X direction.

Parameters

Parameter	Type	Description
`scrollX?`	`SynthParameterValue`	X scroll amount (default: 0.5)
`speed?`	`SynthParameterValue`	Scroll speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .scrollX(0.3, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.scrollX

scrollY()

scrollY(scrollY?, speed?): this;

Scroll coordinates in Y direction.

Parameters

Parameter	Type	Description
`scrollY?`	`SynthParameterValue`	Y scroll amount (default: 0.5)
`speed?`	`SynthParameterValue`	Scroll speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .rotate(0.5)
    .scrollY(-0.3, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.scrollY

pixelate()

pixelate(pixelX?, pixelY?): this;

Pixelate the output.

Parameters

Parameter	Type	Description
`pixelX?`	`SynthParameterValue`	Pixel size in X (default: 20.0)
`pixelY?`	`SynthParameterValue`	Pixel size in Y (default: 20.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(8, 0.1)
    .pixelate(12, 8)
    .color(0.9, 0.6, 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.pixelate

repeat()

repeat(
   repeatX?, 
   repeatY?, 
   offsetX?, 
   offsetY?): this;

Repeat coordinates in both X and Y directions.

Parameters

Parameter	Type	Description
`repeatX?`	`SynthParameterValue`	Number of X repetitions (default: 3.0)
`repeatY?`	`SynthParameterValue`	Number of Y repetitions (default: 3.0)
`offsetX?`	`SynthParameterValue`	X offset between repetitions (default: 0.0)
`offsetY?`	`SynthParameterValue`	Y offset between repetitions (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .repeat(4, 3, 0.1, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.repeat

repeatX()

repeatX(reps?, offset?): this;

Repeat coordinates in X direction.

Parameters

Parameter	Type	Description
`reps?`	`SynthParameterValue`	Number of repetitions (default: 3.0)
`offset?`	`SynthParameterValue`	Offset between repetitions (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .repeatX(6, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.repeatX

repeatY()

repeatY(reps?, offset?): this;

Repeat coordinates in Y direction.

Parameters

Parameter	Type	Description
`reps?`	`SynthParameterValue`	Number of repetitions (default: 3.0)
`offset?`	`SynthParameterValue`	Offset between repetitions (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .repeatY(6, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.repeatY

kaleid()

kaleid(nSides?): this;

Apply kaleidoscope effect.

Parameters

Parameter	Type	Description
`nSides?`	`SynthParameterValue`	Number of kaleidoscope sides (default: 4.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .kaleid(7)
    .color(0.9, 0.2, 1.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.kaleid

polar()

polar(angle?, radius?): this;

Convert coordinates to polar space.

Parameters

Parameter	Type	Description
`angle?`	`SynthParameterValue`	Angle offset in radians (default: 0.0)
`radius?`	`SynthParameterValue`	Radius multiplier (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .polar(0.2, 1.2)
    .kaleid(5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.polar

twirl()

twirl(
   amount?, 
   radius?, 
   centerX?, 
   centerY?): this;

Twirl distortion with radial falloff.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Twirl strength (default: 2.0)
`radius?`	`SynthParameterValue`	Effect radius (default: 0.5)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(5, 0.35)
    .twirl(1.5, 0.4)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.twirl

swirl()

swirl(
   amount?, 
   centerX?, 
   centerY?): this;

Swirl distortion around a center.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Swirl strength (default: 4.0)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(4, 0.1)
    .swirl(3, 0.5, 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.swirl

mirror()

mirror(mirrorX?, mirrorY?): this;

Mirror coordinates across X and/or Y axes.

Parameters

Parameter	Type	Description
`mirrorX?`	`SynthParameterValue`	Mirror X (0-1, default: 1.0)
`mirrorY?`	`SynthParameterValue`	Mirror Y (0-1, default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .mirror(1, 0)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.mirror

shear()

shear(
   x?, 
   y?, 
   centerX?, 
   centerY?): this;

Shear coordinates along X and Y axes.

Parameters

Parameter	Type	Description
`x?`	`SynthParameterValue`	X shear amount (default: 0.0)
`y?`	`SynthParameterValue`	Y shear amount (default: 0.0)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.3)
    .shear(0.2, -0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.shear

barrel()

barrel(
   amount?, 
   centerX?, 
   centerY?): this;

Barrel distortion (bulge outward).

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Distortion amount (default: 0.5)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .barrel(0.6)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.barrel

pinch()

pinch(
   amount?, 
   centerX?, 
   centerY?): this;

Pinch distortion (pull inward).

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Distortion amount (default: 0.5)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .pinch(0.6)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.pinch

fisheye()

fisheye(
   amount?, 
   centerX?, 
   centerY?): this;

Fisheye lens distortion.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Distortion amount (default: 1.0)
`centerX?`	`SynthParameterValue`	Center X (default: 0.5)
`centerY?`	`SynthParameterValue`	Center Y (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .fisheye(0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.fisheye

brightness()

brightness(amount?): this;

Adjust brightness.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Brightness adjustment amount (default: 0.4)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .brightness(0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.brightness

contrast()

contrast(amount?): this;

Adjust contrast.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Contrast amount (default: 1.6)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .contrast(1.6)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.contrast

invert()

invert(amount?): this;

Invert colors.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Inversion amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.35)
    .invert(1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.invert

saturate()

saturate(amount?): this;

Adjust color saturation.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Saturation amount (default: 2.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .saturate(2.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.saturate

hue()

hue(hue?): this;

Shift hue.

Parameters

Parameter	Type	Description
`hue?`	`SynthParameterValue`	Hue shift amount (default: 0.4)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .hue(0.3)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.hue

colorama()

colorama(amount?): this;

Apply colorama effect (hue rotation based on luminance).

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Effect amount (default: 0.005)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(4, 0.1)
    .colorama(0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.colorama

posterize()

posterize(bins?, gamma?): this;

Posterize colors to limited palette.

Parameters

Parameter	Type	Description
`bins?`	`SynthParameterValue`	Number of color bins (default: 3.0)
`gamma?`	`SynthParameterValue`	Gamma correction (default: 0.6)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .posterize(4, 0.7)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.posterize

luma()

luma(threshold?, tolerance?): this;

Apply threshold based on luminance.

Parameters

Parameter	Type	Description
`threshold?`	`SynthParameterValue`	Threshold value (default: 0.5)
`tolerance?`	`SynthParameterValue`	Tolerance range (default: 0.1)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(10, 0.1, 1.2)
    .luma(0.5, 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.luma

thresh()

thresh(threshold?, tolerance?): this;

Apply hard threshold.

Parameters

Parameter	Type	Description
`threshold?`	`SynthParameterValue`	Threshold value (default: 0.5)
`tolerance?`	`SynthParameterValue`	Tolerance range (default: 0.04)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(6, 0.1)
    .thresh(0.4, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.thresh

color()

Call Signature

color(gray): this;

Multiply all channels by a scalar value (grayscale).

Parameters

Parameter	Type	Description
`gray`	`SynthParameterValue`	Scalar multiplier

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .color(0.6)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.color

Call Signature

color(
   r?, 
   g?, 
   b?, 
   a?): this;

Colorize a grayscale source or multiply an existing color source.

This is the recommended way to add color to grayscale sources like osc(), noise(), or voronoi().

Parameters

Parameter	Type	Description
`r?`	`SynthParameterValue`	Red channel multiplier (default: 1.0)
`g?`	`SynthParameterValue`	Green channel multiplier (default: 1.0)
`b?`	`SynthParameterValue`	Blue channel multiplier (default: 1.0)
`a?`	`SynthParameterValue`	Alpha channel multiplier (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(10, 0.1, 1.2)
    .color(0.2, 0.6, 1.0)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.color

r()

r(scale?, offset?): this;

Extract the red channel as a grayscale value.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Scale multiplier (default: 1.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .hue(0.4)
    .r(1.2, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.r

g()

g(scale?, offset?): this;

Extract the green channel as a grayscale value.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Scale multiplier (default: 1.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .g(1.2, 0.1)
    .kaleid(5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.g

b()

b(scale?, offset?): this;

Extract the blue channel as a grayscale value.

Parameters

Parameter	Type	Description
`scale?`	`SynthParameterValue`	Scale multiplier (default: 1.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .colorama(0.2)
    .b(1.2, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.b

shift()

shift(
   r?, 
   g?, 
   b?, 
   a?): this;

Shift color channels by adding offset values.

Parameters

Parameter	Type	Description
`r?`	`SynthParameterValue`	Red channel shift (default: 0.5)
`g?`	`SynthParameterValue`	Green channel shift (default: 0.0)
`b?`	`SynthParameterValue`	Blue channel shift (default: 0.0)
`a?`	`SynthParameterValue`	Alpha channel shift (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .shift(0.2, -0.1, 0.1, 0)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.shift

gamma()

gamma(amount?): this;

Apply gamma correction for nonlinear brightness control.

Parameters

Parameter	Type	Description
`amount?`	`SynthParameterValue`	Gamma value (default: 1.0, < 1.0 brightens, > 1.0 darkens)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(8, 0.1, 1.2)
    .gamma(1.4)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.gamma

levels()

levels(
   inMin?, 
   inMax?, 
   outMin?, 
   outMax?, 
   gamma?): this;

Adjust input/output levels and gamma for precise tonal control.

Parameters

Parameter	Type	Description
`inMin?`	`SynthParameterValue`	Input minimum (default: 0.0)
`inMax?`	`SynthParameterValue`	Input maximum (default: 1.0)
`outMin?`	`SynthParameterValue`	Output minimum (default: 0.0)
`outMax?`	`SynthParameterValue`	Output maximum (default: 1.0)
`gamma?`	`SynthParameterValue`	Gamma correction (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(8, 0.1)
    .levels(0.1, 0.9, 0.0, 1.0, 1.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.levels

clamp()

clamp(min?, max?): this;

Clamp color values to a specified range for stability.

Parameters

Parameter	Type	Description
`min?`	`SynthParameterValue`	Minimum value (default: 0.0)
`max?`	`SynthParameterValue`	Maximum value (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .add(osc(12, 0.1, 0.5), 0.6)
    .clamp(0.2, 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.clamp

seed()

seed(value): this;

Set a seed for deterministic randomness in this source chain.

When set, noise-based functions (noise, voronoi) will produce reproducible patterns. Different seeds produce different patterns.

Parameters

Parameter	Type	Description
`value`	`SynthParameterValue`	Seed value (any number)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(10, 0.1)
    .seed(42)
    .charMap('@#%*+=-:. ')
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.seed

add()

add(source, amount?): this;

Add another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to add
`amount?`	`SynthParameterValue`	Blend amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(3, 0.3)
    .add(shape(4, 0.25).rotate(0.3), 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.add

sub()

sub(source, amount?): this;

Subtract another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to subtract
`amount?`	`SynthParameterValue`	Blend amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(100, 0.5)
    .sub(shape(100, 0.3), 1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.sub

mult()

mult(source, amount?): this;

Multiply with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to multiply
`amount?`	`SynthParameterValue`	Blend amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.4)
    .mult(noise(10, 0.1), 0.8)
    .color(1, 0.5, 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.mult

blend()

blend(source, amount?): this;

Blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to blend
`amount?`	`SynthParameterValue`	Blend amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(3, 0.3)
    .blend(shape(4, 0.4), 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.blend

diff()

diff(source): this;

Difference with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to compare

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .diff(osc(12, 0.2, 0.4))
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.diff

layer()

layer(source): this;

Layer another source on top.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to layer

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .layer(osc(12, 0.2, 0.4).rotate(0.5), 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.layer

mask()

mask(source): this;

Mask using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to use as mask

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  gradient(0.2)
    .mask(voronoi(6, 0.4, 0.2))
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.mask

screen()

screen(source, amount?): this;

Screen blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to screen
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .screen(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.screen

overlay()

overlay(source, amount?): this;

Overlay blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to overlay
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .overlay(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.overlay

softlight()

softlight(source, amount?): this;

Soft light blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to softlight
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .softlight(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.softlight

hardlight()

hardlight(source, amount?): this;

Hard light blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to hardlight
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .hardlight(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.hardlight

dodge()

dodge(source, amount?): this;

Color dodge blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to dodge
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .dodge(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.dodge

burn()

burn(source, amount?): this;

Color burn blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to burn
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .burn(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.burn

lighten()

lighten(source, amount?): this;

Lighten blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to lighten
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .lighten(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.lighten

darken()

darken(source, amount?): this;

Darken blend with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Source to darken
`amount?`	`SynthParameterValue`	Blend amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .darken(osc(12, 0.2, 0.4), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.darken

modulate()

modulate(source, amount?): this;

Modulate coordinates using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`amount?`	`SynthParameterValue`	Modulation amount (default: 0.1)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .modulate(noise(3, 0.1), 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulate

modulateScale()

modulateScale(
   source, 
   multiple?, 
   offset?): this;

Modulate scale using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`multiple?`	`SynthParameterValue`	Scale multiplier (default: 1.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.35)
    .modulateScale(osc(6, 0.1, 1.2), 1.5, 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateScale

modulateRotate()

modulateRotate(
   source, 
   multiple?, 
   offset?): this;

Modulate rotation using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`multiple?`	`SynthParameterValue`	Rotation multiplier (default: 1.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.35)
    .modulateRotate(noise(2, 0.1), 0.5, 0)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateRotate

modulatePixelate()

modulatePixelate(
   source, 
   multiple?, 
   offset?): this;

Modulate pixelation using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`multiple?`	`SynthParameterValue`	Pixelation multiplier (default: 10.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 3.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  noise(4, 0.1)
    .modulatePixelate(osc(8, 0.1, 1.2), 20, 5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulatePixelate

modulateKaleid()

modulateKaleid(source, nSides?): this;

Modulate kaleidoscope using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`nSides?`	`SynthParameterValue`	Number of sides (default: 4.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .modulateKaleid(osc(12, 0.2, 0.4), 7)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateKaleid

modulateScrollX()

modulateScrollX(
   source, 
   scrollX?, 
   speed?): this;

Modulate X scroll using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`scrollX?`	`SynthParameterValue`	X scroll amount (default: 0.5)
`speed?`	`SynthParameterValue`	Scroll speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .modulateScrollX(noise(3, 0.1), 0.5, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateScrollX

modulateScrollY()

modulateScrollY(
   source, 
   scrollY?, 
   speed?): this;

Modulate Y scroll using another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`scrollY?`	`SynthParameterValue`	Y scroll amount (default: 0.5)
`speed?`	`SynthParameterValue`	Scroll speed (default: 0.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  osc(6, 0.1, 1.2)
    .modulateScrollY(noise(3, 0.1), 0.5, 0.1)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateScrollY

modulateRepeat()

modulateRepeat(
   source, 
   repeatX?, 
   repeatY?, 
   offsetX?, 
   offsetY?): this;

Modulate repeat pattern with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`repeatX?`	`SynthParameterValue`	X repetitions (default: 3.0)
`repeatY?`	`SynthParameterValue`	Y repetitions (default: 3.0)
`offsetX?`	`SynthParameterValue`	X offset (default: 0.5)
`offsetY?`	`SynthParameterValue`	Y offset (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .modulateRepeat(osc(6, 0.1, 1.2), 3, 3, 0.2, 0.2)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateRepeat

modulateRepeatX()

modulateRepeatX(
   source, 
   reps?, 
   offset?): this;

Modulate X repeat with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`reps?`	`SynthParameterValue`	Number of repetitions (default: 3.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .modulateRepeatX(noise(3, 0.1), 3, 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateRepeatX

modulateRepeatY()

modulateRepeatY(
   source, 
   reps?, 
   offset?): this;

Modulate Y repeat with another source.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`reps?`	`SynthParameterValue`	Number of repetitions (default: 3.0)
`offset?`	`SynthParameterValue`	Offset amount (default: 0.5)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  shape(4, 0.25)
    .modulateRepeatY(noise(3, 0.1), 3, 0.5)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateRepeatY

modulateHue()

modulateHue(source, amount?): this;

Modulate coordinates based on hue differences.

Parameters

Parameter	Type	Description
`source`	\| `SynthParameterValue` \| `ISynthSource`	Modulation source
`amount?`	`SynthParameterValue`	Modulation amount (default: 1.0)

Returns

this

Example

javascript

const t = textmode.create({
  width: window.innerWidth,
  height: window.innerHeight,
  plugins: [SynthPlugin]
});

t.layers.base.synth(
  src()
    .modulateHue(src().scale(1.01), 0.8)
);

t.windowResized(() => {
  t.resizeCanvas(window.innerWidth, window.innerHeight);
});

Inherited from

ISynthSource.modulateHue

charMap()

charMap(chars): this;

Parameters

Parameter	Type
`chars`	`string`

Returns

this

Inherited from

ISynthSource.charMap

charColor()

charColor(
   rOrSource, 
   g?, 
   b?, 
   a?): this;

Parameters

Parameter	Type
`rOrSource`	\| `SynthParameterValue` \| `ISynthSource`
`g?`	`SynthParameterValue`
`b?`	`SynthParameterValue`
`a?`	`SynthParameterValue`

Returns

this

Inherited from

ISynthSource.charColor

char()

char(source): this;

Parameters

Parameter	Type
`source`	`SynthSource`

Returns

this

Inherited from

ISynthSource.char

cellColor()

cellColor(
   rOrSource, 
   g?, 
   b?, 
   a?): this;

Parameters

Parameter	Type
`rOrSource`	\| `SynthParameterValue` \| `ISynthSource`
`g?`	`SynthParameterValue`
`b?`	`SynthParameterValue`
`a?`	`SynthParameterValue`

Returns

this

Inherited from

ISynthSource.cellColor

paint()

paint(
   rOrSource, 
   g?, 
   b?, 
   a?): this;

Parameters

Parameter	Type
`rOrSource`	\| `SynthParameterValue` \| `ISynthSource`
`g?`	`SynthParameterValue`
`b?`	`SynthParameterValue`
`a?`	`SynthParameterValue`

Returns

this

Inherited from

ISynthSource.paint

clone()

clone(): SynthSource;

Returns

SynthSource

Inherited from

ISynthSource.clone

conversion

Classes

Interfaces

Type Aliases

filters

Classes

Interfaces

Type Aliases

input

Namespaces

keyboard

mouse

touch

layering

Classes

Interfaces

Type Aliases

loadables

Classes

Type Aliases

loading

Classes

Interfaces

plugins

Interfaces

Type Aliases

Quick Actions

Class: SynthSource ​

Example ​

Extends ​

Methods ​

osc() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

noise() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

plasma() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

moire() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

voronoi() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

gradient() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

shape() ​

Parameters ​

Returns ​

Example ​

Inherited from ​

solid() ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Inherited from ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Inherited from ​

src() ​

Parameters ​

Returns ​

Class: SynthSource

Example

Extends

Methods

osc()

Parameters

Returns

Example

Inherited from

noise()

Parameters

Returns

Example

Inherited from

plasma()

Parameters

Returns

Example

Inherited from

moire()

Parameters

Returns

Example

Inherited from

voronoi()

Parameters

Returns

Example

Inherited from

gradient()

Parameters

Returns

Example

Inherited from

shape()

Parameters

Returns

Example

Inherited from

solid()

Call Signature

Parameters

Returns

Example

Inherited from

Call Signature

Parameters

Returns

Example

Inherited from

src()

Parameters

Returns

Example

Inherited from

rotate()

Parameters

Returns

Example

Inherited from

scale()

Parameters

Returns

Example

Inherited from

scroll()

Parameters

Returns

Example

Inherited from

scrollX()

Parameters

Returns

Example

Inherited from

scrollY()

Parameters

Returns

Example

Inherited from