# First Scene

Open a window and add a node.

```{raw} html
<a class="example-run-button" href="../demos/tutorials_first_scene.html">▶ Run in browser</a>

```

**Tags:** `beginner` `tutorial`

# First Scene

Your first SimVX scene in under thirty lines. By the end you will have
opened a window, drawn a pulsing circle, and seen the three lifecycle
hooks every node has access to.

## Step 1: Subclass `Node2D`

Every visible thing in SimVX is a node. `Node2D` is the 2D-aware variant:
it knows about `position`, `rotation`, and lets you override `on_draw()`
to issue immediate-mode draw commands.

```python
from simvx.core import Node2D

class FirstScene(Node2D):
    pass
```

## Step 2: Hook into the frame loop

Three hooks fire automatically once the node is in the scene tree:

- `on_ready()`: called once after the node enters the tree. Initialise state here.
- `on_process(dt)`: called every frame with the seconds since the last frame.
- `on_draw(renderer)`: called every frame after `on_process`. Issue draw commands here.

```python
def on_ready(self):
    self.t = 0.0

def on_process(self, dt: float):
    self.t += dt

def on_draw(self, renderer):
    renderer.draw_circle((400, 300), 80, colour=(0.4, 0.8, 1.0, 1.0))
```

## Step 3: Launch it

`App` creates a Vulkan-backed window and runs your scene tree.

```python
from simvx.graphics import App

App(title="First Scene", width=800, height=600).run(FirstScene())
```

## What's next

- Add input handling: see the **Pong** example for input actions and signals.
- Add a textured quad: see the **Sprite** example.
- Try a 3D scene: see the **Rotating Cube** example.


## Source

```{literalinclude} ../../examples/tutorials/first_scene/main.py
:language: python
:linenos:
```