diagramatics logo Diagramatics GitHub Docs Guides Editor Examples
Guides usageshapestransformationstyletagsbooleanpointsalignmenttableinteractivitymodifierutilitiesgeometryannotationplotbartechnicalTeX

Modifier

Modifier is a function that modifies a Diagram. It takes a Diagram as input, and returns a Diagram as output.
Modifier can be applied to a Diagram using the Diagram.apply method.
// `Diagram.apply` takes any function that takes a Diagram as input and returns a Diagram as output // but diagramatics also provides built-in modifier functions that can be used
Diagram.apply ( modifier_function  :  (d : Diagram) => Diagram )  :  Diagram 
 

        // `Diagram.apply` takes any function that takes a Diagram as input and returns a Diagram as output
        // but diagramatics also provides built-in modifier functions that can be used
         


    * Diagram.apply only apply the function to the outermost diagram. If you want to apply the function recursively, you can use Diagram.apply_recursive.
 
 
 
 
 

        // Subdivide each segment of a diagram into `n` segments

        let pent  = regular_polygon(5, 5).apply(mod.subdivide(3));

        draw(pent.debug());
         
 
mod.subdivide  (
                n
                             : 
                            number )
                         : 
                            modifierFunction  
 

        // Subdivide each segment of a diagram into `n` segments

        let pent  = regular_polygon(5, 5).apply(mod.subdivide(3));

        draw(pent.debug());
         
 
 
 
 

        // Resample a diagram so that it has `n` points

        let pent  = regular_polygon(5, 5).apply(mod.resample(10));

        draw(pent.debug());
         
 
mod.resample  (
                n
                             : 
                            number )
                         : 
                            modifierFunction  
 

        // Resample a diagram so that it has `n` points

        let pent  = regular_polygon(5, 5).apply(mod.resample(10));

        draw(pent.debug());
         
 
 
 

        let pent  = regular_polygon(5, 5).apply(mod.resample(100));

        draw(pent.debug());
         
 
    
 

        let pent  = regular_polygon(5, 5).apply(mod.resample(100));

        draw(pent.debug());
         


    If n is not a multiple of the number of points, the path will be distorted.
    In some cases it might be better to use mod.subdivide instead.
    
 
 

        // if the sampling point is too small or not a multiple of the number of points
        // the path will be distorted
        let pent  = regular_polygon(5, 5).apply(mod.resample(8));

        draw(pent.debug());
         
 
    
 

        // if the sampling point is too small or not a multiple of the number of points
        // the path will be distorted
        let pent  = regular_polygon(5, 5).apply(mod.resample(8));

        draw(pent.debug());
         
 
 
 
 

        // Modifies a diagram by rounding the corners of a polygon or curve
        // `radius` : radius of the corner
        // `point_indices` : indices of the points to be rounded
        // * if `point_indices` is not provided, all the points will be rounded

        // you can check the index of the point by using the `Diagram.debug` method

        let sq  = square(5).apply(mod.round_corner(2, [0,2]));

        draw(sq);
         
 
mod.round_corner  (
                radius
                             : 
                            number | number[] , point_indices?
                             : 
                            number[] , count?
                             : 
                            number = 40 )
                         : 
                            modifierFunction  
 

        // Modifies a diagram by rounding the corners of a polygon or curve
        // `radius` : radius of the corner
        // `point_indices` : indices of the points to be rounded
        // * if `point_indices` is not provided, all the points will be rounded

        // you can check the index of the point by using the `Diagram.debug` method

        let sq  = square(5).apply(mod.round_corner(2, [0,2]));

        draw(sq);
         
 
 
 
 

        // Add an arrow to the end of a curve
        // Make sure the diagram this modifier is applied to is a curve
        // `headsize` : size of the arrow head
        // `flip` : flip the arrow position

        let curve = graph.plotf(x => Math.sin(x));
        let with_arrow = curve.apply(mod.add_arrow(0.2)).fill('blue');
        draw(with_arrow);
         
 
mod.add_arrow  (
                headsize
                             : 
                            number , flip?
                             : 
                            boolean = false )
                         : 
                            modifierFunction  
 

        // Add an arrow to the end of a curve
        // Make sure the diagram this modifier is applied to is a curve
        // `headsize` : size of the arrow head
        // `flip` : flip the arrow position

        let curve = graph.plotf(x => Math.sin(x));
        let with_arrow = curve.apply(mod.add_arrow(0.2)).fill('blue');
        draw(with_arrow);
         
 
 
 
 

        // Replace arrowhead inside a diagram with another diagram
        // The arrow will be rotated automatically
        // The default direction is to the right (+x) with the tip at the origin

        let diamond = regular_polygon(4).move_origin('center-right').fill('blue');
        let arr  = arrow(V2(10,0)).apply(mod.arrowhead_replace(diamond));
        draw(arr);
         
 
mod.arrowhead_replace  (
                new_arrowhead
                             : 
                            Diagram )
                         : 
                            modifierFunction  
 

        // Replace arrowhead inside a diagram with another diagram
        // The arrow will be rotated automatically
        // The default direction is to the right (+x) with the tip at the origin

        let diamond = regular_polygon(4).move_origin('center-right').fill('blue');
        let arr  = arrow(V2(10,0)).apply(mod.arrowhead_replace(diamond));
        draw(arr);
         
 
 
 

        let d  = square(0.4).skewX(1).move_origin('bottom-right').fill('blue');
        let ax = axes_empty().apply(mod.arrowhead_replace(d));
        draw(ax);
         
 
    
 

        let d  = square(0.4).skewX(1).move_origin('bottom-right').fill('blue');
        let ax = axes_empty().apply(mod.arrowhead_replace(d));
        draw(ax);
         
 
 
Apply recursively
 
 
 

        let p3 = regular_polygon(3);
        let p4 = regular_polygon(4);
        let p5 = regular_polygon(5);
        let p6 = regular_polygon(6);
        let group = distribute_grid_row([p3,p4,p5,p6], 2, 1, 1);
        let rounded_group = group.apply_recursive(mod.round_corner(0.1))
        draw(rounded_group);
         
 
Diagram.apply_recursive  (
                modifier_function
                             : 
                            (d : Diagram) => Diagram )
                         : 
                            Diagram  
 

        let p3 = regular_polygon(3);
        let p4 = regular_polygon(4);
        let p5 = regular_polygon(5);
        let p6 = regular_polygon(6);
        let group = distribute_grid_row([p3,p4,p5,p6], 2, 1, 1);
        let rounded_group = group.apply_recursive(mod.round_corner(0.1))
        draw(rounded_group);