dweet player

Audiovisual sequencer for tweet-sized JavaScript effects

Transcript

1. dweet player Audiovisual sequencer for tweet-sized JavaScript effects Ates Goral / Toronto Hack && Tell / Oct. 17, 2017
2. @atesgoral magnetiq.com | link github.com/atesgoral | link
3. Myplanet | link
4. Previously...
5. Doorbell Ringer | link
6. “Code golf”
8. Golfing is a community effort
9. Some JavaScript golfing communities CodeGolf: https://codegolf.tk/ - friendlier for entry-level golfing jS1k: http://js1k.com/ - next round coming up! • https://atesgoral.github.io/bd1k/ • http://js1k.com/2017-magic/demo/2827 Slack: http://register.jsgolf.club - come hang out with golfers! reddit: https://www.reddit.com/r/codegolf/ StackExchange: https://codegolf.stackexchange.com/
10. 140 What can you do with 140 characters in JavaScript?
11. First(?) there was...
12. 140byt.es (some company now)
13. Archive: https://aishikaty.github.io/140bytes/
14. Byte saving techniques https://github.com/jed/140bytes/wiki/Byte-saving-techniques Math.floor(a/2) // before a>>1 // after i=i||0;i++ // before i=-~i // after
15. Then there was...
16. dwitter.net | link
17. c.width=1920;for(i=16;i--;)x.ellipse(1e3+300*S(t+i*.1),500+50 *C(t+i*.1),160*S(-i*.5)+160,50*S(i*.1)+5,1.6+.5*S(t*.5),9.5,0 ,6.3);x.stroke(); 139/140 by New_Core | link
18. c.width|=0;for(n=200;n-=1/64;x.fillRect(n%3*666,n*5,h=8-k,h)) for(r=C(t*3),i=S(t*4),k=28;--k/r;i=j)j=2*r*i+1-n/99,r=r*r-i*i +1-n%3 128/140 by p01 | link
19. for(d=256;--d;)for(X=-32;++X<32;x.fillRect(960+X*8e3/d,100+7e 4/d-h,120,9))x.fillStyle=R(h=(C(a=d/9+t*6)+C(X/9+a/3))*35,g=h +C(X^d)*6+90,g/.8) 140/140 by recursive | link
20. W=c.width=255;for(i=9<<12;a=i&W,b=i>>8,n=b-45,m=a-99,i--;x.fi llRect(a,b,A=1/(((t+a/n)%2)^b/n),A))n*=(B=(W*S(t*29+n/5)+m*m+ n*n)/5e3)<1?C(B):1 140/140 by sigveseb | link
21. dweet runtime • c - canvas • x - 2D context • t - time • S - Math.sin • C - Math.cos • R - RGB colour utility
22. It involves: • Golfing know-how • Math • Algorithms • Creativity • Perseverance
23. Visuals without audio
25. Audio adds so much!
27. So I made...
28. dweetplayer.net
29. First pick a nice dweet https://www.dwitter.net/d/3252 137/140 by cantelope
30. Then find some cool music Free Music Archive: http://freemusicarchive.org/ • Electronic: IDM • Electronic: Dubstep • Electronic: Chiptune • etc. Copy the track detail page URL. http://freemusicarchive.org/music/Pierlo/Olivetti_Prodest/05_San_Diego_Cruisin Or just a URL to any MP3 file (but beware of licensing issues!)
31. Then go to dweet player The URL format is: /demo/v1/.../.../… Where: • the first … is for the loader dweet ID - using * picks a random one • the second … is for a comma-separated list of dweet IDs • and the third … is for the audio track URL https://dweetplayer.net/demo/v1/*/3252/http://freemusicarchive.org/music/Pierlo/Oli vetti_Prodest/05_San_Diego_Cruisin
32. Beat detection source → analyzer → script processor → destination source → delay → gain → destination beat = root mean square (RMS) of FFT bins / running average of RMS > threshold
33. But it’s just some audio + some visuals
34. Need to make visuals dance to audio!
35. Time warping • Suffix the dweet id with t to “rush” time to the beat • Suffix the dweet id with T to “bounce” time to the beat https://dweetplayer.net/demo/v1/*/3307~20t10,3307~8T80/http://www.metronomeb ot.com/iPhoneClickTracks/MetronomeBotBasicClickTrack120.mp3
36. Scene transitions • @ - exact seconds • ~ - approximate seconds (align to next beat) • ! - exact frames
37. Flash to beat • b - flash to black • w - flash to white
38. Mirror image • h - horizontal mirror (at given location) • v - vertical mirror (at given location)
39. Zoom • z - zoom (at given amount)
40. Continuity • = - continue from last frame
41. Planned • S - distort sine function with FFT bins • C - distort cosine function with FFT bins Tweet ideas to @atesgoral
42. Work-in-progress demo Scene transitions are not timed well yet :( https://dweetplayer.net/demo/v1/3097/261~7,637~3,637!1h6,637!1h7,637!1h8,637!1h 9,637!1h10,93!5,1357b,838~10t3,2030~10T,2873~15t,2220~8b,1025~10z,977,977h=, 977v=,309~8w,1944t2h,1944t2v/http://freemusicarchive.org/music/Boss_Bass/Love _For_Everyone_Everywhere/08_-_Boss_Bass_-_Extreme_Bass_Terror
43. Default demo Again, scene transitions are not timed well yet :( https://dweetplayer.net/
44. Your demo here Please tweet me your finished products: @atesgoral
45. Info and source code https://github.com/atesgoral/dweet-player Behind the scenes: • Scrapes dwitter.net pages for dweet meta + source • Reads meta from FMA (via API) and MP3 ID3 • Aggressive caching of meta + audio • Per-dweet runtime (sandboxing) • Pure-CSS icons! Wow! • Plain old jQuery + Handlebars! Yay! • Node.js on Heroku, fronted by Cloudflare
46. Thanks!