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);
});

Methods

charMap()

charMap(chars): this;

Map character indices to a specific character set. This is the primary textmode-native way to define which characters to use.

Parameters

Parameter	Type	Description
`chars`	`string`	A string of characters to map indices to

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(char(noise(8)).charMap('@#%*+=-:. ').charColor(osc(6, 0.1, 1.2)));

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

charColor()

Call Signature

charColor(source): this;

Set the character foreground color using a color source chain.

Parameters

Parameter	Type	Description
`source`	`SynthSource`	A SynthSource producing color values, or RGBA values

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).charColor(osc(6, 0.1, 1.2).kaleid(4)));

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

Call Signature

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

Set the character foreground color using RGBA values.

Parameters

Parameter	Type	Description
`r`	`SynthParameterValue`	Red channel (0-1) or value
`g?`	`SynthParameterValue`	Green channel (0-1) or value
`b?`	`SynthParameterValue`	Blue channel (0-1) or value
`a?`	`SynthParameterValue`	Alpha channel (0-1) or value

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).charColor(1, 0.2, 0.1, 1));

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

Call Signature

charColor(gray): this;

Set the character foreground color using a grayscale value.

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(noise(8).charColor(0.9));

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

char()

char(source): this;

Set the character indices using a character source chain. The number of characters is determined by charMap() if defined, otherwise falls back to the total characters in the layer's font.

Parameters

Parameter	Type	Description
`source`	`SynthSource`	A synth source producing character indices

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(
	char(osc(6, 0.1, 1.2)).charMap('@#%*+=-:. ').charColor(osc(12, 0.05, 0.2)),
);

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

cellColor()

Call Signature

cellColor(source): this;

Set the cell background colors using a color source chain.

Parameters

Parameter	Type	Description
`source`	`SynthSource`	A SynthSource producing color values, or RGBA values

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).cellColor(osc(6, 0.1, 1.2).invert()));

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

Call Signature

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

Set the cell background color using RGBA values.

Parameters

Parameter	Type	Description
`r`	`SynthParameterValue`	Red channel (0-1) or value
`g?`	`SynthParameterValue`	Green channel (0-1) or value
`b?`	`SynthParameterValue`	Blue channel (0-1) or value
`a?`	`SynthParameterValue`	Alpha channel (0-1) or value

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).cellColor(0.05, 0.08, 0.1, 0.8));

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

Call Signature

cellColor(gray): this;

Set the cell background color using a grayscale value.

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(noise(8).cellColor(0.2));

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

paint()

Call Signature

paint(source): this;

Set both character foreground and cell background color using the same source chain. This is a convenience method that combines .charColor() and .cellColor() in one call.

After calling paint(), you can still override the cell color separately using .cellColor().

Otherwise useful for pixel art styles where both colors are the same, making the characters redundant.

Parameters

Parameter	Type	Description
`source`	`SynthSource`	A SynthSource producing color values

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).paint(osc(6, 0.1, 1.2).kaleid(4)));

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

Call Signature

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

Set both character foreground and cell background color using RGBA values.

Parameters

Parameter	Type	Description
`r`	`SynthParameterValue`	Red channel (0-1) or value
`g?`	`SynthParameterValue`	Green channel (0-1) or value
`b?`	`SynthParameterValue`	Blue channel (0-1) or value
`a?`	`SynthParameterValue`	Alpha channel (0-1) or value

Returns

this

The SynthSource for chaining

Example

javascript

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

t.layers.base.synth(noise(8).paint(0.9, 0.8, 0.7));

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

Call Signature

paint(gray): this;

Set both character foreground and cell background color using a grayscale value.

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(noise(8).paint(0.3));

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

clone()

clone(): SynthSource;

Create a deep clone of this SynthSource. Useful when you want to create a modified version of an existing chain without affecting the original.

Returns

SynthSource

A new SynthSource with the same transform chain

Example

javascript

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

const base = osc(6, 0.1, 1.2).kaleid(4);

t.layers.base.synth(noise(8).charColor(base).cellColor(base.clone().invert()));

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

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

add()

add(source, amount?): this;

Add another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

sub()

sub(source, amount?): this;

Subtract another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

mult()

mult(source, amount?): this;

Multiply with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

blend()

blend(source, amount?): this;

Blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

diff()

diff(source): this;

Difference with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

layer()

layer(source): this;

Layer another source on top.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

mask()

mask(source): this;

Mask using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

screen()

screen(source, amount?): this;

Screen blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

overlay()

overlay(source, amount?): this;

Overlay blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

softlight()

softlight(source, amount?): this;

Soft light blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

hardlight()

hardlight(source, amount?): this;

Hard light blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

dodge()

dodge(source, amount?): this;

Color dodge blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

burn()

burn(source, amount?): this;

Color burn blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

lighten()

lighten(source, amount?): this;

Lighten blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

darken()

darken(source, amount?): this;

Darken blend with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulate()

modulate(source, amount?): this;

Modulate coordinates using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateScale()

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

Modulate scale using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateRotate()

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

Modulate rotation using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulatePixelate()

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

Modulate pixelation using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateKaleid()

modulateKaleid(source, nSides?): this;

Modulate kaleidoscope using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateScrollX()

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

Modulate X scroll using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateScrollY()

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

Modulate Y scroll using another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateRepeat()

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

Modulate repeat pattern with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateRepeatX()

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

Modulate X repeat with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateRepeatY()

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

Modulate Y repeat with another source.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

modulateHue()

modulateHue(source, amount?): this;

Modulate coordinates based on hue differences.

Parameters

Parameter	Type	Description
`source`	`SynthParameterValue`	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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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.4).kaleid(4));

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

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

src()

src(): this;

Sample the previous frame for feedback effects.

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

This is the core of feedback loops - enabling effects like trails, motion blur, and recursive patterns. Equivalent to hydra's src(o0) (self-reference).

To sample from another layer, use the top-level src(layer) function instead.

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);
});

conversion

Classes

Interfaces

Type Aliases

errors

Enumerations

Classes

Interfaces

filters

Classes

Interfaces

Type Aliases

fonts

Classes

Interfaces

Type Aliases

input

Namespaces

gamepad

keyboard

mouse

touch

Type Aliases

Variables

layering

Classes

Interfaces

Variables

loading

Classes

Interfaces

Type Aliases

media

Classes

plugins

Interfaces

Type Aliases

Quick Actions

Class: SynthSource ​

Example ​

Methods ​

charMap() ​

Parameters ​

Returns ​

Example ​

charColor() ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Call Signature ​

Parameters ​

Returns ​

Example ​

char() ​

Parameters ​

Returns ​

Example ​

cellColor() ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Call Signature ​

Parameters ​

Returns ​

Example ​

paint() ​

Call Signature ​

Parameters ​

Returns ​

Example ​

Class: SynthSource

Example

Methods

charMap()

Parameters

Returns

Example

charColor()

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

char()

Parameters

Returns

Example

cellColor()

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

paint()

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

Call Signature

Parameters

Returns

Example

clone()

Returns

Example

brightness()

Parameters

Returns

Example

contrast()

Parameters

Returns

Example

invert()

Parameters

Returns

Example

saturate()

Parameters

Returns

Example

hue()

Parameters

Returns

Example

colorama()

Parameters

Returns

Example

posterize()

Parameters

Returns