Placeholder Image

字幕表 動画を再生する

  • 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

  • German, it capitalized it. [ Laughter ]

  • 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. [Rockintechno 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.

  • And  [ Laughter ]

  • 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

  • and I told myself, all right, now we'll process the actual touches. First I'll get the keys

  • that are sent from the cap connected to the Raspberry Pi to  to this function which is

  • an array of electrodes that are pressed. So, what I would do is have  would parse those

  • pressed keys from the data and then take those and make an array of eight keys. You might

  • be wondering, what if you're just pressing one? You have one pressed key and eight blank

  • ones. Okay. So, to pass  to parse those keys, all I needed to do was loop through each of

  • the electrodes that are pressed and, depending on which index it has, because you probably

  • saw in the picture, I should have one here. You probably saw that it had 12 or so electrodes

  • that you could touch. So, from left to right I just assigned them accordingly and then

  • I was all set. I could return my pressed keys. Next up, to actually turn that into an array

  • of keys and turn that into a key stroke, I would just force it to be 8 in any case and

  • fill the rest with blank ones. Please stop me if I'm going too fast. So, with that, with

  • this program running, I could have it always detect which ones are pressed and it would

  • just log out the key stroke as it would be. And, of course, if there's more than one pressed,

  • then it would take both into account. Because in DDR, I don't know if you know, there are

  • times when you have to press two like this, like that. I'm not going to go much more on

  • that. So, now we'll actually send  now we'll actually take the byte array out of that.

  • Turns out there's a JavaScript function for getting 8 bit unsigned integers. So, you could

  • just call Uint8array from key stroke. All set and nice. And now to send this key stroke

  • to the actual USB interface. Um. I hadn't done this before. So, I did some research

  • and I found out that the actual interface in Linux is interacted by something called

  • a file descriptor. So, what a file descriptor is, just gonna take my cursor out of there.

  • Somebody should have said something  what a file descriptor is any communication Linux

  • does through other devices with any input/output devices is through files. So, a USB device,

  • a computer, a node on a network, or even a Word document, those are all files to Linux

  • so you can send and get data from them. So, I thought, I wonder if there's anything on

  • npm that does this. Lo and behold, there is. I found this Linux device package which let

  • me just open up that USB interface and all I had to do was call device right buffer and

  • I was good to go. Now, you might be wondering, did it work. And I said, well, before we get

  • there, we have to be responsible. When the program ends, I need to close that device.

  • Did it work? Well, let's find out. So, I ran node dance mat.js. I plugged the Raspberry

  • Pi into my laptop. I opened up a text editor, best type of test there is, and look at that.

  • I'm sending A, B and C. I've never been so excited to see these letters.

  • [ Applause ] Now, you might be wondering, Ramon, why did

  • you show us every sordid detail that have? I wanted to show my excitement. I didn't have

  • any experience doing this. I persevered. My wife was very patient with me. And then it

  • worked. And then came the fun part. We could actually start painting. And so, this is a

  • picture from home. We took the paint. We bought a yoga mat at the corner store. We even made

  • it two player compatible. And after a while we cut them up because we found out that dancing

  • so close to each other can cause a few problems. And did it work? Yes. Did we start passing

  • songs with super scores? Eh. You know, we got Ds. But it had been a while since we played.

  • So, then the question was, are we set for life now? And really it depends on how you

  • look at it. So, here's something I learned: Putting paint on a yoga mat and expecting

  • that to stay forever  eh. So, then, you know, we had to reapply some coats of point. We

  • have to modify some things here and there. And we started gathering a what we call a

  • if I could do this over again. Ramon, why didn't you use an Arduino? What is an Arduino?

  • We found out, yes, it's nice to be able to roll up the yoga mat. But maybe a more flat

  • surface would be good for the paint. And we started  and, you know, we also thought about

  • maybe for latency to have physical cables instead of paint. And we started doing some

  • mods like that. I don't myself, but my wife knows how to do it, soldering, and she does

  • it well. You might be thinking, do you think you did it? Yes, of course. Because the important

  • thing is, we learned a lot and we are delighted about it. This picture is from three days

  • ago. [ Applause ]

  • So, I've got a few takeaways for you. I mean, like, you know, if you're not experienced

  • in messing around with hardware, it can look super daunting and you might want to have

  • what is it called? A fire extinguisher close by. But the importance of playing around

  • with stuff is so vital. And it's so much fun. And you learn so much. And here's the important

  • part. If you have an idea, just go for it. You never know if it's gonna work. Thanks,

  • folks. [ Applause ]

  • [ Laughter ]

  • [ Applause ] PARISS: All right. So, we're wrapping up.

  • We're near the end. Our last talk will be coming on soon. You know what's funny? Every

  • time our speaker would come backstage, I would ask them, like, how do you feel? Are you ready?

  • I'm really nervous. And I'm like, me too. Like, I'm nervous. And then they get on here

  • and they're freaking Beyoncé. They're just so confident. I'm like, you liar. But honestly

  • the speakers have been amazing. Give them a round of applause.

  • [ Applause ] And we have one last talk. That will be happening

  • in a few minutes so you can just chill out.

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

字幕と単語

動画の操作 ここで「動画」の調整と「字幕」の表示を設定することができます

B1 中級

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

  • 0 0
    林宜悉 に公開 2021 年 01 月 14 日
動画の中の単語