2D Lighting

coloured point lights and shadow-casting occluders.

▶ Run in browser

Tags: 2d

A 2D scene is lit by adding light nodes to it. Each PointLight2D adds its colour times energy over a disc of radius range around its position, fading toward the edge along a curve whose steepness is falloff (1.0 is linear, higher is more concentrated). WorldEnvironment.ambient_light_2d is the light everything gets anyway; here it is a dark blue floor, so the lights and their shadows read clearly.

Two more settings reshape a light’s disc:

• inner_radius carves a flat full-brightness core, so the blue light is a solid disc that only starts to fade 90 pixels out. Its energy also pulses over time.

• falloff_gradient replaces the curve with a 1-D intensity table, sampled from the centre (first entry) to the edge (last). The gold light’s table is a fading cosine, which turns it into concentric rings.

A LightOccluder2D is a polygon that blocks light. It casts a shadow from every light with shadow_enabled set, softened at the edge by the light’s shadow_softness (0 is a hard edge). An occluder has no look of its own, so each wall here is a Polygon2D carrying an occluder of the same shape as its child. The red and green lights ride a spinning Node2D pivot, which carries them round in circles, and the white light follows the pointer.

Move the mouse or drag a finger to move the white light. The buttons, or the keys 1, 2 and 3, switch the red, green and blue lights on and off, and S switches every light’s shadows.

Source

# /// simvx
# web = { width = 1024, height = 768 }
# ///
"""2D Lighting: coloured point lights and shadow-casting occluders.

A 2D scene is lit by adding light nodes to it. Each ``PointLight2D`` adds its
``colour`` times ``energy`` over a disc of radius ``range`` around its position,
fading toward the edge along a curve whose steepness is ``falloff`` (1.0 is linear,
higher is more concentrated). ``WorldEnvironment.ambient_light_2d`` is the light
everything gets anyway; here it is a dark blue floor, so the lights and their
shadows read clearly.

Two more settings reshape a light's disc:

- ``inner_radius`` carves a flat full-brightness core, so the blue light is a solid
  disc that only starts to fade 90 pixels out. Its energy also pulses over time.
- ``falloff_gradient`` replaces the curve with a 1-D intensity table, sampled from
  the centre (first entry) to the edge (last). The gold light's table is a fading
  cosine, which turns it into concentric rings.

A ``LightOccluder2D`` is a polygon that blocks light. It casts a shadow from every
light with ``shadow_enabled`` set, softened at the edge by the light's
``shadow_softness`` (0 is a hard edge). An occluder has no look of its own, so each
wall here is a ``Polygon2D`` carrying an occluder of the same shape as its child.
The red and green lights ride a spinning ``Node2D`` pivot, which carries them round
in circles, and the white light follows the pointer.

Move the mouse or drag a finger to move the white light. The buttons, or the keys
1, 2 and 3, switch the red, green and blue lights on and off, and S switches every
light's shadows.
"""

import math

import numpy as np

from simvx.core import (
    Anchor,
    Button,
    CanvasLayer,
    Input,
    Key,
    LightOccluder2D,
    Node2D,
    PointLight2D,
    Polygon2D,
    Property,
    VBoxContainer,
    WorldEnvironment,
)
from simvx.graphics import App

FLOOR = (0.06, 0.06, 0.1, 1.0)
WALL = (0.24, 0.24, 0.31, 1.0)
SQUARE = [(-30, -30), (30, -30), (30, 30), (-30, 30)]
SMALL_SQUARE = [(-20, -20), (20, -20), (20, 20), (-20, 20)]
BAR = [(-80, -15), (80, -15), (80, 15), (-80, 15)]
TRIANGLE = [(-40, 30), (0, -40), (40, 30)]


class Lamp(PointLight2D):
    """A point light that marks its position with a dot while it is on."""

    def on_draw(self, renderer):
        if self.enabled:
            renderer.circle((0, 0), 5, fill=self.colour)


class Pivot(Node2D):
    """Turns at ``speed`` radians per second, carrying its children round its origin."""

    speed = Property(1.0)

    def on_update(self, dt):
        self.rotation += self.speed * dt


