ImageEffects material

The ImageEffects material performs the same basic operation as a Bitmap material, but also supports the ability to set effects like the alpha value of the texture.

Why not just use this material all the time? Well, it is a little more expensive that a standard Bitmap material. If you just need to show an image as-is, use a bitmap.

Example Links

View example code

Live demo

In this example we set up a series of graphics with an image effects material. Each one has a different effect applied to it:

Tint - Applies a colour tint to the texture, like looking through coloured glass.
Alpha - Changes the transparency of the texture.
Saturation - Changes the saturation of the texture, from full colour to greyscale.
Overlay - Applies a colour overlay to the texture, where the texture has a solid colour applied on, affected by the overlay amount.
Overlay (linear gradient) - As with overlay, but a linear (straight line) gradient between two colours.
Overlay (radial gradient) - As with overlay, but a radial (circular) gradient between two colours.

val material: Material.ImageEffects =
  Assets.assets.junctionboxAlbedoMaterial.toImageEffects

val graphic: Graphic[Material.ImageEffects] =
  Graphic(Rectangle(0, 0, 40, 40), material)
    .withRef(20, 20)

val viewCenter: Point = (Point(550, 400) / 4) + Point(0, -25)

def present(context: Context[Unit], model: Unit): Outcome[SceneUpdateFragment] =
  Outcome(
    SceneUpdateFragment(
      graphic
        .moveTo(viewCenter)
        .moveBy(0, -40)
        .modifyMaterial(_.withTint(RGBA.Red)),
      graphic
        .moveTo(viewCenter)
        .moveBy(-60, -40)
        .modifyMaterial(_.withAlpha(0.5)),
      graphic
        .moveTo(viewCenter)
        .moveBy(-30, -40)
        .modifyMaterial(_.withSaturation(0.0)),
      graphic
        .moveTo(viewCenter)
        .moveBy(30, -40)
        .modifyMaterial(_.withOverlay(Fill.Color(RGBA.Magenta.withAmount(0.75)))),
      graphic
        .moveTo(viewCenter)
        .moveBy(60, -40)
        .modifyMaterial(
          _.withOverlay(
            Fill.LinearGradient(Point.zero, RGBA.Magenta, Point(40), RGBA.Cyan.withAmount(0.5))
          )
        ),
      graphic
        .moveTo(viewCenter)
        .moveBy(-60, 10)
        .modifyMaterial(
          _.withOverlay(
            Fill.RadialGradient(
              Point(20),
              10,
              RGBA.Magenta.withAmount(0.5),
              RGBA.Cyan.withAmount(0.25)
            )
          )
        )
    )
  )