Weird Attractors

A glitch by obscure variable names.

Demo: http://shuheikagawa.com/attractors/
Code: https://github.com/shuhei/attractors

Transcript

1. Weird Attractors
   A glitch by obscure variable names
   Shuhei Kagawa
   

   View Slide

2. View Slide

3. webgl-workshop
   

   View Slide

4. Strange Attractors
   x' = x * sin(a * x) + cos(b * y)
   y' = y * sin(c * y) + cos(d * z)
   z' = z * sin(e * z) + cos(f * x)
   

   View Slide

5. x' = x * sin(a * x) + cos(b * y)
   y' = y * sin(c * y) + cos(d * z)
   z' = z * sin(e * z) + cos(f * x)
   

   View Slide

6. function calc(vertices, iterations, a, b, c, d, e, f) {
   // variable declarations
   // ...
   for (var i = 0; i < iterations; i++) {
   xNew = x * Math.sin(a * x) + Math.cos(b * y);
   yNew = y * Math.sin(c * y) + Math.cos(d * z);
   zNew = z * Math.sin(e * z) + Math.cos(f * x);
   x = xNew;
   y = yNew;
   z = zNew;
   vertices[i * 3] = x;
   vertices[i * 3 + 1] = y;
   vertices[i * 3 + 2] = z;
   }
   }
   Code
   

   View Slide

7. Demo
   

   View Slide

8. Suddenly became interesting
   when I added color
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. Demo
    

    View Slide

20. function calc(vertices, iterations, a, b, c, d, e, f) {
    // variable declarations
    // ...
    for (var i = 0; i < iterations; i++) {
    xNew = x * Math.sin(a * x) + Math.cos(b * y);
    yNew = y * Math.sin(c * y) + Math.cos(d * z);
    zNew = z * Math.sin(e * z) + Math.cos(f * x);
    x = xNew;
    y = yNew;
    z = zNew;
    vertices[i * 3] = x;
    vertices[i * 3 + 1] = y;
    vertices[i * 3 + 2] = z;
    }
    }
    Before
    

    View Slide

21. function calc(vertices, iterations, a, b, c, d, e, f) {
    // variable declarations
    for (var i = 0; i < iterations; i++) {
    xNew = x * Math.sin(a * x) + Math.cos(b * y);
    yNew = y * Math.sin(c * y) + Math.cos(d * z);
    zNew = z * Math.sin(e * z) + Math.cos(f * x);
    x = xNew;
    y = yNew;
    z = zNew;
    r = /* snip */;
    g = /* snip */;
    b = /* snip */;
    vertices[i * 6] = x;
    vertices[i * 6 + 1] = y;
    vertices[i * 6 + 2] = z;
    vertices[i * 6 + 3] = r;
    vertices[i * 6 + 4] = g;
    vertices[i * 6 + 5] = b;
    }
    }
    Adding color...
    

    View Slide

22. Obscure variable names
    // NG
    p = 123;
    a = 2;
    t = p * a;
    // OK
    price = 123;
    amount = 2;
    total = price * amount;
    

    View Slide

23. 'use strict';
    const b = 10;
    b = 123;
    console.log(b); // 10
    Use const
    

    View Slide

24. Thanks!
    • shuheikagawa.com
    • Twitter @shuheikagawa
    • GitHub @shuhei
    

    View Slide