Skip to main content

Class: P5AsciifyRenderer2D<T>

Defined in: renderers/2d/AsciiRenderer2D.ts:20

ASCII renderer for custom 2D rendering.

Extends

Extended by

Type Parameters

Type ParameterDefault type
T extends AsciiRendererOptionsAsciiRendererOptions

Accessors

characterFramebuffer

Get Signature

get characterFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:583

Get the character framebuffer, whose pixels define the ASCII characters to use in the grid cells.

Pre-built ASCII renderers like 'brightness' write to this buffer automatically based on your settings. In 'custom2D' renderers, you must write to it manually in your draw() function.

Example
let characterFramebuffer;
let primaryColorFramebuffer;
let secondaryColorFramebuffer;

let asciifier;

function setup() {
createCanvas(400, 400, WEBGL);
}

function setupAsciify() {
// Get the asciifier instance
asciifier = p5asciify.asciifier();

// Enable the default custom renderer
asciifier.renderers().get("custom2D").enable();

// Assign the ascii renderer's framebuffers to a global variable
characterFramebuffer = asciifier
.renderers()
.get("custom2D").characterFramebuffer;
primaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").primaryColorFramebuffer;
secondaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").secondaryColorFramebuffer;
}

function draw() {
// Draw a rectangle with the character 'A' to the character framebuffer
characterFramebuffer.begin();
clear();
asciifier.fill("A");
rect(0, 0, 100, 100);
characterFramebuffer.end();

// Makes all ascii characters on the grid white.
primaryColorFramebuffer.begin();
background(255);
primaryColorFramebuffer.end();

// Makes all cell background colors black.
secondaryColorFramebuffer.begin();
background(0);
secondaryColorFramebuffer.end();
}
Returns

Framebuffer

Inherited from

P5AsciifyRenderer.characterFramebuffer


framebufferOptions

Get Signature

get framebufferOptions(): object

Defined in: renderers/AsciiRenderer.ts:530

Get the framebuffer settings used to configure all internal framebuffers for the renderer.

Returns
NameTypeDescriptionDefined in
antialias?booleanWhether to perform anti-aliasing. If set to true, 2 samples will be used by default. The number of samples can also be set (e.g., 4). Default is false.renderers/AsciiRenderer.ts:53
channels?numberWhether to store RGB or RGBA color channels. Default is to match the main canvas, which is RGBA.renderers/AsciiRenderer.ts:77
densitynumberThe pixel density of the framebuffers. Always fixed to 1, since they are used for offscreen rendering.renderers/AsciiRenderer.ts:62
depth?booleanWhether to include a depth buffer. Default is true.renderers/AsciiRenderer.ts:59
depthFormat?anyData format of depth information. Either UNSIGNED_INT or FLOAT. Default is UNSIGNED_INT.renderers/AsciiRenderer.ts:71
format?numberData format of the texture. Either UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. Default is UNSIGNED_BYTE.renderers/AsciiRenderer.ts:74
heightnumberHeight of the framebuffer. Always matches the grid rows.renderers/AsciiRenderer.ts:68
stencil?booleanWhether to include a stencil buffer for masking. depth must be true for this feature to work. Defaults to the value of depth (which is true).renderers/AsciiRenderer.ts:80
textureFiltering?anyHow to read values from the framebuffer. Either LINEAR (nearby pixels will be interpolated) or NEAREST (no interpolation). Default is NEAREST.renderers/AsciiRenderer.ts:56
widthnumberWidth of the framebuffer. Always matches the grid columns.renderers/AsciiRenderer.ts:65

Inherited from

P5AsciifyRenderer.framebufferOptions


options

Get Signature

get options(): T

Defined in: renderers/AsciiRenderer.ts:290

Get the set options for the ASCII renderer.

Example
function setupAsciify() {
// Get the brightness renderer options
const brightnessOptions = p5asciify
.asciifier()
.renderers()
.get("brightness")
.options();
console.log(brightnessOptions);
}
Returns

T

Inherited from

P5AsciifyRenderer.options


primaryColorFramebuffer

Get Signature

get primaryColorFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:344

Get the primary color framebuffer, whose pixels define the character colors of the grid cells.

Pre-built ASCII renderers like 'brightness' write to this buffer automatically based on your settings. In 'custom2D' renderers, you must write to it manually in your draw() function.

