'Pattern Painter': My first crank-only 'game'
Tags: gamedev, beginners, playdate, pulp
Published: 2023-02-09 17:42:36

## My mission
- Make a game
- That only uses the crank
- And paints the screen
- One random tile at a time
- As determined by the rotation of the crank

How hard could this be, right?

### The `event` members
> In every `event`, its `aa` and `ra` members will be set to the current absolute angle and the amount of change since the last frame of the crank in degrees (relative angle).

So, in the `crank` event, I can do this:
```
on crank do
  absAngle = event.aa
  relAngle = event.ra
end
```

- `event.aa` will be a value between 0 and 360
- `event.ra` will be a value between -360 and 360, though likely closer to the middle third of that range

How could I see this to confirm?

### Using `draw` and `label` to display the values
I want to display the `aa` and `ra` values on the room.

So, I write this in the `player` script:
```
on draw do
  label "{event.aa}" at 0,0
  label "{event.ra}" at 0,1
end
```

And I see this in the browser simulator:
![Displaying angles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcmywosasrgzmp6y9a42.png)

The top number is the absolute angle.
The bottom number is the relative angle - amount changed since the last frame, which is 0.

Great!

How do I swap a tile at a valid coordinate based on the relative angle?

### Swapping tiles based on crank rotation
I confirmed I can capture the crank's rotation.

Now I need to use it to swap all the tiles.

#### Approach 1: Downward staircase
- I wrote the code below
- It guarantees that `x` and `y` are each positive numbers between 0 and 24 or 0 and 14
- Sadly, `x` and `y` are the same from 0 to 14
- And then `y` is always `14` and `x` is 14 to 24
- Thus, a downward staircase

```
on draw do
  x = event.ra
  x = floor x
  if x<0 then
    x *= -1
  end
  if x>24 then
    x = 24
  end
  y = event.ra
  y = floor y
  if y<0 then
    y *= -1
  end
  if y>14 then
    y = 14
  end
  tell x,y to
    swap "black"
  end
  label "{x},{y}" at 0,14
end
```

The resulting tiled room:
![Downward staircase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dso7m6dh25gd3hdskers.png)

#### Approach #2: Chickenpox
- I removed all of the conditionals setting `x` and `y`
- I generate random positive numbers when the crank is turned
- I only update a tile when the crank is turned

```
on draw do
  change = event.ra
  if change!=0 then
    tell x,y to
      swap "black"
    end
  end
  label "{x},{y}" at 0,14
end

on crank do
  x = random 0,24
  y = random 0,14
end
```

This is what the tiled room looks like now:
![Chickenpox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmo3scuqhabgf8gms4co.png)

### Swapping for a specific tile
I can swap random tiles with a `black` tile.

I want to swap tiles with one of several other tiles.

#### Approach #1: add x and y
- `x` will be 0-24
- `y` will be 0-14
- The sum will be 0-38
- If I make tiles named `tile0` thru `tile38`, then I can perform a swap using text interpolation, like `"tile{sum}"`

At least I hope!

My updated code:
```
on draw do
  change = event.ra
  if change!=0 then
    tell x,y to
      sum = x
      sum += y
      swap "tile {sum}"
    end
  end
  label "{x},{y}" at 0,14
end

on crank do
  x = random 0,24
  y = random 0,14
end
```

Knowing that `sum` will be a number between 0 and 38, I made 38 tiles:
![Unique tiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ad6df4vn0o94ma55ohf.png)

The tiled room after rotating the crank for a while:
![Crazy pattern room](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qn8ft09n4xxvg4snsyb.png)

It works! Very cool!

What now?
- Try to update each tile so that something more recognizable appears?
- Or just leave it like this...and see what my son thinks?

## Mission: accomplished
- I made a game
- That only uses the crank
- And paints the screen
- One random tile at a time
- As determined by the rotation of the crank

It wasn't that hard.

It just took some experimentation in Pulp.

And now I'm excited to do something more!