Name: 頑張ればいいんだよ。ダンスマット.jsの話 - Ramón Huidobro - JSConf US 2019 (Just go for it: The story of dance-mat.js - Ramón Huidobro - JSConf US 2019)
Uploaded: 2021-01-14T10:22:12.000Z
Duration: 17 min 18 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

程度の副詞

Just go for it: The story of dance mat.js

Ramon Huidobro PARISS: Who likes tacos? Raise your hand.

様態の副詞

I literally asked that to see who was paying attention. Cool. All right. Okay. But who

here has personal projects? Really? Has ever worked on a personal project? Okay. That's

better. Cool. All right. So, our next speaker will be talking about personal projects and

maintaining them and letting you know that you can do it. You're gonna get stuck but

keep going. Can we give a warm welcome to Ramon Huidobro?

[ Applause ] I said it better backstage, but I got nervous.

RAMON: Hi, everyone, thank you so much for that lovely introduction, and thank you all

for being here today. Before my slides appear, I want to say thank you for being here, JSConf,

thank you for having me. This is my first time ever as a JSConf anywhere in the world.

[ Applause ] This is  thank you. This is mine. So, I'm

just gonna nab it. And  I really like it. All righty. Okay. We're good to go. Hi, everyone,

before we start off, there's a link at the bottom, also in my Twitter, SenorHuidobro,

if you want to follow along for convenience sake. My name is Ramon. I am a freelance software

Dev and teach kids on the side, I live in Vienna, Austria. And you might think, what's

with the picture of the dog, can we see more of the dog, please? Don't worry, I've got

you covered. This is Fiona. This is Fiona, we adopted her about three years ago. And

I love her so much because her  especially because of her eyes. She has these Simpsons

eyes that look in different directions and she says so much with these eyes. My favorite

is this top right photo where she's judging my wife while she eats mango. So, in Chile

Spanish, we have a word to describe Fiona which is regalona. I haven't been able to

find a suitable translation. Tried, put it in, I put in regalona, got it back. I tried

it in German. And in Austria, we speak German. There's a bajillion words, but German being

It in short regalona means spoiled, but you spoil them on purpose and they love you. It's

a whole thing. Anyway, let's talk about rhythm video games. In particular, dancing video

games. Any of you play Just Dance? Can't quite see. I'm gonna say from that one yes that

all of you do. I haven't myself. But what you do is you dance to the rhythm. You do

the little poses and you gets points as you go. So, this is fairly popular. They're still

making them to this day. But when I was a kid, about 20 years ago, there was this other

game called Dance Dance Revolution. Or DDR. [ Applause ]

Nice to see  nice to hear there's a few fans in here. If you're not familiar with DDR as

I'm going to refer to it from now on, as you can see in this very well done GIF is that

this person's pressing the buttons to the rhythm of the music. Now, on screen what you

see is little arrows that come up as the song goes on to tell you when to step on the buttons,

right? And it's a lot of fun. You can see it's a bit older. So, this is from PlayStation,

I think. It's fairly old. But it's a lot of fun. And the music. How do I put this? I'm

gonna show you. Let me just load it up here. [Rockin’ techno music beat thing]

It's something else. By the way, whoever is in charge of the playlist of music today,

whoo, you're really nailing it. So, I used to play this a lot when I was a kid. But a

few years ago I introduced this game to my wife who had never played it before. We were

looking for ways to play it. And we actually found an open source alternative called Step

Mania. Anybody heard of Step Mania? I see a couple hands. Cool. So, Step Mania lets

you load in your own songs and customize it to your own liking. And like I said, it's

fully open source. Like I said, we had the software, we had the music. What about the

controller, you might be wondering? So, in the arcade, the controllers for Dance Dance

Revolution were these big metallic ones. But at home, what you had, especially during the

heyday of DDR were these foam mats. They looked like this. And they're great. They were affordable,