Example
let characterFramebuffer;
let primaryColorFramebuffer;
let secondaryColorFramebuffer;

let asciifier;

function setup() {
createCanvas(400, 400, WEBGL);
}

function setupAsciify() {
// Get the asciifier instance
asciifier = p5asciify.asciifier();

// Enable the default custom renderer
asciifier.renderers().get("custom2D").enable();

// Assign the ascii renderer's framebuffers to a global variable
characterFramebuffer = asciifier
.renderers()
.get("custom2D").characterFramebuffer;
primaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").primaryColorFramebuffer;
secondaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").secondaryColorFramebuffer;
}

function draw() {
// Draw a rectangle with the character 'A' to the character framebuffer
characterFramebuffer.begin();
clear();
asciifier.fill("A");
rect(0, 0, 100, 100);
characterFramebuffer.end();

// Makes all ascii characters on the grid white.
primaryColorFramebuffer.begin();
background(255);
primaryColorFramebuffer.end();

// Makes all cell background colors black.
secondaryColorFramebuffer.begin();
background(0);
secondaryColorFramebuffer.end();
}
Returns

Framebuffer

Inherited from

P5AsciifyRenderer.primaryColorFramebuffer


rotationFramebuffer

Get Signature

get rotationFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:524

Get the rotation framebuffer, whose pixels define the rotation angle of each character in the grid.

Pre-built ASCII renderers like 'brightness' write to this buffer automatically based on your settings. In 'custom2D' renderers, you must write to it manually in your draw() function.

Example
let characterFramebuffer;
let primaryColorFramebuffer;
let secondaryColorFramebuffer;
let rotationFramebuffer;

let asciifier;

function setup() {
createCanvas(400, 400, WEBGL);
}

function setupAsciify() {
// Get the asciifier instance
asciifier = p5asciify.asciifier();

// Enable the default custom renderer
asciifier.renderers().get("custom2D").enable();

// Assign the ascii renderer's framebuffers to a global variable
characterFramebuffer = asciifier
.renderers()
.get("custom2D").characterFramebuffer;
primaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").primaryColorFramebuffer;
secondaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").secondaryColorFramebuffer;
rotationFramebuffer = asciifier
.renderers()
.get("custom2D").rotationFramebuffer;
}

function draw() {
// Draw a rectangle with the character 'A' to the character framebuffer
characterFramebuffer.begin();
clear();
asciifier.fill("A");
rect(0, 0, 100, 100);
characterFramebuffer.end();

// Makes all ascii characters on the grid white.
primaryColorFramebuffer.begin();
background(255);
primaryColorFramebuffer.end();

// Makes all cell background colors black.
secondaryColorFramebuffer.begin();
background(0);
secondaryColorFramebuffer.end();

// Rotates all characters in the grid by X degrees.
// Utilize the red color channel for the rotation angle.
rotationFramebuffer.begin();
background("rgb(25%, 0%, 0%)"); // 25% of 360 degrees = 90 degrees
rotationFramebuffer.end();
}
Returns

Framebuffer

Inherited from

P5AsciifyRenderer.rotationFramebuffer


secondaryColorFramebuffer

Get Signature

get secondaryColorFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:398

Get the secondary color framebuffer, whose pixels define the background colors of the grid cells.

Pre-built ASCII renderers like 'brightness' write to this buffer automatically based on your settings. In 'custom2D' renderers, you must write to it manually in your draw() function.

Example
let characterFramebuffer;
let primaryColorFramebuffer;
let secondaryColorFramebuffer;

let asciifier;

function setup() {
createCanvas(400, 400, WEBGL);
}

function setupAsciify() {
// Get the asciifier instance
asciifier = p5asciify.asciifier();

// Enable the default custom renderer
asciifier.renderers().get("custom2D").enable();

// Assign the ascii renderer's framebuffers to a global variable
characterFramebuffer = asciifier
.renderers()
.get("custom2D").characterFramebuffer;
primaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").primaryColorFramebuffer;
secondaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").secondaryColorFramebuffer;
}

function draw() {
// Draw a rectangle with the character 'A' to the character framebuffer
characterFramebuffer.begin();
clear();
asciifier.fill("A");
rect(0, 0, 100, 100);
characterFramebuffer.end();

// Makes all ascii characters on the grid white.
primaryColorFramebuffer.begin();
background(255);
primaryColorFramebuffer.end();

// Makes all cell background colors black.
secondaryColorFramebuffer.begin();
background(0);
secondaryColorFramebuffer.end();
}
Returns

