API Reference

The core modules of Charming, which are included in core bundle:

• App - rendering app to DOM and animating it
• Flow - binding data to shapes
• Process - preparing data to be rendered
• Shape - appending geometric elements to canvas
• Transform - deriving shape attribute values
• Scale - mapping abstract data to visual representation
• Event - handling hooks and events
• Prop - returning properties of the app
• Attribute - defining attributes for shapes

The other modules are included in full bundle. Different renderers:

• WebGL - the WebGL renderer and related helpers
• Terminal - the terminal renderer and related helpers

Reusable solutions for common tasks:

• Array - array generation and manipulation
• Math - processing numbers, randomness, etc.
• Constant - useful constants
• Vector - basics for simulating physical laws
• Helper - useful unities

App

Rendering app to DOM and animating it.

• cm.app - create a new app
• app.data - append data to flow
• app.datum - append a single datum to flow
• app.append - append shapes to flow
• app.render - render shapes to canvas
• app.start - start the animation
• app.stop - stop the animation
• app.dispose - dispose the app
• app.node - get the canvas element
• app.prop - get a property value
• app.on - add an event listener
• app.call - call a function
• app.textBBox - compute text bounding box
• cm.canvas - create a canvas renderer

Flow

Binding data to shapes.

• flow.data - append data to flow
• flow.datum - append a single datum to flow
• flow.process - process data
• flow.append - append shapes to flow
• flow.transform - transform shape attributes
• flow.call - call a function
• flow.app - get the app

Process

Preparing data to be rendered.

• cm.each - call a function on each datum
• cm.eachRight - call a function on each datum (right to left)
• cm.filter - filter data
• cm.map - map data
• cm.derive - derive new fields
• cm.push - append datum to flow

Shape

Appending geometric elements to canvas.

• cm.point - append dots
• cm.link - append lines
• cm.rect - append rectangles
• cm.circle - append circles
• cm.triangle - append triangles
• cm.polygon - append polygons
• cm.line - append lines
• cm.path - append paths
• cm.text - append text
• cm.group - append groups
• cm.clear - clear the canvas
• function - defines a composite shape

Transform

Deriving shape attribute values.

• cm.mapAttrs - map attributes with scales
• cm.mapPosition - map position to visual coordinates

Scale

Mapping abstract data to visual representation.

• cm.scaleLinear - create a linear scale
• cm.scaleSqrt - create a sqrt scale
• cm.scaleLog - create a log scale
• cm.scaleOrdinal - create an ordinal scale

Event

Handling hooks and events.

• event.update - fired repeatedly during animation
• event.mouseDown - fired when a mouse button is pressed
• event.mouseUp - fired when a mouse button is released
• event.mouseClick - fired when a mouse button is clicked
• event.beforeEach - fired before each update event
• event.afterEach - fired after each update event
• event.beforeAll - fired before app starts
• event.afterAll - fired after app disposes

Prop

Returning properties of the app.

• prop.width - the width of the app
• prop.height - the height of the app
• prop.frameCount - the number of frames displayed
• prop.frameRate - the number of frames per second
• prop.mouseX - the x coordinate of the mouse
• prop.mouseY - the y coordinate of the mouse
• prop.mode - the rendering mode
• prop.pixelWidth - the width in pixels
• prop.pixelHeight - the height in pixels
• prop.cellWidth - the width of cells in pixels
• prop.cellHeight - the height of cells in pixels
• prop.fontSize - the font size
• prop.fontFamily - the font family
• prop.fontWeight - the font weight

Attribute

Defining attributes for shapes.

• cm.rgb - create an RGB color
• cm.hsl - create an HSL color
• cm.constant - define a constant attribute

WebGL

The WebGL renderer and related helpers.

• cm.webgl - create a WebGL renderer
• cm.glsl - define a GLSL attribute

Terminal

The terminal renderer and related helpers.

• cm.terminal - create a terminal renderer
• cm.cfb - create a terminal color
• cm.wch - mark a wide character
• cm.figlet - create figlet text
• cm.fontStandard - get the standard font
• cm.fontGhost - get the ghost font
• cm.gradientRainBowX - create a vertical rainbow gradient
• cm.gradientSineBowX - create a vertical sinebow gradient

Array

Array generation and manipulation.

• cm.range - create an array of uniformly-spaced values
• cm.cross - create the cartesian product
• cm.extent - get the extent

Math

Processing numbers, randomness, etc…

• cm.clamp - clamp a value
• cm.random - generate a random number
• cm.randomInt - generate a random integer
• cm.randomNoise - create a Perlin noise function
• cm.randomNormal - create a normal distribution function
• cm.randomChar - generate a random character

Constant

Useful constants.

• cm.TWO_PI - 2π

Vector

Basics for simulating physical laws.

• cm.vec - create a vector
• cm.vecFromAngle - create a vector from angle
• cm.vecAdd - add vectors
• cm.vecAngle - compute the angle
• cm.vecClamp - constrain the magnitude
• cm.vecClampX - constrain the x component
• cm.vecClampY - constrain the y component
• cm.vecCross - compute the cross product
• cm.vecDist - compute the distance
• cm.vecDist2 - compute the square distance
• cm.vecDiv - divide by value
• cm.vecDot - compute the dot product
• cm.vecInX - check if x is in range
• cm.vecInY - check if y is in range
• cm.vecMag - compute the magnitude
• cm.vecMult - multiply by value
• cm.vecNeg - negate the vector
• cm.vecNegX - negate the x component
• cm.vecNegY - negate the y component
• cm.vecNorm - normalize the vector
• cm.vecRandom - create a random unit vector
• cm.vecSub - subtract vectors
• vec.clone - clone the vector
• vec.add - add to target vector
• vec.angle - compute the angle
• vec.clamp - constrain the magnitude
• vec.clampX - constrain the x component
• vec.clampY - constrain the y component
• vec.cross - compute the cross product
• vec.dist - compute the distance
• vec.dist2 - compute the square distance
• vec.div - divide by value
• vec.dot - compute the dot product
• vec.inX - check if x is in range
• vec.inY - check if y is in range
• vec.mag - compute the magnitude
• vec.mult - multiply by value
• vec.neg - negate the vector
• vec.negX - negate the x component
• vec.negY - negate the y component
• vec.norm - normalize the vector
• vec.set - set from source vector
• vec.setX - set the x component
• vec.setY - set the y component
• vec.sub - subtract from target vector

Helper

Useful unities.

• cm.pathContext - create a path generator
• pathContext.toArray - get the array of path commands