Weird Attractors

Weird Attractors

A glitch by obscure variable names.

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

Ca0ab6e450f894e06652ee257df9d647?s=128

Shuhei Kagawa

March 18, 2016
Tweet

Transcript

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

  2. None
  3. webgl-workshop

  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)
  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)
  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
  7. Demo

  8. Suddenly became interesting when I added color

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. Demo

  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
  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...
  22. Obscure variable names // NG p = 123; a =

    2; t = p * a; // OK price = 123; amount = 2; total = price * amount;
  23. 'use strict'; const b = 10; b = 123; console.log(b);

    // 10 Use const
  24. Thanks! • shuheikagawa.com • Twitter @shuheikagawa • GitHub @shuhei