Weird Attractors A glitch by obscure variable names Shuhei Kagawa

No content

webgl-workshop

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)

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

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

Demo

Suddenly became interesting when I added color

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

Demo

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

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

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

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

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