Cluster Your Pixels!

Presented at Brooklyn JS's 1 year anniversary, 2014-11-20.

Imagine pixels as points in 4-dimensional space! Then cluster them, and apply different palettes!

Animated gifs and videos are unfortunately not animated due to pdf... :(

Transcript

1. CLUSTER YOUR PIXELS
2. Drew Petersen Developer at Spotify @KirbySaysHi
3. SPAAAAAAAAAAAAACE
4. SPAAAAAAAAAAAAACE
10. (x,y) = [122,144]
11. (r,g,b,a) = [8,0,0,0] (x,y) = [122,144]
12. Colors (r,g,b,a) are like positions in 4-dimensional space
13. (So we might be able to compute the distance between two colors…)
14. This guy sent me a link (actually my brother) @TheOperatore
15. http://codegolf.stackexchange.com/ questions/33172/american-gothic-in-the- palette-of-mona-lisa-rearrange-the-pixels
16. http://kirbysayshi.com/imgswap-golf/ index.html?source=mona.png&palette=goth.png
17. http://kirbysayshi.com/imgswap-golf/index.html? source=mona.png&palette=scream.png
18. Why so fuzzy?
19. Randomly pick two pixel positions. Swap the pixels in the palette if the distance between the corresponding shape pixel is smaller than the other shape-palette distance
20. SHAPE PALETTE s1 s2 p1 p2
21. s1 p1 var a = distance( , ) var b = distance( , ) s2 p2 if (a < b) swap( , ); p1 p2
22. SHAPE PALETTE s1 s2 p2 p1
23. SHAPE PALETTE s1 s2 p2 p1
24. SHAPE PALETTE s1 s2 p2 p1
25. But I forgot to only swap if all distances were smaller
26. http://kirbysayshi.com/imgswap-golf/index.html? source=mona.png&palette=goth.png&comparison=rgb-distance- only-if-better
27. http://kirbysayshi.com/imgswap-golf/index.html? source=mona.png&palette=scream.png&comparison=rgb-distance- only-if-better
28. https://github.com/ kirbysayshi/imgswap-golf
29. Anecdote: each frame 100000 pixels are being swapped!
30. How? Avoid GC by passing / modifying references instead of returning instances. Basically what you're never supposed to do.
31. function showtime(palette, source, stuff){ // do something stuff[0] = 'a result' stuff[1] = 'another result' swap(palette, source) } var state = [] showtime(p, s, state); assert(state[0] == 'a result')
35. kirbysayshi.com/imgswap-golf/index-pixel- palette.html
36. http://en.wikipedia.org/wiki/ K-means_clustering
37. PLEASE TAKE IT AWAY
38. What does it actually mean?
40. POINTS IN SPAAAAAAAAACE
42. Arbitrary Starting Means
55. CONVERGENCE!
56. But how does that apply to pixels?
57. A pixel is:
58. Four values… 255, 255, 255, 255 r , g , b , a
59. Ah ha! A vector!
60. Which means we can plot colors in four- dimensional space, and cluster them via k-means!
61. And once we have clusters, we can take the pixel indices within those clusters and change their colors…
69. http://kirbysayshi.com/ ncolorpalette/
70. But there's more!
71. http://revisit.link/ http://hub.revisit.link/ by @ednapiranha and many others
74. http://revisit.svs.ncolorpalett.es
75. https://github.com/kirbysayshi/ revisit-ncolorpalette-service
76. https://github.com/progrium/dokku + https://www.digitalocean.com/
77. https://github.com/revisitors/readimage > https://github.com/revisitors/writegif
78. BUT WHY?
79. Fun, mostly.
80. Thank You! @KirbySaysHi http://kirbysayshi.com/ ncolorpalette/
81. Thank You! @KirbySaysHi http://kirbysayshi.com/ ncolorpalette/