Skip to main content
Platform
Language

Boolean Operations

You can use four different boolean operations on blocks to combine them into unique shapes. These operations are:

  • 'Union': adds all the blocks' shapes into one
  • 'Difference': removes from the bottom-most block the shapes of the other blocks overlapping with it
  • 'Intersection': keeps only the overlapping parts of all the blocks' shapes
  • 'XOR': removes the overlapping parts of all the block's shapes

When combining blocks with 'Union', 'Intersection' or 'XOR', the resulting block's fill will be a duplicate of the top-most block's fill. When combining blocks with 'Difference', the resulting block will be a duplicate of the bottom-most block's fill.

The combined blocks will be destroyed.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub

Setup#

This example uses the headless CreativeEngine. See the Setup article for a detailed guide. To get started right away, you can also access the block API within a running CE.SDK instance via cesdk.engine.block. Check out the APIs Overview to see that illustrated in more detail.

Combining three circles together#

We create three circles and arrange in a recognizable pattern. Combing them with 'Union' result in a single block with a unique shape. The result will inherit the top-most block's fill, in this case circle3's fill.

To create a special effect of text punched out from an image, we create an image and a text. We ensure that the image is at the bottom as that is the base block from which we want to remove shapes. The result will be a block with the size, shape and fill of the image but with a hole in it in the shape of the removed text.