#translate

1fn translate(inout self, x: float, y: float) -> vec2

The translate function applies a translation transformation to the coordinate system of the Sdf2d drawing context. It shifts the origin of the coordinate system by the specified amounts along the x and y axes. This affects all subsequent drawing operations, allowing you to move shapes and paths within the context.

#Parameters

• self (inout): A reference to the Sdf2d instance. The function modifies self.pos in place, updating the coordinate system of the drawing context.

• x (float): The distance to translate along the x-axis. Positive values move the drawing context to the left, negative values move it to the right.

• y (float): The distance to translate along the y-axis. Positive values move the drawing context downward, negative values move it upward.

#Returns

• vec2: The updated position (self.pos) of the drawing context after the translation.

#Example

1fn pixel(self) -> vec4 {
2    // Initialize the Sdf2d drawing context relative to the viewport size.
3    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
4    
5    // Apply translation of 30 units left and 20 units down.
6    sdf.translate(30.0, 20.0);
7    
8    // Draw a rectangle with rounded corners after translation.
9    sdf.box(10.0, 10.0, 80.0, 80.0, 5.0);
10    
11    // Fill the rectangle with red color.
12    sdf.fill(#f00);
13    
14    // Return the final color result.
15    return sdf.result;
16}

#Explanation

In this example:

• Initialize Drawing Context: We create an Sdf2d instance by scaling self.pos by self.rect_size, which represents the size of the viewport.

• Apply Translation: We call sdf.translate(30.0, 20.0) to shift the coordinate system. This moves the origin (0, 0) of the drawing context 30 units to the right and 20 units upward. Note that translation values subtract from self.pos.

• Draw Shape: We draw a rectangle starting at position (10.0, 10.0) with a width and height of 80.0 units and corner radius of 5.0. Because of the translation, this rectangle appears shifted in the output.

• Apply Fill: We fill the rectangle with red color using sdf.fill(#f00).

• Return Result: We return sdf.result, which contains the final rendered color after the drawing operations.

#Notes

• Direction of Translation: The translate function subtracts the given values from the current position (self.pos). This means that positive values of x and y move the drawing context to the left and downward, respectively, relative to the original coordinate system.

• Effect on Subsequent Drawing: All drawing operations after the translation are affected by the coordinate shift. This allows you to position multiple shapes relative to the translated coordinate system.

• Cumulative Transformations: Multiple transformations (e.g., translate, rotate, scale) are cumulative and affect subsequent drawing operations in the order they are applied.

• Return Value: The function returns the updated self.pos, which can be useful if you need to know the new position after translation for calculations.