textmode.js / Textmodifier

Class: Textmodifier

The main textmode.js drawing context.

A Textmodifier manages a canvas, renderer, layers, fonts, media sources, input, animation, and the p5-style drawing API. When no canvas is supplied, it creates one; when a canvas is supplied, it renders into that element.

Extends

• TextmodifierExtensions

2D drawing

Draw points, lines, curves, and planar primitives.

Method	Description
arc	Draw an arc with the current settings. Position is controlled via translate, push, and pop.
bezierCurve	Draw a smooth cubic Bezier curve between two points. The curve thickness is controlled by the current lineWeight setting.
ellipse	Draw an ellipse with the current settings. Position is controlled via translate, push, and pop.
line	Draw a line from (x1, y1) to (x2, y2).
lineWeight	Set or get line thickness for subsequent line and curve drawing.
point	Draw one cell with the current settings.
rect	Draw a rectangle with the current settings. Position is controlled via translate, push, and pop.
triangle	Draw a triangle with the current settings.

3D drawing

Draw built-in three-dimensional primitives.

Method	Description
box	Draw a box mesh primitive.
cone	Draw a cone mesh primitive.
cylinder	Draw a cylinder mesh primitive.
ellipsoid	Draw an ellipsoid mesh primitive.
sphere	Draw a sphere mesh primitive.
torus	Draw a torus mesh primitive.

Animation & timing

Control rendering cadence and read elapsed sketch time.

Name	Description
frameCount	Current frame count.
millis	Milliseconds since the sketch started running.
secs	Seconds since the sketch started running.
deltaTime	Time in milliseconds between the current frame and the previous frame.
frameRate	Set the target frame rate, or get the current measured frame rate when called without arguments.
isLooping	Whether the automatic render loop is currently running.
loop	Resume the rendering loop if it was stopped by noLoop.
noLoop	Stop the automatic rendering loop.
redraw	Render a fixed number of frames on demand.
targetFrameRate	Set or get the target frame rate limit.

Cameras & projection

Control the camera and projection used for spatial drawing.

Method	Description
camera	Set an explicit camera transform for subsequent draw calls.
createCamera	Create and activate a camera initialized from the current render camera state.
lookAt	Update the look-at target and optional up vector for the active camera.
ortho	Enable orthographic projection for subsequent shape drawing.
perspective	Enable perspective projection and optionally set projection parameters.
resetCamera	Reset to the default auto camera behavior.
setCamera	Activate a previously created camera object.

Canvas & display

Inspect and resize the canvas and display output.

Name	Description
displayHeight	Physical screen height in pixels.
displayWidth	Physical screen width in pixels.
windowHeight	Current browser window height in pixels.
windowWidth	Current browser window width in pixels.
canvas	Canvas containing the rendered output.
height	Canvas height in pixels.
width	Canvas width in pixels.
pixelDensity	Get the current pixel density for HiDPI rendering.
resizeCanvas	Resize the canvas and adjust all related components accordingly.
windowResized	Set the callback that runs after a window resize.

Characters & color

Set the glyph, colors, and per-character appearance for later drawing.

Method	Description
background	Current background color.
cellColor	Current cell background color.
char	Current character string used for drawing.
charColor	Current character color.
charRotation	Set the character rotation for subsequent drawing, or get the current angle.
clear	Clear the layer currently drawing to.
color	Create a reusable color object from a grayscale value.
colorMode	Current color interpretation mode.
fill	Alias for cellColor. Current fill (cell background) color.
flipX	Toggle horizontal flipping for subsequent characters, or get the current state.
flipY	Toggle vertical flipping for subsequent characters, or get the current state.
invert	Toggle character/cell color inversion, or get the current state.
stroke	Alias for charColor. Current stroke (character) color.

Conversion

Convert source imagery and post-process rendered output.

Accessor	Description
conversions	Access the conversion manager for this Textmodifier instance.

Custom geometry

Assemble vertex-based shapes with explicit topology.

Name	Description
LINE_LOOP	Draw consecutive vertices as one connected closed loop.
LINE_STRIP	Draw consecutive vertices as one connected open path.
LINES	Draw each pair of recorded vertices as an independent line segment.
POINTS	Draw each recorded vertex as a separate point.
QUAD_STRIP	Draw paired vertices as a connected strip of quads.
QUADS	Draw each group of four vertices as a quad split into two triangles.
TRIANGLE_FAN	Draw triangles that all share the first recorded vertex.
TRIANGLE_STRIP	Draw overlapping triplets of vertices as a connected triangle strip.
TRIANGLES	Draw each group of three vertices as an independent triangle.
beginShape	Start recording vertices for a custom 2D or 3D shape. Call vertex one or more times, then call endShape to draw the recorded shape.
endShape	Finish the active custom shape and enqueue its geometry.
vertex	Add a vertex to the active custom shape. The current transform, character, color, and line state are captured for this vertex.

Gamepad input

