On devfest on air I saw Charlie Gerard presentation "Look mum no hands - Mind control in JavaScript CC" about "mind control" in JS. It's really inspires me to get understand what is three.js, how it works like and made by myself smth with it.

I really like twitch as a platform, it was about to be a part of my life for a very long time, and then, after becoming a programmer, I decided to make smth with twitch to love my job.

Also, it maybe the biggest thing I did and in really short time. And sometimes it was seems hard to continue and don't give up, however I get really cool support from my friends and even Charlie.(but I worked alone. Not because I like to do it, or I don't like work in team, just seems to me it's easier to solve it by myself, then find teammates. Most of my programming friends don't like to hack for joy resources, they like more serious things, like banks, web hostings, providers, etc.)

What it does

Mostly this code isn't what I want to show. This code just provide a verity of my idea. This project make changes in 3d scenes on client side, by twitch chat command. However, a sample wasn't my target. My plane was about to prove by these samples, that it's possible, to create communication between client view, developer server, and AWS servers. So it makes possible to create some kind of view/game engine or framework, which can be called as tmree or twree js, that combines a cool stuff for fast creating samples like this one for people, that have no knowledge about three js, regulars expressions, websockets, and maybe even express and databases.

So basically idea is engine, like pug js or jade, that will be really short and provide awesome features to a developer, to make easy connection between three js, developer server, and twitch chat. Basically there are already a lot of libraries upper three js, that provide a fast creation of figures, weapons, and it's possible to convert from 3dmax and other programs. And so, when developer will use this tools, he can concentrate on game design and chat features much-much more, than right now.

I really hope to see, one day, twitch plays become independent platform, because it's really cool idea even for 2-4 viewers, it makes a new communication between users.

How I built it

That was really a long way. At first, I decided to see graphic ideas at action. I tried really a lot 3.js functions just to see how it works. It takes from me probably 3 days as every day I spend at least 5 hours. Then I decided to go further, as I started to share my scenes via express. It takes probably 1-2 day of design and built it. Then in 3 days I made fully working tmi app, but there was still a problem with 3js, I won't able to use it anyhow. I wasn't understanding tmi.js well, so I didn't knew what is web sockets. So i just tried to send some info to client via ejs, but it won't work ofc. So i just learned web sockets, and I made a simple working examples after almost rewriting everything in my first week and already made video
First video from first week (alpha)
After it, I started to solve the problems of spam. I don't wanted to make possible spam decide the action, so I made modules of calculating date and learned DynamoDB to make my app 3 level, so it will not use server for DB. And also I worked a lot for changing concept, designing platform, and making 2 more samples. So it was already the start of my university semester, so I had to go with notebook to university, developers meetups and other things and write code from it. That slowed my work really hard. Second from 2nd week (beta)
However, on 3rd week I found a good time to finish all needed functional, as changing channel name, anti spam (my bot was spamming a lot), one web socket connection to client (before it was 3 different websocket, I found it cool as examples, but it was crushing a lot, on second video you can see) and record my main video. Now i'm watching heroku logs and writing this devpost on last week.

Challenges I ran into

I made a web app on express, that was sending the HTMLs by requests, and then I made some 3d scenes via three.js, however I wasn't knew how I can make my plans work, I had just my ideas. So after, I connect a tmi.js witch is use AWS cluster in connection, that I add a DynamoDB to make 3-level app, that use DB server, without using my server memory and RAM, so it's securing a normal usage of chat, so it will be possible for play. There are literals, that provide a timeout in seconds for using twitch plays commands, so it can easily configure by a user via websockets, because different streamers has a different chat activities.

I had to solve a lot of questions by myself. I didn't have that deep knowledge of full stack development, like I get after it. I had to learn really fast how to work with AWS dynamoDB, what is websocket, and how to use it, made some awesome structures, that completely change the subjects after simple events. Had to learn a lot, how to realize my ideas. I tried a lot to make it look good as architecture. I learned a lot of three js.

Accomplishments that I'm proud of

Every day I wrote a TODO list, and i really thought, I won't do something from it, I sort it by how hard I need it. However, every single point I wrote, I made. Some problems solved by time, some by library, some by knowledge or my own solutions. I'm very proud of easily making such logic, to make a web server with kinda cool design, that people, as they say really like to play. I'm proud of completing this challenge, and be able to make some participation in international event. Even writing this much of text on English isn't seems easy task for guys as young as me in Russia.

What I learned

In this challenge I learned a lot of skills, and there is a list :
2.web sockets,
3.dat gui,
4.stats js, combinations,
6.some 3d modeling features,
7.more git skills:
more understanding of:
a.client server structure,
c.node js,
d.industrial design algorithms,
f. npm
g. JavaScript OOP..

What's next for Tmree

It's gonna be written in concept page, some concepts for future scenes. The project needs sessions for sure. And about ideology, it needs realization.

Share this project: