How to: Play games in your Christmas tree


Welcome to this video about how this gaming
Christmas tree is made.
Before we start with the hardware i would
like to emphasis that you wont need the hardware
to get started.
You can use the virtual renderer, which allows
you to build and test your games before you
have the hardware setup.
If you contribute your games to the codebase,
then for example, I would be play your games
in my Christmas tree.
For the hardware.
I’m using these WS2811 LED strips.
But can also use the really popular WS2812B
LED strips.
I used them before but I did not really like
them because they are extremely bright.
To control the LED strips you are the Teensy
3.2
A single Teensy can control over 8000 LEDs.
And in my Christmas tree I only have 800.
The Teensy comes with an extension board for
ethernet cables.
So I do not have to solder to pins.
But I can just plug in an ethernet cable.
You just plug the Teensy in this Octo board.
Which I’m really pro in.
Let me show you.
[Yep, there we go.]
And now I can just attach ethernet cables.
The game is actually run on the Raspberry
Pi.
And we connect the Raspberry Pi to the Teensy
with a USB.
So they can communicate via Serial.
And we use the ethernet cable, to connect
the Teensy with the LEDs.
Plugging this side in is really easy.
But the other side is a bit more work.
We have to cut open the wire, and we find
four pairs.
We are only going to use the orange one.
And I attached a wire connector on top of
it.
And on the LEDs, for the data wire we also
have this connector.
And let me show you how greatly I can connect
those two together now.
[Ehhhh let me give a second.]
We use the Raspberry Pi power supply obviously
for the Raspberry Pi.
But for the LEDs we need this DC 5 volt power
supply.
So that one goes into the power of the LEDs.
[Yep let me….
Yep…
Not that difficult this part]
Ok I got it
Now all the hardware is connected so we can
lay down the LEDs
as we would like them to be.
For this demo we are going to play Tic Tac
Toe.
To visualize that we have a 3 by 3 matrix.
If I would like to pick this bottom left corner.
Then I want those LEDs to be turned on.
I can see that those LEDs are in there (the
bottom left corner).
But the game does not really know.
The game can’t really SEE this.
So we need to make him see.
And that we can do via the Raspberry Pi Camera.
Or we use a GoPro.
In this example we are going to use the Raspberry
Pi Camera.
So for that we take our Raspberry Pi
and we
make sure that we have Raspbian installed on it.
Because it comes with most of the necessary
software.
And then we just plugin the Raspberry Pi camera
into our Pi.
[Yep, easy peasy]
Now that we have all the hardware setup it
is time to get the code.
Which I hosted on Github.
I will add the link to the description.
You can just download it or as I do, clone
it.
Now if you take a look into those files.
We have a `src` directory.
With the game engine.
Which has the main file that runs the game
engine.
And it also has a default with some configuration
we will see later.
It has the LED controller.
Which contains the code for the Teensy.
And it has some tools, which we will need
to record the positions of the LEDs.
Step one is the recording, then we process
those photos and the third step is actually
no longer needed.
For recording we have a GoPro and a Pi Camera
setup.
And both of them have this `record.py`.
Which actually does the recording.
After the recording we need to process the
photos.
This step is actually figuring out the positions
of the LEDs.
The third one is not really used anymore.
To upload the code to the Teensy we need this
`Teensyduino`.
And for that you just follow the instructions
in the link in the description.
You can use it on whatever system you are
you don’t really need to do this on the Raspberry Pi.
I actually just uploaded it from my Linux
so I installed the Linux version.
But you can obviously also do it from the
Raspberry Pi if you like to.
Teensyduino is an addon on Arduino so you
need to install the Arduino software as well.
Which you can download from their website.
And if you want to do this on the Raspberry
Pi
then you need to download the ARM 32 bits version.
But you can do it on any OS you like.
If you have installed it properly then you
have this Arduino IDE.
And from there we are going to open our LED
controller code.
That is in `led-games`, `src`, `led-controller`
and then `led-controller.ino`
We use only one strip with 50 LEDs.
So we set the `ledsPerStrip` to 50 and the
`strips` to 1.
This code itself does not really do so much,
it just listens to the Serial.
And then it iterates over the data and updates
the proper LED with the proper colors.
When you are satisfied with the code you can
`Verify` which will make sure it compiles.
And this is actually the Teensyduino addon.
Before we push it to the Teensy we need to
set the Port.
And then we can upload it to the Teensy.
If everything worked fine then you would see
this popup with `Reboot OK`.
And now your code is on the Teensy.
Because we are doing the recording with the
Pi Camera
I’m going to connect to my Raspberry Pi.
And there I go to `workspace`, `led-games`.
And then go to `src`, `tools`, `01-recording`.
And in this directory we have the `gopro`
and `pi-camera`.
We go to `pi-camera`.
And here we have the `record.py` and the dependencies.
First we install the dependencies
[Which I already did]
And then we are going to change the `record.py`.
We need to set the Serial Port towards the
Teensy.
It is always this value for me but it could
be something else for you.
We also need to change the amount of LEDs
and this must always match whatever we set
into the Teensy, so that is 50.
The background interval is a feature that
creates new backgrounds.
The background is actually where we compare
the LED photos with.
It could be that the recording takes really
long and that the light in the house or in
the room changes a bit.
Therefor it is safer to create backgrounds
once and a while.
The starting LED index is by default `0` but
you might want to start somewhere else.
And the final configuration is the color.
Which is actually really important.
Because if you set this value really bright,
then it can mess-up the photo too much.
But if you set color too low then it could
be that the camera can’t even see the LED.
So you have to play with the proper color
for your environment.
That is the end of the configuration, we can
save the file.
And now we can run it.
What really happens now is that one led will
be turned on all the time and in the mean
time the Pi Camera will take photos.
This is how it will look like.
This a bit of a weird setup because I laid
down the LEDs flat on the table.
While recording my Christmas tree was actually
easier.
I copied the photos from the Raspberry Pi
back to my computer
because it is way easier to show you.
We now have a directory called `photos` with
in there the background image
and photos for every LED.
Now we go the second phase and that is actually
process those photo
figuring out where are those LEDs.
We go to the second directory.
Again we have requirements which you need
to install.
And we need to modify the file again.
The real change here is the `photo dir` we
need to point it to the directory we received
from the previous step.
This process will create a `pair` and a `view`
file which I will explain a bit later.
We also need to set the start index again.
And the amount of LEDs.
We can rotate the images.
As we can see here my recording was a bit
rotated, it is not really straight.
I wanted it to be from the angle which is
now the left side.
I can rotate all the images so it is in the
proper angle for me.
We are all done so we can run the process.
And this is a thing I forgot.
We do not have OpenCV installed.
You can download OpenCV from the original
website.
Or maybe a pre-build python version works
for you.
I had to compile it myself so I have no clue
of this pre-build version works but you can
try it out.
I installed OpenCV in a virtual environment
so I’m going in there.
And now I’m going to run the `process.py`
again.
This will figure out all the coordinates.
At the end it will also give us some information
like where the pair file is, the view file.
And some boundaries of `x` and `y`.
We need those for the game engine so we are
going to copy those and keep them with us.
Now let see what we have.
We have a `pair` and a `view` file.
The `pair` file contains all the LED IDs and
their X and Y coordinate.
And the `view` file contains just all the
LED IDs.
The process also created a debug directory
where it stored all the photos.
We have here our rotated version of the LED
photo.
And also marked photos which are these.
If you think that the pairing is totally wrong
you can look at the photos to see what the
process concluded.
And maybe you just need to tune the colors
in step `01-recording`.
Lets explain the use of the `view` file.
If we go to the `root` directory and then
`tutorial`.
We actually have a directory `tree-data`.
This is my tree.
There we have two `view` files.
One `view` file with almost all the LEDs.
And a second `view` file with just a few of
them.
These are the LEDs with Christmas balls.
Games like Snake needs two `views`.
Where the Snake is drawn in the first view.
(So only in those LEDs).
And the candy is taking and drawn from the
second view.
Alright now that we have all our information
we can finally update the game engine.
So we go to the `game-engine` directory.
(which is in `src`)
And there we find a `defaults.py` with the
default configuration.
Which we can change and insert our information.
The first configuration is the renderer.
Which can either be `LED` or `PYGAME`, where
`PYGAME` is the virtual version.
Then we have the Serial Port to the Teensy
again.
And here is the `pair` and the `view` file.
Where we just paste our information.
Lets copy-in the `pair` file.
And then the `view` files.
So the game Snake actually needs two `view`
files.
So we are just going to specify the `view`
file twice.
So the game thinks it has two `views`.
And we are going to set the min and max ranges.
I’m subtracting one from the minus and adding
one to the max.
So that I’m really sure that are the LEDs
are in the screen.
Another configuration here is the grid width
and height which you can see as the pixel
amount of pixels.
It is 12 by 12 here.
And again we need to set the total amount
of LEDs.
And this max leds per cell is actually `max
leds per pixel` so to say.
Maybe we have really clusters LEDs then you
can lower this number so not all the LEDs
in that cell will be used.
The max brightness can be a value from 0 to
255.
Putting your LEDs on 255 makes them really
really bright.
So max brightness kinda scales them down.
Now if we run the game engine with the `–help`
flag.
Then we will see that we have a `list` and
`run` command.
The `list` command will just show us the games.
We have Snake, TicTacToe and also Two Player
Snake.
And if I’m not gaming then I mostly put the
tree in `pulse`.
If we activate `run` with the `–help` flag.
Then we will see all those configurations
again.
Which you can overwrite via the command line.
Now lets run Tic Tac Toe but for now lets
run it in the virtual renderer
so we set the renderer to `PYGAME`.
And with pygame we can set the brightness to
really full.
So we have bright red etcetera.
And here we see our pairing data play Tic
Tac Toe.
It is player one’s turn (whom is yellow).
And lets just play the game.
Player two its turn.
So player one is obviously going for the top
line.
Guess what player two is going to do?
Yep he is going to cut player one off.
Player one is going for the left side.
And there player two won!
It is three in a row.
And there we go!
Now lets run it on our real LEDs.
Which will look like this.
So there is our Tic Tac Toe.
I’m going to play it again.
Yellows turn.
So I’m going to take middle again.
I’m not sure but this yellow fellow is not
really good.
[Yeeey] pink won!
Alright that is really cool but what is even
more is cool is to connect your PlayStation
controller, which you put in pair mode like
this.
And then you can connect it as a normal Bluetooth
device.
And now you can play Tic Tac Toe with your
controllers.
Lets see if yellow is going to win this time.
[Mmmm] It does not look like yellow is a good
player.
And pink won again!
Alright so that was Tic Tac Toe on our LEDs.
That is pretty cool.
Thank you for watching this video about how
this Christmas tree is made.
If you have any questions then please just
leave a comment or contact me on Twitter or
whatever.
And hopefully we can make more games together
and play each others creations.
Thank you all for watching!

Leave a Reply

Your email address will not be published. Required fields are marked *