Read connected controllers and react to gamepad events.

Name	Description
gamepads	Currently connected gamepads as a compact readonly list.
gamepad	Resolve a connected gamepad by its browser-assigned slot index.
gamepadAxisChanged	Register the single-callback handler for meaningful gamepad axis changes.
gamepadButtonPressed	Register the single-callback handler for gamepad button press events.
gamepadButtonReleased	Register the single-callback handler for gamepad button release events.
gamepadConnected	Register the single-callback handler for gamepad connection events.
gamepadDisconnected	Register the single-callback handler for gamepad disconnection events.

Grid, fonts & glyphs

Configure the drawing grid and the glyph source that populates it.

Name	Description
font	Font or tileset used by the current drawing layer.
grid	Grid for the layer currently being drawn.
createGlyphRamp	Create a reusable glyph ramp from a character sequence.
fontSize	Set or get the base layer font size.
loadFont	Load a font and optionally set it as the base layer's active font.
loadTileset	Load a tileset and optionally set it as the base layer's active glyph source.
projectClientToGrid	Project CSS viewport/client coordinates into a textmode grid.
useTileColors	Configure authored tileset color preservation on the base layer.

Input events

Subscribe to input through the shared event interface.

Method	Description
inputGrid	Get or set the grid used for mouse and touch coordinate mapping.
off	Remove a previously registered input event listener.
on	Register an input event listener.
once	Register an input event listener that removes itself after the first invocation.

Keyboard input

Read keyboard state and react to keyboard events.

Name	Description
lastKeyPressed	Last key pressed, or null before any key press.
lastKeyReleased	Last key released, or null before any key release.
modifierState	Current modifier key state.
pressedKeys	Keys currently being held down.
isKeyPressed	Check whether a key is currently pressed.
keyPressed	Register the single-callback handler for key press events.
keyReleased	Register the single-callback handler for key release events.
keyTyped	Register the single-callback handler for printable character input.

Layers & compositing

Manage layer stacks and choose how their output combines.

Name	Description
BLEND_ADDITIVE	Add the layer's color channels to the layers below it.
BLEND_COLOR_BURN	Darken the layers below by inverting the color dodge relationship.
BLEND_COLOR_DODGE	Brighten the layers below by dividing around the layer color.
BLEND_DARKEN	Keep the darker channel from either the layer or the layers below it.
BLEND_DIFFERENCE	Use the absolute channel difference between the layer and the layers below.
BLEND_EXCLUSION	Use a lower-contrast difference blend between the layer and the layers below.
BLEND_HARD_LIGHT	Apply an intense contrast blend driven by the layer's brightness.
BLEND_LIGHTEN	Keep the lighter channel from either the layer or the layers below it.
BLEND_MULTIPLY	Multiply the layer's colors with the layers below it.
BLEND_NORMAL	Draw the layer with standard source-over alpha compositing.
BLEND_OVERLAY	Combine multiply and screen based on the brightness below the layer.
BLEND_SCREEN	Screen the layer against the layers below it.
BLEND_SOFT_LIGHT	Apply a softer contrast blend based on the layer's brightness.
BLEND_SUBTRACT	Subtract the layer's colors from the layers below it.
layers	Layer manager for this Textmodifier instance.

Lighting

Illuminate three-dimensional geometry.

Method	Description
ambientLight	Add an ambient light using a grayscale value.
lightFalloff	Configure distance attenuation used by point lights.
noLights	Remove all active lights (ambient and point) and reset light falloff to (1, 0, 0).
pointLight	Add a point light using RGB components and explicit XYZ position.

Loading & errors

Access built-in loading feedback and fatal-error controls.

Accessor	Description
errors	Built-in fatal error layer controller.
loading	Built-in loading layer controller.

Math & vectors

Use creative-coding math helpers and mutable vectors.

Method	Description
abs	Calculate the absolute value of a number.
acos	Calculate the arc cosine of a value.
asin	Calculate the arc sine of a value.
atan	Calculate the arc tangent of a value.
atan2	Calculate the angle from a vector's y and x components.
ceil	Round up to the closest integer.
clamp	Clamp a value between a minimum and maximum range.
constrain	Constrain a value between a minimum and maximum range.
cos	Calculate the cosine of an angle.
createVector	Create a mutable vector.
degrees	Convert radians to degrees.
dist	Calculate the Euclidean distance between two points.
ease	Apply an easing curve to a normalized amount.
exp	Calculate Euler's number raised to a value.
floor	Round down to the closest integer.
fract	Calculate the fractional part of a number.
lerp	Linear interpolation between two values.
log	Calculate the natural logarithm of a value.
map	Re-map a number from one range to another.
max	Return the largest value in a sequence.
min	Return the smallest value in a sequence.
norm	Map a number from a range to a normalized 0 to 1 range.
pow	Raise a base value to an exponent.
radians	Convert degrees to radians.
round	Round to the closest integer or decimal place.
sin	Calculate the sine of an angle.
sq	Square a number.
sqrt	Calculate the square root of a number.
tan	Calculate the tangent of an angle.