def wall(shape, rotation=0.0) -> Polygon2D:
    """A visible wall whose occluder child casts the shadow."""
    body = Polygon2D(polygon=shape, colour=WALL, rotation=rotation)
    body.add_child(LightOccluder2D(polygon=shape))
    return body


class LightingDemo(Node2D):
    input_context = {"red": [Key.KEY_1], "green": [Key.KEY_2], "blue": [Key.KEY_3], "shadows": [Key.S]}

    def on_ready(self):
        self.add_child(WorldEnvironment(ambient_light_2d=(0.06, 0.06, 0.09, 1.0)))

        red_pivot = self.add_child(Pivot(speed=0.8))
        green_pivot = self.add_child(Pivot(speed=-1.2, rotation=2.0))
        self.lights = {
            "red": red_pivot.add_child(
                Lamp(position=(120, 0), colour=(1.0, 0.2, 0.1), energy=1.8, range=300.0, falloff=1.2)
            ),
            "green": green_pivot.add_child(
                Lamp(position=(100, 0), colour=(0.1, 1.0, 0.3), energy=1.5, range=280.0, falloff=1.5)
            ),
            "blue": self.add_child(
                Lamp(colour=(0.2, 0.4, 1.0), energy=2.0, range=350.0, falloff=0.8, inner_radius=90.0)
            ),
        }
        ramp = np.linspace(0.0, 1.0, 64, dtype=np.float32)
        rings = (0.5 + 0.5 * np.cos(ramp * math.tau * 3.0)) * (1.0 - ramp)
        gold = self.add_child(Lamp(colour=(1.0, 0.85, 0.4), energy=1.6, range=220.0, falloff_gradient=rings))
        self.pointer_light = self.add_child(Lamp(energy=1.2, range=250.0, falloff=1.5))
        for light in self.find_all(Lamp):
            light.shadow_enabled = True

        # Each node's position as a fraction of the window, applied every frame so the scene follows a resize.
        self.layout = [
            (red_pivot, 0.3, 0.4),
            (green_pivot, 0.7, 0.4),
            (self.lights["blue"], 0.5, 0.7),
            (gold, 0.85, 0.25),
            (self.add_child(wall(SQUARE)), 0.5, 0.45),
            (self.add_child(wall(BAR, rotation=math.radians(30))), 0.25, 0.5),
            (self.add_child(wall(TRIANGLE)), 0.75, 0.6),
            (self.add_child(wall(BAR)), 0.5, 0.2),
        ]
        for i, tilt in enumerate((-12, 17, -5, 9)):
            self.layout.append((self.add_child(wall(SMALL_SQUARE, rotation=math.radians(tilt))), 0.2 + 0.2 * i, 0.8))

        # Example help overlay: not part of the technique shown.
        buttons = self.add_child(CanvasLayer()).add_child(VBoxContainer(anchor=Anchor.TOP_LEFT, inset=16))
        self.toggles = {
            name: buttons.add_child(Button(action=name, text=f"{name.capitalize()} light", checked=True))
            for name in self.lights
        }
        self.toggles["shadows"] = buttons.add_child(Button(action="shadows", text="Shadows", checked=True))

    def on_update(self, dt):
        w, h = self.viewport_size
        for node, fx, fy in self.layout:
            node.position = (w * fx, h * fy)
        self.pointer_light.position = Input.mouse_position
        self.lights["blue"].energy = 1.5 + 0.5 * math.sin(self.tree.now * 3.0)

        for name, button in self.toggles.items():
            if Input.just_pressed(name):
                button.checked = not button.checked
                if name == "shadows":
                    for light in self.find_all(Lamp):
                        light.shadow_enabled = button.checked
                else:
                    self.lights[name].enabled = button.checked

    def on_draw(self, renderer):
        # The lights brighten what is drawn, so the floor gives them a surface to land on.
        renderer.rect((0, 0), self.viewport_size, fill=FLOOR)


if __name__ == "__main__":
    App(title="2D Lighting", width=1024, height=768).run(LightingDemo())