)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

### Rotate Point Around Point (Golfed)

1. `  rot = (`
2. `    cx, cy, X, Y, ang,`
3. `    cos = Math.cos(-ang),`
4. `    sin = Math.sin(-ang),`
5. `    x = cos * (X - cx) + sin * (Y - cy) + cx,`
6. `    y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })`

Rotate one point around another… I like to use something like this when speed-coding and golfing…

### Perlin Noise on JavaScript Canvas

1. `// IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.`
2. `const p = [];`
3. `const permutation = [151,160,137,91,90,15,`
4. `131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,`
5. `190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,`
6. `88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,`
7. `77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,`
8. `102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,`
9. `135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,`
10. `5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,`
11. `223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,`
12. `129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,`
13. `251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,`
14. `49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,`
15. `138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180];`
16. ` `
17. `for (let i = 0; i < 256 ; i++) `
18. `  p[256+i] = p[i] = permutation[i]; `
19. ` `
20. `function noise(x, y, z) {`
21. `  const X = Math.floor(x) & 255,                  `
22. `        Y = Math.floor(y) & 255,                  `
23. `        Z = Math.floor(z) & 255;`
24. `  x -= Math.floor(x);                                `
25. `  y -= Math.floor(y);                               `
26. `  z -= Math.floor(z);`
27. ` `
28. `  const u = fade(x),                               `
29. `        v = fade(y),                                `
30. `        w = fade(z);`
31. `  const A = p[X  ]+Y, AA = p[A]+Z, AB = p[A+1]+Z,      `
32. `      B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z;      `
33. ` `
34. `  return lerp(w, lerp(v, lerp(u, grad(p[AA  ], x  , y  , z   ),  `
35. `                                  grad(p[BA  ], x-1, y  , z   )), `
36. `                          lerp(u, grad(p[AB  ], x  , y-1, z   ),   `
37. `                                  grad(p[BB  ], x-1, y-1, z   ))), `
38. `                  lerp(v, lerp(u, grad(p[AA+1], x  , y  , z-1 ),   `
39. `                                  grad(p[BA+1], x-1, y  , z-1 )),  `
40. `                          lerp(u, grad(p[AB+1], x  , y-1, z-1 ),`
41. `                                  grad(p[BB+1], x-1, y-1, z-1 ))));`
42. `}`
43. `function fade(t) { `
44. `  return t * t * t * (t * (t * 6 - 15) + 10); `
45. `}`
46. `function lerp(t, a, b) { `
47. `  return a + t * (b - a); `
48. `}`
49. `function grad(hash, x, y, z) {`
50. `  const h = hash & 15;                      `
51. `  const u = h<8 ? x : y,                 `
52. `        v = h<4 ? y : h==12||h==14 ? x : z;`
53. `  return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);`
54. `}`
55. ` `
56. `const canvas = document.body.appendChild(document.createElement('canvas'));`
57. `const c = canvas.getContext('2d');`
58. `canvas.width = canvas.height = 200;`
59. ` `
60. `c.fillStyle = 'black';`
61. `c.fillRect(0, 0, canvas.width, canvas.height);`
62. ` `
63. `const pix = c.createImageData(canvas.width, canvas.height);`
64. ` `
65. `const freq = 1 / 20;`
66. `let inc = 0;`
67. `let z = 0;`
68. ` `
69. `function loop() {`
70. `  z += 0.02;`
71. `  inc = 0;`
72. `  for (var y = 0; y < canvas.height; y++) {`
73. `    for (var x = 0; x < canvas.width; x++) {`
74. `      var col = parseInt(Math.abs(noise(x * freq, y * freq, z)) * 500);`
75. `      pix.data[inc++] = col;`
76. `      pix.data[inc++] = col;`
77. `      pix.data[inc++] = col;`
78. `      pix.data[inc++] = 255;`
79. `    }`
80. `  }`
81. ` `
82. `  c.putImageData(pix, 0, 0);`
83. `  window.requestAnimationFrame(loop);`
84. `}`
85. `loop();`

Perlin noise (created by Ken Perlin).

Years ago I grabbed the noise function from here I think….

This shows how to do perlin noise on an html5 canvas. If you need a more performant one for animation and/or larger images – a glsl shader is the way to go.

### Super Simple Seeded Random

1. `let _seed = 1234567;`
2. ` `
3. `// Deterministic pseudo-random float in the interval [ 0, 1 ]`
4. `function seededRandom( s ) {`
5. `  if ( s !== undefined ) _seed = s % 2147483647;`
6. ` `
7. `  // Park-Miller algorithm`
8. `  _seed = _seed * 16807 % 2147483647;`
9. `  return ( _seed - 1 ) / 2147483646;`
10. `}`

Straight from the THREE.js source code – a fun and simple seeded random. The best libraries are always filled with gems like this…

If I were going to use this I would do a couple things out of pure preference:

1. `let seed = 1234567;`
2. ` `
3. `const setSeed = newSeed => seed = newSeed`
4. `function seededRand() {`
5. `  // Park-Miller algorithm`
6. `  seed *= 16807 % 0x7fffffff;`
7. `  return (seed - 1) / 0x7fffffff;`
8. `}`
9. ` `
10. `// try it out:`
11. ` `
12. `console.log('one', seededRand());`
13. `console.log('two', seededRand());`
14. `console.log('three', seededRand());`
15. ` `
16. `seed = 9999`
17. `console.log('one new seed', seededRand());`
18. `console.log('one new seed', seededRand());`
19. ` `
20. `seed = 1234567;`
21. `console.log('one old seed', seededRand());`