Skip to main content

Class: abstract P5AsciifyRenderer<T>

Defined in: renderers/AsciiRenderer.ts:11

Abstract ASCII renderer base class that all custom and pre-built ASCII renderers extend from.

Extended by

Type Parameters

Type ParameterDefault type
T extends AsciiRendererOptionsAsciiRendererOptions

Accessors

characterFramebuffer

Get Signature

get characterFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:619

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


framebufferOptions

Get Signature

get framebufferOptions(): object

Defined in: renderers/AsciiRenderer.ts:566

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

options

Get Signature

get options(): T

Defined in: renderers/AsciiRenderer.ts:326

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


primaryColorFramebuffer

Get Signature

get primaryColorFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:380

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


rotationFramebuffer

Get Signature

get rotationFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:560

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


secondaryColorFramebuffer

Get Signature

get secondaryColorFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:434

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


transformFramebuffer

Get Signature

get transformFramebuffer(): Framebuffer

Defined in: renderers/AsciiRenderer.ts:499

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

Methods

disable()

disable(): boolean

Defined in: renderers/AsciiRenderer.ts:310

Disable the renderer.

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

Returns

boolean

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

enable()

enable(): boolean

Defined in: renderers/AsciiRenderer.ts:285

Enable the renderer.

Returns

boolean

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

enabled()

enabled(enabled?): boolean

Defined in: renderers/AsciiRenderer.ts:234

Enable or disable the renderer.

Parameters

ParameterTypeDescription
enabled?booleanWhether to enable or disable the renderer.

Returns

boolean

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

setFramebufferOptions()

setFramebufferOptions(settings): void

Defined in: renderers/AsciiRenderer.ts:146

Update framebuffer settings (except width/height/density) and recreate all framebuffers.

This method allows you to configure the internal framebuffers used by the renderer. Note that width, height, and density are managed internally and cannot be modified.

For a full list of available settings, see the p5.createFramebuffer() documentation: https://p5js.org/reference/p5/createFramebuffer/

Parameters

ParameterTypeDescription
settings{ antialias?: boolean; channels?: number; depth?: boolean; depthFormat?: number; format?: number; stencil?: boolean; textureFiltering?: number; }Available framebuffer settings. width, height, and density are managed internally and cannot be modified.
settings.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.
settings.channels?numberWhether to store RGB or RGBA color channels. Default is to match the main canvas which is RGBA.
settings.depth?booleanWhether to include a depth buffer. Default is true.
settings.depthFormat?numberData format of depth information, either UNSIGNED_INT or FLOAT. Default is UNSIGNED_INT.
settings.format?numberData format of the texture, either UNSIGNED_BYTE, FLOAT, or HALF_FLOAT. Default is UNSIGNED_BYTE.
settings.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.
settings.textureFiltering?numberHow to read values from the framebuffer. Either LINEAR (nearby pixels will be interpolated) or NEAREST (no interpolation). Default is NEAREST.

Returns

void


update()

update(newOptions): void

Defined in: renderers/AsciiRenderer.ts:198

Updates renderer options.

Parameters

ParameterTypeDescription
newOptionsTThe new options to update.

Returns

void

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: ".:-=+*#%@",
invertMode: true,
rotationAngle: 90,
// ...
});
}