PiDraw - geometric illustration

PiDraw is a script designed to create and generate geometrical illustration. It is based above svg.js to display the graphics. PiDraw comes also with a parser, which is a "text to graphical illustration" application.

This application is made for me and I'm glad to share it :)

Made with Love and LOTS of coffee :)

class Draw

The Draw class is the main class. It is simply created with:

const draw = new Draw(element
:
<id | HTMLElement>, config ? : IParserConfig
)

config is an object describing the display and the constructions

interface IParserConfig {
    parameters?: string,
    code?: string
    tex?: TeXConverterType,
}

parameters

parameters is a string code, defined by <key1>[=<value1>],<key1>[=<value1>],.... For example, a complete parameters string could be

parameters = "axis,grid,ppu=80,x=-5:10,y=-2:9,subgrid=2"

| key | value | description | |---------|---------------------|------------------------------------------------------------| | axis | null | if axis is given, the axis are displayed | | grid | null | if grid is given, the grids are displayed | | subgrid | <number> | number of subdivisions of the grid | | x | <number>:<number> | gives the x-axis min and max value, separated by : | | y | <number>:<number> | gives the y-axis min and max value, separated by : | | ppu | <number> | points per unit - used to defined the scale of the viewbox |

code

code describes the geometric figures to be created. Each line of the string is a figure.

code points

• A(x,y) create a point at coordinates x and y
• A(x,y)->drag creates a point at coordinates x and y and make it draggable.

code line / ray / segment

• d=AB creates an infinite line through the points A and B. These points must be created before
• d=AB. creates a segment from the point A to B.
• d=vAB creates a vector from the point A to B.
• d=AB[ creates a ray from the point A through B.

code plot

• f(x)=x^2-4x+2 or f=plot x^2-4x+2 creates a plot using the natural math language (asciiMath).

class Graph

Graph is the root class to display the illustration. Even if it's possible to use it directly, this class is designed to be used in conjunction with the Draw class.

const graph = new Graph(element
:
id | HTMLElement, config
:
IGraphConstructorConfig
)

config is an object describing the global configuration of the illustration:

interface IGraphConstructorConfig {
    width?: number,
    height?: number,
    origin?: { x: number, y: number },
    ppu?: number,
    system?: cartesian_2d | polar,
    axis?: {
        x: { x: number, y: number }
        y: { x: number, y: number }
    },
    display?: {
        axis?: boolean | {
            x: boolean | number | IAxisConfig,
            y: boolean | number | IAxisConfig
        },
        grid?: boolean,
        subgrid?: number,
    },
    tex?: (value: string) => string
}

config

| key | value | default | description | |---------|----------------------------------------------------|----------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | width | number | 800 | width of the svg viewbox in pixels |
| height | number | 600 | width of the svg viewbox in pixels | | origin | {x:number,y:number} | {x: 400, y: 300} | origin of the axis, from the top left of the viewbox. | | ppu | number | 50 | points per unit. With the default width at 800, the x-axis will have 800/50=16 units | | system | string | "cartesian_2d" | type of coordinate system.Allowed values: cartesian_2d or polar | | axis | {x: {x:number,y:number}, y:{x:number,y:number}} | {x: {x: 50, y: 0}, y: {x: 0, y:-50}} | x and y axis. Each axis is defined by it's vector in pixels, with the y-axis inverted | | display | {axis: boolean, grid: boolean, subgrid: number } | {grid: true, subgrid: 0, axis: true} | grid: hide or show the subgrid: set a subgrid, defined by the number of subdivision (0=no subgrid, 1=one subdivision) axis: show or hide the grid (TODO: more possibilities...) | | tex | (value:string)=>string | (value)=>value | the TeX converter (I'm using katex) |