---
title: Quad
description: "A simple rectangle (quad) builder for 2D rendering. Produces a Mesh with position (vec2) and uv (vec2) per-vertex."
category: geometry
categoryLabel: Geometry
---

import { Code, Tabs, TabItem, Aside } from "@astrojs/starlight/components";

## Description

A simple rectangle (quad) builder for 2D rendering.
Produces a Mesh with position (vec2) and uv (vec2) per-vertex.



## Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
use fragmentcolor::Quad;

let quad = Quad::new([-0.5, -0.5], [0.5, 0.5]);

_ = quad;
`}
lang="rust" meta="collapse={5-5}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`
import { Quad } from "fragmentcolor";

const quad = new Quad([-0.5, -0.5], [0.5, 0.5]);

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`
from fragmentcolor import Quad

quad = Quad([-0.5, -0.5], [0.5, 0.5])

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>


## Methods


---

### Quad::new()

Create a quad from two corners (min.xy, max.xy) in clip-space coordinates.

- Position layout: @location(0) vec2`vec2<f32>`
- UV layout: @location(1) vec2`vec2<f32>`

#### Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
use fragmentcolor::Quad;

let quad = Quad::new([-0.5, -0.5], [0.5, 0.5]);

_ = quad;
`}
lang="rust" meta="collapse={5-5}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`
import { Quad } from "fragmentcolor";

const quad = new Quad([-0.5, -0.5], [0.5, 0.5]);

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`
from fragmentcolor import Quad

quad = Quad([-0.5, -0.5], [0.5, 0.5])

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>


---

### Quad::get_mesh()

Gets the Mesh built by this Quad.

#### Example

<Tabs>

<TabItem label="Rust">
<Code
code={`
use fragmentcolor::{Quad, Mesh};

let quad = Quad::new([-0.5, -0.5], [0.5, 0.5]);
let mesh: Mesh = quad.get_mesh();

_ = mesh;
`}
lang="rust" meta="collapse={6-6}"
/>

</TabItem>

<TabItem label="JavaScript">
<Code
code={`
import { Quad, Mesh } from "fragmentcolor";

const quad = new Quad([-0.5, -0.5], [0.5, 0.5]);
const mesh = quad.getMesh();

`}
lang="js"
/>

</TabItem>

<TabItem label="Python">
<Code
code={`
from fragmentcolor import Quad, Mesh

quad = Quad([-0.5, -0.5], [0.5, 0.5])
mesh = quad.get_mesh()

`}
lang="python"
/>

</TabItem>

<TabItem label="Swift">
<Aside type="caution" title="Work in progress">Swift bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Swift placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

<TabItem label="Kotlin">
<Aside type="caution" title="Work in progress">Kotlin/Android bindings are not yet available; implementation is in the works.</Aside>
<Code
code={`
// Kotlin placeholder: bindings WIP

`}
lang="text"
/>

</TabItem>

</Tabs>
