diagramatics logo Diagramatics GitHub Docs Guides Editor Examples
Guides usageshapestransformationstyletagsbooleanpointsalignmenttableinteractivitymodifierutilitiesgeometryannotationplotbartechnicalTeX

Transformation

Diagram that has been created can be transformed. Diagramatics provide the following transformation :
let sq = square(10); let sq0 = sq.stroke('grey').strokedasharray([5]); let sq1 = sq.translate(V2(5,5)); draw(sq0, sq1);
Diagram.translate ( v  :  Vector2 )  :  Diagram 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.translate(V2(5,5));
        draw(sq0, sq1);
         
 
 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.position(V2(5,5));
        draw(sq0, sq1);
         
 
Diagram.position  (
                v
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.position(V2(5,5));
        draw(sq0, sq1);
         
 
 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.rotate(Math.PI/3, V2(-5,-5));
        draw(sq0, sq1);
         
 
Diagram.rotate  (
                angle
                             : 
                            number , pivot?
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.rotate(Math.PI/3, V2(-5,-5));
        draw(sq0, sq1);
         
 
 
 

        // if pivot is left undefined, the diagram will rotate around its origin

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.rotate(Math.PI/3);
        draw(sq0, sq1);
         
 
    
 

        // if pivot is left undefined, the diagram will rotate around its origin

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.rotate(Math.PI/3);
        draw(sq0, sq1);
         
 
 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.scale(V2(2,0.5), V2(-5,-5));
        draw(sq0, sq1);
         
 
Diagram.scale  (
                scale
                             : 
                            Vector2 | number , origin?
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.scale(V2(2,0.5), V2(-5,-5));
        draw(sq0, sq1);
         
 
 
 

        // if origin is left undefined, the diagram will scale around its origin

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.scale(V2(2,0.5));
        draw(sq0, sq1);
         
 
    
 

        // if origin is left undefined, the diagram will scale around its origin

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.scale(V2(2,0.5));
        draw(sq0, sq1);
         
 
 
 

        // if base is left undefined, the diagram will skew about its origin
        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewX(to_radian(30));
        draw(sq0, sq1);
         
 
Diagram.skewX  (
                angle
                             : 
                            number , base?
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        // if base is left undefined, the diagram will skew about its origin
        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewX(to_radian(30));
        draw(sq0, sq1);
         
 
 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewX(to_radian(30), sq.get_anchor('top-center'));
        draw(sq0, sq1);
         
 
    
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewX(to_radian(30), sq.get_anchor('top-center'));
        draw(sq0, sq1);
         
 
 
 

        // if base is left undefined, the diagram will skew about its origin
        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewY(to_radian(30));
        draw(sq0, sq1);
         
 
Diagram.skewY  (
                angle
                             : 
                            number , base?
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        // if base is left undefined, the diagram will skew about its origin
        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewY(to_radian(30));
        draw(sq0, sq1);
         
 
 
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewY(to_radian(30), sq.get_anchor('center-left'));
        draw(sq0, sq1);
         
 
    
 

        let sq = square(10);
        let sq0 = sq.stroke('grey').strokedasharray([5]);
        let sq1 = sq.skewY(to_radian(30), sq.get_anchor('center-left'));
        draw(sq0, sq1);
         
 
 
 

        // Reflect the diagram vertically over a horizontal line `y = a`
        // if left undefined, flip over its origin

        let tr = regular_polygon(3,10);
        let tr0 = tr.stroke('grey').strokedasharray([5]);
        let tr1 = tr.vflip(-10);

        draw(tr0, tr1);
         
 
Diagram.vflip  (
                a?
                             : 
                            number )
                         : 
                            Diagram  
 

        // Reflect the diagram vertically over a horizontal line `y = a`
        // if left undefined, flip over its origin

        let tr = regular_polygon(3,10);
        let tr0 = tr.stroke('grey').strokedasharray([5]);
        let tr1 = tr.vflip(-10);

        draw(tr0, tr1);
         
 
 
 

        // Reflect the diagram horizontally over a vertical line `x = a`
        // if left undefined, flip over its origin

        let tr = regular_polygon(3,10).rotate(Math.PI/6);
        let tr0 = tr.stroke('grey').strokedasharray([5]);
        let tr1 = tr.hflip(10);

        draw(tr0, tr1);
         
 
Diagram.hflip  (
                a?
                             : 
                            number )
                         : 
                            Diagram  
 

        // Reflect the diagram horizontally over a vertical line `x = a`
        // if left undefined, flip over its origin

        let tr = regular_polygon(3,10).rotate(Math.PI/6);
        let tr0 = tr.stroke('grey').strokedasharray([5]);
        let tr1 = tr.hflip(10);

        draw(tr0, tr1);
         
 
 
Reflection
          
 
 

        // if given 0 arguments, reflect over the origin
        // if given 1 argument, reflect over a point p1
        // if given 2 arguments, reflect over a line defined by two points p1 and p2

        let sq = square(10);

        sq.reflect(V2(1,0));
        // is the same as
        sq.reflect_over_point(V2(1,0));

        sq.reflect(V2(1,0), V2(2,0));
        // is the same as
        sq.reflect_over_line(V2(1,0), V2(2,0));
         
 
Diagram.reflect  (
                p1?
                             : 
                            Vector2 , p2?
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        // if given 0 arguments, reflect over the origin
        // if given 1 argument, reflect over a point p1
        // if given 2 arguments, reflect over a line defined by two points p1 and p2

        let sq = square(10);

        sq.reflect(V2(1,0));
        // is the same as
        sq.reflect_over_point(V2(1,0));

        sq.reflect(V2(1,0), V2(2,0));
        // is the same as
        sq.reflect_over_line(V2(1,0), V2(2,0));
         
 
 
 

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let refl_point = V2(10,5);
        let penta_1 = penta.reflect_over_point(refl_point);

        let refl_indicator = circle(0.5).fill('blue').position(refl_point);
        draw(penta_0, penta_1, refl_indicator);
         
 
Diagram.reflect_over_point  (
                p
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let refl_point = V2(10,5);
        let penta_1 = penta.reflect_over_point(refl_point);

        let refl_indicator = circle(0.5).fill('blue').position(refl_point);
        draw(penta_0, penta_1, refl_indicator);
         
 
 
 

        // you can see which point reflected into which location in the diagram below

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let refl_point = V2(10,5);
        let penta_1 = penta.reflect_over_point(refl_point);

        let refl_indicator = circle(0.5).fill('blue').position(refl_point);
        draw(penta_0.debug(), penta_1.debug(), refl_indicator);
         
 
    
 

        // you can see which point reflected into which location in the diagram below

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let refl_point = V2(10,5);
        let penta_1 = penta.reflect_over_point(refl_point);

        let refl_indicator = circle(0.5).fill('blue').position(refl_point);
        draw(penta_0.debug(), penta_1.debug(), refl_indicator);
         
 
 
 

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let p1 = V2(0,15);
        let p2 = V2(13,2);
        let penta_1 = penta.reflect_over_line(p1, p2);

        let refl_line = line(p1,p2).stroke('grey').strokedasharray([5]);
        draw(penta_0, penta_1, refl_line);
         
 
Diagram.reflect_over_line  (
                p1
                             : 
                            Vector2 , p2
                             : 
                            Vector2 )
                         : 
                            Diagram  
 

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let p1 = V2(0,15);
        let p2 = V2(13,2);
        let penta_1 = penta.reflect_over_line(p1, p2);

        let refl_line = line(p1,p2).stroke('grey').strokedasharray([5]);
        draw(penta_0, penta_1, refl_line);
         
 
 
 

        // you can see which point reflected into which location in the diagram below

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let p1 = V2(0,15);
        let p2 = V2(13,2);
        let penta_1 = penta.reflect_over_line(p1, p2);

        let refl_line = line(p1,p2).stroke('grey').strokedasharray([5]);
        draw(penta_0.debug(), penta_1.debug(), refl_line);
         
 
    
 

        // you can see which point reflected into which location in the diagram below

        let penta   = regular_polygon(5, 10);
        let penta_0 = penta.stroke('grey').strokedasharray([5]);

        let p1 = V2(0,15);
        let p2 = V2(13,2);
        let penta_1 = penta.reflect_over_line(p1, p2);

        let refl_line = line(p1,p2).stroke('grey').strokedasharray([5]);
        draw(penta_0.debug(), penta_1.debug(), refl_line);
         
 
 
Custom transformation
 
 
 

        let sq = square(15);

        // create a transformation function that takes a Vector2 and returns a Vector2
        let f_wavy = (v) => V2(0, Math.sin(v.x)).add(v);

        // we have to subdivide first before applying the transformation
        let sqmod  = sq.apply(mod.subdivide(100)).transform(f_wavy);

        draw(sqmod);
         
 
Diagram.transform  (
                transform_function
                             : 
                            (p : Vector2) => Vector2 )
                         : 
                            Diagram  
 

        let sq = square(15);

        // create a transformation function that takes a Vector2 and returns a Vector2
        let f_wavy = (v) => V2(0, Math.sin(v.x)).add(v);

        // we have to subdivide first before applying the transformation
        let sqmod  = sq.apply(mod.subdivide(100)).transform(f_wavy);

        draw(sqmod);