---
title: 100% Pen Rendering
impact: HIGH
---

# 100% Pen Rendering Best Practices

Use this rule when a scene is rendered entirely with `pen` blocks every frame.

## Core Rule

Wrap one frame of simulation + draw into a custom block and run it with
`warp = true` ("run without screen refresh").

This avoids intermediate redraws and reduces per-frame overhead.

## Recommended Pattern

1. Define a `1step` procedure with `defineProcedure(..., true)`.
2. Put all frame logic inside the procedure:
   - input handling
   - state updates
   - `eraseAll()`
   - all `pen` drawing commands
3. In `whenFlagClicked -> forever`, call that procedure via `callProcedure`.
4. Pass `warp = true` to `callProcedure` as well.

## Example

```ts
import {
  callProcedure,
  defineProcedure,
  forever,
  procedureLabel,
  whenFlagClicked,
} from 'hikkaku/blocks'

const stepProcCode = '1step'

sprite.run(() => {
  defineProcedure([procedureLabel(stepProcCode)], () => {
    // input + update + eraseAll + draw all lines/shapes
  }, true)

  whenFlagClicked(() => {
    forever(() => {
      callProcedure(stepProcCode, [], {}, true)
    })
  })
})
```

## Notes

- Keep `pen` style setup (`setPenSizeTo`, `setPenColorTo`) outside the frame loop
  unless it must change every frame.
- Prefer variables for mutable state; avoid JS runtime logic in `run()` handlers.
- Do not split one frame into many custom blocks unless profiling shows it helps.