they were about 30 Euros. So, $30, approximately. And they were a lot of fun. But the problem

is that if you use them as much as we did, they kind of wore out after a while. And so,

you started getting used to seeing this screen a lot. So, you couldn't really press the buttons

anymore. So, we looked into metal alternatives. And they do exist. You can buy them. But I

don't know if you saw the price, but it's like for two of them, that's $300. And that's

discounted from $900. This is a lot of bones for, you know, wanting to play some DDR. So,

we didn't really look into it. But then a few years later my wife and I were at this

thing called Maker Faire. Do they have that here? Cool. We were at the Maker Faire in

Vienna and I was introduced into bear conductor paint. Anybody familiar with this? And I learned

about bare conductive paint on the random Facebook videos you scroll through is you

can draw circuits using paint. They had a demo where you can draw lines from a battery

to a lightbulb and created a circuit and it worked which was pretty cool. But what you

can see is it's also capacitive and can send a receptor. In this case, going to a Raspberry

Pi. And you could play a piano using a Raspberry Pi and some paint. Which I thought was cool

and then I thought, hmm m. I could do something with this. And I saw there was a Node.js interface

that you could install on the Raspberry Pi that even had a nice code example. That was

very handy. And then I thought hmm m... I could definitely make something with this.

Then I went back to Step Mania and I saw I could customize the controls. What if I took

a Raspberry Pi, a yoga mat, a some Node.js? Lo and behold, project dance mat was born.

Something to bear in mind, though, this is the first time I had ever worked with anything

hardware related. So, needless to say, I was a little intimidated. So, I sat down with

my wife, how are we going to make this? Very simple, a dance mat, connect to a computer.

The computer thinks, ah ha, this is a keyboard. And handle the button presses as if they were

keyboard strokes. Fantastic. So, I had my little bit of setting up here. They have this

NPM package that I could install, set the thresholds for touching and releasing. That

is how sensitive. Because when something is capacitive, it question detects when your

finger is approaching the paint. You want to mess around with the sensitivity. Great.

We had everything set up except for the big comment that says send data to PC. Which 

again, I like to jump into projects without doing much research. So, I learned that Raspberry

Pis, when you plug them into a computer, the computer doesn't automatically go, oh, that

is USB device. I can take it from here. You might be thinking, Ramon.

[ Laughter ] Did you not research this? And let me remind

you, this is my first time doing a project like this. But okay. I did some searching

around, I talked to some friends and I discovered that you can configure what's called a gadget.

See, a Raspberry Pi, the most common software used on it is Linux. So, I could configure

this Linux kernel to have a little  to  when you connect to a PC tell it, ha ha, I'm

a USB keyboard device. And I found a blog post that let me do all the copy pasting which

is fantastic. I took the copy pasting part  I took the most important part which is, of

course, the serial number, the manufacturer and product. Don't worry about what this does.

What it does in sort is basically set it up so this is a script that when run will set

itself up as a recognizable USB device for the computer to interact with. So, then, okay,

that's one part done. Then I need to actually send data through that USB interface. So,

I went on the USB human interface devices documentation and I downloaded what I found

out was a 96 page PDF. And I made the sound that a basset hound makes when it barks. Woof 

but I stuck with it. And I found out that, in short, when you go to interact with this

USB interface, I need to send a byte array of 8 hexadecimal, that's a code. And I need

to send these. I searched and found a nice GitHub listing of all of the keys. Very cool.

I defined my little constants for left, right, up and down. And I set these up so that when

they're pressed by me, the Raspberry Pi would tell the computer A, B, C and D. This was

so exciting. Just to write this code. So, that got me started. So I defined these constants

字幕リスト動画再生

頑張ればいいんだよ。ダンスマット.jsの話 - Ramón Huidobro - JSConf US 2019 (Just go for it: The story of dance-mat.js - Ramón Huidobro - JSConf US 2019)

stick

rhythm

applause

interact