Framebuffer

Inherited from

P5AsciifyRenderer.secondaryColorFramebuffer


transformFramebuffer

Get Signature

get transformFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:463

Get the transform framebuffer, where each pixels color channel defines a different transformation:

  • Red channel: Swap the character and background colors of the grid cells.
  • Green channel: Flip the ASCII characters horizontally.
  • Blue channel: Flip the ASCII characters vertically.

Pre-built ASCII renderers like 'brightness' write to this buffer automatically based on your settings. In 'custom2D' renderers, you must write to it manually in your draw() function.

Example
let characterFramebuffer;
let primaryColorFramebuffer;
let secondaryColorFramebuffer;
let transformFramebuffer;

let asciifier;

function setup() {
createCanvas(400, 400, WEBGL);
}

function setupAsciify() {
// Get the asciifier instance
asciifier = p5asciify.asciifier();

// Enable the default custom renderer
asciifier.renderers().get("custom2D").enable();

// Assign the ascii renderer's framebuffers to a global variable
characterFramebuffer = asciifier
.renderers()
.get("custom2D").characterFramebuffer;
primaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").primaryColorFramebuffer;
secondaryColorFramebuffer = asciifier
.renderers()
.get("custom2D").secondaryColorFramebuffer;
transformFramebuffer = asciifier
.renderers()
.get("custom2D").transformFramebuffer;
}

function draw() {
// Draw a rectangle with the character 'A' to the character framebuffer
characterFramebuffer.begin();
clear();
asciifier.fill("A");
rect(0, 0, 100, 100);
characterFramebuffer.end();

// Makes all ascii characters on the grid white.
primaryColorFramebuffer.begin();
background(255);
primaryColorFramebuffer.end();

// Makes all cell background colors black.
secondaryColorFramebuffer.begin();
background(0);
secondaryColorFramebuffer.end();

// Swap the character and background colors of all grid cells,
// and flip the ASCII characters horizontally.
transformFramebuffer.begin();
background(255, 255, 0);
transformFramebuffer.end();
}
Returns

Framebuffer

Inherited from

P5AsciifyRenderer.transformFramebuffer

Methods

disable()

disable(): this

Defined in: renderers/AsciiRenderer.ts:274

Disable the renderer.

Disabling the renderer will clear all framebuffers, and prevent the renderer from being executed in the rendering pipeline.

Returns

this

The new state of the renderer.

Example

function keyPressed() {
if (key === "d") {
// Disable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").disable();
} else if (key === "e") {
// Enable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").enable();
}
}

Inherited from

P5AsciifyRenderer.disable


enable()

enable(): this

Defined in: renderers/AsciiRenderer.ts:249

Enable the renderer.

Returns

this

The new state of the renderer.

Example

function keyPressed() {
if (key === "d") {
// Disable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").disable();
} else if (key === "e") {
// Enable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").enable();
}
}

Inherited from

P5AsciifyRenderer.enable


enabled()

enabled(enabled?): this

Defined in: renderers/AsciiRenderer.ts:198

Enable or disable the renderer.

Parameters

ParameterTypeDescription
enabled?booleanWhether to enable or disable the renderer.

Returns

this

The current/new state of the renderer.

Throws

If the provided enabled value is not a boolean.

Example

function keyPressed() {
if (key === "d") {
// Disable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").enabled(false);
} else if (key === "e") {
// Enable the brightness renderer
p5asciify.asciifier().renderers().get("brightness").enabled(true);
}
}

Inherited from

P5AsciifyRenderer.enabled


update()

update(newOptions): this

Defined in: renderers/AsciiRenderer.ts:160

Updates renderer options.

Parameters

ParameterTypeDescription
newOptionsTThe new options to update.

Returns

this

Example

function setupAsciify() {
// Update the brightness renderer options
p5asciify
.asciifier()
.renderers()
.get("brightness")
.update({
enabled: true,
characterColor: color(255, 0, 0),
backgroundColor: color(0, 0, 255),
characters: ".:-=+*#%@",
invert: true,
rotation: 90,
// ...
});
}

Inherited from

P5AsciifyRenderer.update