Playing with Twitter API

This was the second part of a talk that was presented during an official event for the University of Perugia. It was part of a series of seminars held for exchange students from Hong Kong.
It was about rendering real-time tweets (read from a websocket) inside canvases in a fun way.

Transcript

1. PLAYING WITH TWITTER API TIME TO HAVE FUN WITH CANVASES Created by / Bart Merenda @bartmerenda
2. HELLO THERE! My name is Bart. I am a full-stack web developer. I work for Evonove and...
3. ACTUALLY My coworker already explained you everything Let's cut to the chase!
4. SO.. WHAT DO WE DO WITH THOSE HASHTAGS? We could just ignore them and go play League of Legends We could elaborate some statistical data out of it We could show boring charts or... Turn them into balls and move them around the screen!
5. I BET YOU ALREADY GUESSED THE ANSWER HINT: it's not 42 it's the balls ofcourse
6. OK THEN, LET'S GO AND WRITE SOME CODE But first... let's refresh our mind on... VECTORS I know what you are thinking...
7. NO! GOD PLEASE NOOOO!
8. "I THOUGHT THE FUN PART WAS ABOUT TO BEGIN AND YOU SHOW ME BORING THEORETICAL STUFF?" "YOU BETRAYED US!"
9. THEORY BEFORE PRACTICE In order to move things around we have to do it!
10. WHAT IS A VECTOR? An object with both a magnitude (length) and a direction
11. WHY DO WE NEED THEM? We can use them to represent movements or to represent a point in a plane (position vector)
12. BASIC VECTOR 'CLASS' f u n c t i o n V e c t o r 2 D ( x , y ) { t h i s . x = x | | 0 ; t h i s . y = y | | 0 ; }
13. OPERATIONS ON VECTORS Addition: used to move a position vector v1 by the amount and direction specified by v2
14. IMPLEMENTATION V e c t o r 2 D . p r o t o t y p e . a d d = f u n c t i o n ( v e c t o r ) { t h i s . x + = v e c t o r . x ; t h i s . y + = v e c t o r . y ; }
15. OPERATIONS ON VECTORS Subtraction: used to obtain the direction vector to get from one point to another
16. IMPLEMENTATION V e c t o r 2 D . p r o t o t y p e . m i n u s = f u n c t i o n ( v e c t o r ) { r e t u r n n e w V e c t o r 2 D ( t h i s . x - v e c t o r . x , t h i s . y - v e c t o r . y ) ; }
17. OPERATIONS ON VECTORS Multiplication with a scalar: used to scale a vector's length
18. IMPLEMENTATION V e c t o r 2 D . p r o t o t y p e . s c a l e = f u n c t i o n ( s c a l a r ) { t h i s . x * = s c a l a r ; t h i s . y * = s c a l a r ; }
19. VECTOR MAGNITUDE What is the vector's length?
20. IMPLEMENTATION V e c t o r 2 D . p r o t o t y p e . l e n g t h = f u n c t i o n ( ) { r e t u r n M a t h . s q r t ( t h i s . x * t h i s . x + t h i s . y * t h i s . y ) ; } YES, IT'S PITAGORA'S FORMULA.
21. OPERATIONS ON VECTORS Normalization: scale the vector so that it has length 1
22. IMPLEMENTATION V e c t o r 2 D . p r o t o t y p e . n o r m a l i z e = f u n c t i o n ( ) { v a r l e n g t h = t h i s . l e n g t h ( ) ; t h i s . x / = l e n g t h ; t h i s . y / = l e n g t h ; } QUESTION: CAN WE IMPROVE THIS FUNCTION?
23. BALL 'CLASS' f u n c t i o n B a l l ( c o l o r , x , y ) { t h i s . c o l o r = c o l o r ; t h i s . x = x ; t h i s . y = y ; t h i s . w e i g h t = 1 ; / / h o w b i g i t s h o u l d b e } QUESTION: CAN WE IMPROVE THIS CLASS?
24. BALL 'CLASS' V2 f u n c t i o n B a l l ( c o l o r , x , y ) { V e c t o r 2 D . c a l l ( t h i s , x , y ) ; t h i s . c o l o r = c o l o r ; t h i s . w e i g h t = 1 ; } B a l l . p r o t o t y p e = n e w V e c t o r 2 D ( ) ; B a l l . p r o t o t y p e . c o n s t r u c t o r = B a l l ;
25. Javascript
26. "I wanna see some balls on the screen!" Ok, but first we are going to need to prepare some html page Add this into the body of your html page < c a n v a s i d = " m y C a n v a s " w i d t h = " 6 0 0 " h e i g h t = " 6 0 0 " > < / c a n v a s >
27. The artist Now that we have our little canvas we can draw! B a l l . p r o t o t y p e . d r a w = f u n c t i o n ( c o n t e x t ) { c o n t e x t . b e g i n P a t h ( ) ; c o n t e x t . a r c ( t h i s . x , t h i s . y , t h i s . w e i g h t / 1 0 + 1 0 , 0 , 2 * M a t h . P I , f a l s e c o n t e x t . f i l l S t y l e = t h i s . c o l o r ; c o n t e x t . f i l l ( ) ; c o n t e x t . l i n e W i d t h = 3 ; c o n t e x t . s t r o k e S t y l e = ' # 0 0 3 3 0 0 ' ; c o n t e x t . s t r o k e ( ) ; } ; v a r c a n v a s = d o c u m e n t . g e t E l e m e n t B y I d ( ' m y C a n v a s ' ) ; v a r c o n t e x t = c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; v a r b a l l = n e w B a l l ( ' o r a n g e ' , 5 , 5 ) ; b a l l . d r a w ( c o n t e x t ) ;
28. RESULT
29. A WISE MAN ONCE SAID... In your life you must never stand still. You have to move, and move, and move. I guess it's time to make those balls move around!
30. WE ONLY DREW ONCE? To move the ball around we have to update the ball position and draw it repeatedly in a loop. We will use the same approach used inside videogames.
31. Movements f u n c t i o n l o o p ( ) { l o o p B o d y ( ) ; w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( l o o p ) ; } f u n c t i o n l o o p B o d y ( ) { / / u p d a t e b a l l ' s p o s i t i o n b a l l . m o v e ( ) ; / / s p o i l e r ! ! / / c l e a r t h e c a n v a s c o n t e x t . c l e a r R e c t ( 0 , 0 , c a n v a s . w i d t h , c a n v a s . h e i g h t ) ; b a l l . d r a w ( c o n t e x t ) ; } l o o p ( ) ;
32. Ball class v3 f u n c t i o n B a l l ( c o l o r , x , y , d e s t i n a t i o n ) { V e c t o r 2 D . c a l l ( t h i s , x , y ) ; t h i s . c o l o r = c o l o r ; t h i s . w e i g h t = 1 ; t h i s . s p e e d = 5 ; / / t h i s i s t h e n e w p a r t ! t h i s . d e s t i n a t i o n = d e s t i n a t i o n ; / / e h i , i ' m n e w t o o ! }
33. Movements B a l l . p r o t o t y p e . m o v e = f u n c t i o n ( ) { / / i f b a l l h a s n o d e s t i n a t i o n i f ( ! t h i s . d e s t i n a t i o n ) { / / n o t h i n g t o d o h e r e r e t u r n ; } v a r v e c t = t h i s . d e s t i n a t i o n . m i n u s ( t h i s ) ; / / l a s t m o v e m e n t i f ( v e c t . l e n g t h ( ) < t h i s . s p e e d ) { t h i s . d e s t i n a t i o n = n u l l ; r e t u r n ; } v e c t . n o r m a l i z e ( ) ;
34. Let's create our first moving ball! / / b e f o r e t h e m a i n l o o p v a r d e s t i n a t i o n = n e w V e c t o r 2 D ( 1 5 , 2 0 0 ) ; v a r b a l l = n e w B a l l ( ' o r a n g e ' , 1 5 , 1 5 , d e s t i n a t i o n ) ;
35. RESULT
36. IT WORKS!!
37. A WISE MAN ONCE SAID... You have to get the best out of what you have. What do we have? A websocket flowing with realtime hashtags What are we going to do with it? Spawn a ball for each different tweet!
38. WEBSOCKETS Every talk has some parts that are hard to understand. This is one of them. How do u connect to a websocket? Are you ready? You sure?
39. v a r w s = n e w W e b S o c k e t ( ' w s : / / l o c a l h o s t : 8 0 8 0 / w s ' ) ; How do i read the hashtags? v a r b a l l s = [ ] ; w s . o n m e s s a g e = f u n c t i o n ( e v e n t ) { b a l l s . p u s h ( n e w B a l l ( ' o r a n g e ' , 1 5 , 1 5 , n e w V e c t o r 2 D ( M a t h . r a n d o m ( ) * c a n v a } ;
40. MAIN LOOP V2 We have to adapt our loop so it moves and draws every ball inside the balls array. f u n c t i o n l o o p B o d y ( ) { / / u p d a t e b a l l s ' n e x t p o s i t i o n b a l l s . f o r E a c h ( f u n c t i o n ( b a l l ) { b a l l . m o v e ( ) ; } ) ; / / d r a w t h e m ! c o n t e x t . c l e a r R e c t ( 0 , 0 , c a n v a s . w i d t h , c a n v a s . h e i g h t ) ; b a l l s . f o r E a c h ( f u n c t i o n ( b a l l ) { b a l l . d r a w ( c o n t e x t ) ; } ) ; }
41. RESULT
42. WHAT NOW? We could: Give balls different colors? Make all the balls born from the same hashtag go into a big 'hashtag ball' Make those 'hashtag balls' consume the balls that go into them Make those 'hashtag balls' become bigger for each ball they consume But...
43. A WISE MAN ONCE SAID... In life, the biggest rewards come from your own work and labor. So I am not showing you how to do that, so you can get the best reward. It's an exercise for you!
44. RESULT
45. THANK YOU!