[Super Introduction]Hands-on Interactive Content with Hokuyo Sensors and Touchdesigner!

5 min readJul 27, 2021


Basic Technologies for Interactivity

Here’s an article describing the basics of interactivity using the Hokuyo sensor.
Here’s what you can make!

The circle reacts to people’s feet, and it looks like it can fly at any moment!

If we can apply this technology, we can
Sakura no Michi at Sumida Aquarium

(Quote: 1->10 works)
You can make it.

It’s a must-see.

Even installing sensors and projectors!

Of course, I’ve posted a tutorial on Youtube this time too!
This time, we’re not only showing the Touchdesigner screen, but we’re also showing how the projectors are set up, how they’re actually mapped, and even how they’re aligned!
I’m sure you’ll find something useful here!

Video Description

This is just an explanation of the above video, so please watch the video for more details.

Buy Hokuyo sensor

(quate: hokuyo electolicity)
First of all, what is the Hokuyo sensor?
Well, to put it simply

It is a kind of infrared sensor
(You can find them on automatic doors.)
What it can do is to measure the distance from the sensor to a person or object.


from the sensor!
The important thing is that it can measure distance!
I said it twice because it’s important.

And I’ve prepared the purchase link.
(I’m not an affiliate, and you don’t need to buy from these guys at all).

The price is quite high, but if you think you can attract a lot of customers to your novelty, I think it’s a pretty cheap investment!
(Or you can beg your school or company for it.)

Connecting the Hokuyo sensor to a computer

Even if you buy one, you’ll be wondering what you’re going to do with it.
So I found the best article on how to connect the Hokuyo sensor to your computer.

Here it is!

Hokuyo CHOP

One of the great things about Touchdesigner is that it interfaces well with sensors like this.

One proof of this is the Hokuyo CHOP.
Most of the time, if you connect it via Ethernet, it will recognize it.

If you get the yellow “Surprise” mark, try setting your IP address here.
I got the yellow “Surprise” mark too, so I tried this!
And it worked. Nice!

Blob Track CHOP

Blob Track CHOP is used in combination with Hokuyo CHOP.

Seriously, this thing is a god! The developer is awesome! That’s what it does.

What it can do is to return the location of people and things coming into a predetermined area.

The most important parameters are
center(distance from the sensor to the center of the square)
size (height and width of the rectangle)

Other parameters are explained in the video.

Confirmation by projecting with a projector

Now, let’s instantiate the circle SOP with the values from the Hokuyo CHOP.

Then, bring up camera COMP and change the view to perspective -> orthographic.

What’s changed? You say
Yes, it has.
It’s been replaced by parallel projection. Perspective is gone! (Brief)
Override “render TOP” with “rectangle TOP”, put it on the rgb key, and put it into the window comp.
Oh, I feel like Lou Oshima.
If you don’t know what you’re doing!

In that case, what should I do?
That’s right!
Thank you very much.

Please open it with window comp and check it out!

Distortion correction! Correction!

I’m working in a super cheap environment, so the way the projector projects is pretty crappy.
I’m doing this in a super cheap environment, so the projection method is pretty crappy.
But that’s okay!

I can just use Touchdesigner to correct it.
It’s not easy to change the angle of the projector every time.

What I’m using here is the Stoner in the palette.
Just move each point in the Stoner window!
Oh, so easy!

Go for the rectangle with this!
Keep trying!
Don’t give up!

I’ll measure with my hands.

Based on the projected images, survey the area using a measuring tape.
Let’s Ino Tadataka

There are two main points
1. distance between the sensor and the center of the square

The horizontal position of the sensor is much easier to do if you put it in the center.
2. height and width of the square

The units are meters.

Fine tuning

To make the circle fit perfectly, please try the following
・Adjust the y value of the camera.
・Add math CHOP after the blob track CHOP to change the size.
・Adjust Max blobs and Max distance of blob track CHOP.


Finally, when a person enters the room and the circle is attached, it’s done!

You can make as many of these as you like, so try making as many as you can!

Examples of my work

I created an emoemo experience!

I wrote this article in the hope that it will be the basis for many more examples of experiential interactive content in Japan!
I hope we can make it happen together!

See you!




I want to bring a smile to someone's life. Use Touchdesigner.