Media & textures

Load visual sources and use them as drawing or texture input.

Method	Description
createTexture	Create a dynamic texture from an external canvas or video element.
image	Draw a framebuffer, image, video, or texture source to the currently bound framebuffer.
loadImage	Load an image source that can be drawn with image.
loadVideo	Load a video source that can be drawn with image.
noTexture	Clear the active texture for later geometry draws.
texture	Bind a media source or framebuffer as the texture for later geometry draws.

Mouse input

Read pointer state, mouse events, and pointer-lock controls.

Name	Description
mouse	Current mouse position in center-based grid coordinates.
mouseIsPressed	Whether a mouse button is currently held down.
movedX	Horizontal mouse movement accumulated since the previous rendered frame.
movedY	Vertical mouse movement accumulated since the previous rendered frame.
pmouse	Mouse position from the previous rendered frame.
cursor	Set the mouse cursor for the textmode canvas.
doubleClicked	Register the single-callback handler for double-clicks.
exitPointerLock	Exit pointer lock if the textmode canvas currently owns it.
mouseClicked	Register the single-callback handler for mouse clicks.
mouseDragged	Register the single-callback handler for mouse dragging.
mouseMoved	Register the single-callback handler for mouse movement.
mousePressed	Register the single-callback handler for mouse press events.
mouseReleased	Register the single-callback handler for mouse release events.
mouseScrolled	Register the single-callback handler for mouse wheel scrolling.
requestPointerLock	Request browser pointer lock for the textmode canvas.

Randomness & noise

Generate deterministic random values and coherent noise.

Method	Description
noise	Return deterministic multi-octave noise for a coordinate.
noiseDetail	Adjust noise octaves and falloff.
noiseSeed	Reset the noise lookup table to a seed.
random	Return a random number from 0 up to, but not including, 1.
randomGaussian	Return a normally distributed random number.
randomSeed	Reset the main sketch random generator to a seed.
randomStream	Get an independent deterministic random stream for a name.

Shaders & framebuffers

Build GPU effects and offscreen rendering pipelines.

Method	Description
createFramebuffer	Create a framebuffer for offscreen rendering.
createMaterialShader	Create a material shader from fragment shader source or a file path.
createShader	Create a shader from vertex and fragment source, or from file paths.
resetShader	Reset the current shader to the default solid color shader.
setUniform	Set a uniform value on the current custom shader.
setUniforms	Set multiple uniform values on the current custom shader.
shader	Set a custom shader for subsequent drawing operations.

Sketch lifecycle

Configure callbacks and manage the lifetime of a sketch.

Name	Description
isDisposed	Whether this instance has been destroyed.
isRenderingFrame	Check if rendering is currently in progress for this frame.
destroy	Completely destroy this Textmodifier instance and free all associated resources.
draw	Set the base layer draw callback.
postDraw	Set the base layer post-draw callback.
setup	Set the setup callback that runs once initialization is complete.

Text rendering

Lay out and draw strings on the active layer.

Method	Description
print	Print a string of text onto the active drawing layer.
printAlign	Sets the text alignment rules for subsequent print calls.

Touch & gestures

React to touch lifecycle events and derived gestures.

Name	Description
touches	Currently active touches in grid coordinates.
doubleTap	Register a callback for double tap gestures.
longPress	Register a callback for long press gestures.
pinch	Register a callback for pinch gestures, receiving scale deltas.
rotateGesture	Register a callback for rotate gestures, receiving rotation deltas in degrees.
swipe	Register a callback for swipe gestures.
tap	Register a callback for tap gestures.
touchCancelled	Register the single-callback handler for browser-cancelled touches.
touchEnded	Register the single-callback handler for touch end events.
touchMoved	Register the single-callback handler for touch movement.
touchStarted	Register the single-callback handler for touch start events.

Transforms & state

Position geometry and isolate changes to draw state.

Method	Description
applyMatrix	Multiply the current model transform by a custom 4x4 matrix.
pop	Restore the most recently saved rendering state, shader, and uniforms from the state stack. Use with push to isolate style changes within a block.
push	Save the current rendering state, shader, and uniforms to the state stack. Use with pop to isolate style changes within a block.
resetMatrix	Reset the current model transform to identity.
rotate	Set rotation for subsequent shape drawing.
rotateX	Set X-axis rotation for subsequent shape drawing, or get the current angle.
rotateY	Set Y-axis rotation for subsequent shape drawing, or get the current angle.
rotateZ	Set Z-axis rotation for subsequent shape drawing, or get the current angle.
scale	Scale subsequent geometry in model space.
translate	Translate subsequent shape drawing.
translateX	Current accumulated X-axis translation.
translateY	Current accumulated Y-axis translation.
translateZ	Current accumulated Z-axis translation.