quad

Shape #shape #quad

quad([points], [x1], [y1], [x2], [y2], [x3], [y3], [x4], [y4], [stroke], [fill], [weight])

Draw a quadrilateral (four-sided polygon)

Syntaxe

quad(x1=20, y1=50, x2=80, y2=30, x3=80, y3=70, x4=20, y4=120, stroke="#000000", fill="#FFA000", weight=4)
quad(points=[20,50, 80,30, 80,70, 20,120], stroke="#000000", fill="#FFA000", weight=4)

Arguments

Name	Required	Default	Description
`points`	-	-	List of points [x1,y1, x2,y2, x3,y3, x4,y4]
`x1`	-	-	x-coordinate of the first point
`y1`	-	-	y-coordinate of the first point
`x2`	-	-	x-coordinate of the second point
`y2`	-	-	y-coordinate of the second point
`x3`	-	-	x-coordinate of the third point
`y3`	-	-	y-coordinate of the third point
`x4`	-	-	x-coordinate of the fourth point
`y4`	-	-	y-coordinate of the fourth point
`stroke`	-	-	Stroke color
`fill`	-	-	Fill color
`weight`	-	-	Stroke weight (thickness)

Full example

var palette =["#f2eb8a", "#fed000", "#fc8405", "#ed361a", "#e2f0f3",
								"#b3dce0", "#4464a1", "#203051", "#ffc5c7", "#f398c3", 
								"#cf3895", "#6d358a", "#06b4b0", "#4b8a5f"];

canvas(800,800,  "#1b1c16");



var steps = 30  ;
for (var i = 0; i < width(); i+=steps) {		
    stroke( palette[ i % palette.length ]); 
    quad(
        0, height() - i,
        i, 0,
        width(), i,
        width() - i, height(),
        fill="transparent"
    );
}

coord_center();

stroke(palette[0]);

quad(x1=-20, y1=50, x2=-80, y2=30, x3=-80, y3=70, x4=-20, y4=120);

quad([20,-50, 80,-30, 80,-70, 20,-120]);

quad(20,50, 80,30, 80,70, 20,120);





save("quad.png");