arrow

arrow(x, y, rotation, length, shaft, head, [head_shape="arrow"], [tail=0], [tail_shape="arrow"], [position=false], [draw=true], [stroke], [fill], [weight])

Draw an arrow with customizable head and tail shapes.

Syntaxe

arrow(x=100, y=100, rotation=0, length=120, shaft=30, head=60, head_shape="diamond", tail=20, tail_shape="hexagon");

Arguments

Full example

var heads = arrowshapes_list();


canvas(width=1200, height=150*(heads.length));
load_text_default(12);


var axstart = 70;
var ax = axstart;
var ay = 50;
var asize = 40;
var alen = 120;
var ashaft = 20;

var astepy = 60;
var astepx = alen+20;

for (var i = 0; i<heads.length; i++) {
    fill(randcolor());
    arrow(
        x=ax, y=ay, rotation=0, 
        length=alen, shaft=ashaft, 
        position=false, 
        head=asize, head_shape=heads[i]
    );
    ax += astepx;

    arrow(
        x=ax, y=ay, rotation=0, 
        length=alen, shaft=ashaft, 
        position=false, 
        head=0, 
        tail=asize, 
        tail_shape=heads[i]
    );
    ax += astepx;

    arrow(
        x=ax, y=ay, rotation=0, 
        length=alen, shaft=ashaft, 
        position=false, 
        head=asize, head_shape=heads[i],
        tail=asize, tail_shape=heads[i]
    );

    text(heads[i], ax+90, ay);

    ay += astepy;
    ax = axstart;
}

coord_scale(0.75);



var numArrows = 6;
var radius = 18;
var cx = 950;
var cy = 200;
var len = 150;


for (var h = 0; h<heads.length; h++) {
    for (var i = 0; i < numArrows; i++) {
        var angle = (TWO_PI / numArrows) * i;
        var x = cx + cos(angle) * radius;
        var y = cy + sin(angle) * radius;
        var rotation = angle + PI;
        var t = 0;
        if (i%2==0) {
            t=40;
        }
        arrow(
            x, y, rotation, 
            length=len, shaft=20, 
            head=40, 
            head_shape=heads[h],
            tail=t,
            tail_shape=heads[h],
            position=true, fill="#FFC107"
        );

        var textRadius = radius*3 + len;
        var tx = cx + cos(angle) * textRadius;
        var ty = cy + sin(angle) * textRadius;
        text(round(rotation, 2), tx, ty, ax=MIDDLE, ay=MIDDLE);
    }
    if (h%2==0) {
        cx += radius*2 + len*2.5;
    } else {
        cx -= radius*2 + len*2.5;
        cy += radius*2 + len*2.1;
    }
}


radius = -40;
cx = 350;
cy = 800;
len = 250;

var merged = [];
numArrows=8;

for (var h = 0; h<numArrows; h++) {
        var angle = (TWO_PI / numArrows) * h;
        var x = cx + cos(angle) * radius;
        var y = cy + sin(angle) * radius;
        var rotation = angle + PI;
        var a = arrow(
            x, y, rotation, 
            length=len, shaft=20, 
            head=80, 
            head_shape="circle",
            tail=80,
            tail_shape="circle",
            position=true, 
            draw=false
        );
        if (merged.length == 0) {
            merged = a;
        } else {
            merged = bool_combine(merged, a);
        }
}
polygon(merged, fill="#263238");

cy = 550 ;
var head = 80;
var xx = 300;
var sp = len-head ; 
merged = [];

var col = 0;

def makeArrow(x, y, rotation) {
    return arrow(
        x, y, rotation,
        length=len, shaft=20,
        head=head, head_shape="hexagon",
        tail=head, tail_shape="hexagon",
        position=true, fill="#FF6F00", stroke="transparent"
    );
}

makeArrow(xx, cy, 0);
makeArrow(xx + sp, cy, 0);
makeArrow(xx + sp * 2, cy, 0);

var rightX = xx + sp * 2 - head / 2;
makeArrow(rightX, cy - head / 2, -HALF_PI);
makeArrow(rightX, cy + sp - head / 2, -HALF_PI);
makeArrow(rightX, cy + sp * 2 - head / 2, -HALF_PI);

var bottomY = cy + sp * 3;
makeArrow(xx + sp * 2 - head - sp, bottomY, PI);
makeArrow(xx + sp - head - sp, bottomY, PI);
makeArrow(xx - head - sp, bottomY, PI);

var leftX = xx - sp - head/2;
makeArrow(leftX, bottomY + head/2, HALF_PI);
makeArrow(leftX, bottomY + head/2 - sp, HALF_PI);
makeArrow(leftX, bottomY + head/2 - sp * 2, HALF_PI);

load_text_default(16);

text("You can overlap / merge the arrows", leftX, bottomY+head/3*2);



var p = arrow(x=100, y=100, rotation=0, length=120, shaft=30, head=60, position=true, draw=false);
console(p); // [-20, 85, 40, 85, 40, 70, 100, 100, 40, 130, 40, 115, -20, 115]


save("arrow.png");