#union

1fn union(inout self)

The union function combines the current shape in the Sdf2d drawing context with the previously stored shape, resulting in a new shape that encompasses both the current and the stored shapes. This operation is useful for creating complex shapes by combining simpler ones, effectively merging them into a single shape.

#Parameters

• self (inout): A reference to the Sdf2d instance. The function updates the internal shape and old_shape fields of self to represent the union of the shapes.

#Returns

• void: This function does not return a value but modifies the internal state of self to represent the combined shape.

#Example

1fn pixel(self) -> vec4 {
2    // Create an Sdf2d drawing context for the current viewport.
3    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
4
5    // Draw the first circle at position (40.0, 50.0) with a radius of 30.0.
6    sdf.circle(40.0, 50.0, 30.0);
7
8    // Store the current shape for the union operation.
9    sdf.union();
10
11    // Draw the second circle at position (70.0, 50.0) with a radius of 30.0.
12    sdf.circle(70.0, 50.0, 30.0);
13
14    // Combine the stored shape with the current shape using union.
15    sdf.union();
16
17    // Fill the combined shape with a solid red color.
18    sdf.fill(#f00);
19
20    // Return the final color result.
21    return sdf.result;
22}

#Explanation

In this example:

• Create Drawing Context: We initialize an Sdf2d drawing context scaled to the size of the current rectangle (self.rect_size).

• First Shape: Draw a circle centered at (40.0, 50.0) with a radius of 30.0.

• Store Shape: Use sdf.union() to store the current shape in self.old_shape, preparing to combine it with another shape.

• Second Shape: Draw another circle centered at (70.0, 50.0) with the same radius.

• Combine Shapes: Call sdf.union() again to combine the stored shape (self.old_shape) with the current shape (self.shape). The result is a new shape that encompasses both circles.

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

• Return Result: Return sdf.result, which contains the final rendered image showing the union of the two circles.

#Notes

• Shape Composition: The union function allows you to combine shapes by merging their areas, effectively uniting them into a single shape.

• Order of Operations: When combining multiple shapes, you should call sdf.union() after drawing each shape to accumulate them. Each call to sdf.union() updates the internal state to include the new shape.

• Transformation: You can apply transformations like translate, rotate, or scale to manipulate the shapes before combining them.

• Additional Shapes: To combine more shapes, continue the pattern:

  • Draw a new shape.
  • Call sdf.union() to include it in the combined shape.

• Further Effects: After combining shapes, you can apply effects like sdf.glow() or sdf.stroke() to enhance the visual appearance.

• Preserving State: Since sdf.union() modifies the internal state but does not reset it, you can continue to add shapes or apply effects as needed.

#Important Considerations

• Combining Multiple Shapes: Ensure you call sdf.union() after each new shape you want to include in the union.

• Understanding Internal State: The union function updates self.old_shape and self.shape to represent the minimum of the current and stored shapes' signed distance fields, effectively merging them.

• Performance: Be mindful of the number of shapes combined, as complex unions may impact rendering performance.

#Alternative Example with More Shapes

1fn pixel(self) -> vec4 {
2    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
3
4    // Draw and combine multiple circles.
5    sdf.circle(40.0, 50.0, 30.0);
6    sdf.union(); // Store first circle.
7
8    sdf.circle(70.0, 50.0, 30.0);
9    sdf.union(); // Combine second circle.
10
11    sdf.circle(55.0, 80.0, 30.0);
12    sdf.union(); // Combine third circle.
13
14    // Fill the combined shape.
15    sdf.fill(#f00);
16
17    return sdf.result;
18}

In this alternative example:

• We draw three circles and call sdf.union() after each one to include all of them in the final combined shape.