)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Speed Coded Mouse Toy

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. with (b.appendChild(
  5.   Object.assign(d.createElement`canvas`, {
  6.     width: innerWidth,
  7.     height: innerHeight,
  8.   })
  9. ).getContext`2d`) {
  10.   mx = 0
  11.   my = 0
  12.  
  13.   onresize = _ => {
  14.     canvas.width = innerWidth
  15.     canvas.height = innerHeight
  16.   }
  17.  
  18.   onpointermove = e => {
  19.     mx = e.clientX, 
  20.     my = e.clientY
  21.   }
  22.  
  23.   r = 0
  24.   loop = () => {
  25.     save()
  26.     globalCompositeOperation = 'hard-light'
  27.     translate(innerWidth / 2, innerHeight / 2)
  28.  
  29.     rotate(r += .02)
  30.     translate(-innerWidth / 2, -innerHeight / 2)
  31.  
  32.     fillStyle = 'rgba(55, 55, 55, .01)'
  33.     fillRect(0, 0, innerWidth, innerHeight)
  34.  
  35.     fillStyle = 'rgba(116, 196, 221, .02)'
  36.     fillRect(0, my, innerWidth, 20);
  37.  
  38.     fillStyle = 'rgba(255, 255, 255, .02)'
  39.     fillRect(mx, 0, 20, innerHeight);
  40.  
  41.     fillStyle = 'rgba(0, 0, 0, .03)'
  42.     fillRect(0, innerHeight - my, innerWidth, 20);
  43.  
  44.     fillStyle = 'rgba(116, 196, 221, .02)'
  45.     fillRect(innerWidth - mx, 0, 20, innerHeight);
  46.     restore()
  47.     requestAnimationFrame(loop)
  48.   }
  49.   loop()
  50. }

Speed coded mouse toy…

// canvas // codegolf // globals // graphics // hacks // speedcoding

Polar Plots

  1. const Pnt = (x, y, p = { x, y }) => (
  2.   p.add = o => (p.x += o.x, p.y += o.y, p), p
  3. );
  4. Pnt.polar = (rad, t) => Pnt(rad * Math.cos(t), rad * Math.sin(t));
  5.  
  6. const pnts = {};
  7. let index = -1;
  8. const polar = (inc, rad) => {
  9.   index++;
  10.   if (!pnts[index]) pnts[index] = 0;
  11.   return Pnt.polar(rad, (pnts[index] += inc));
  12. };
  13.  
  14. let d = document;
  15. let b = d.body;
  16. with (b.appendChild(
  17.   Object.assign(d.createElement`canvas`, {
  18.     width: 600,
  19.     height: 500,
  20.   })
  21. ).getContext`2d`) {
  22.   canvas.style.transformOrigin = "0 0";
  23.   canvas.style.transform = "scale(.6)";
  24.  
  25.   let p0 = Pnt(80, 100);
  26.   let p1 = Pnt(270, 100);
  27.   let p2 = Pnt(480, 40);
  28.   let p3 = Pnt(170, 180);
  29.   let p4 = Pnt(430, 300);
  30.  
  31.   fillStyle = "black";
  32.  
  33.   function loop() {
  34.     for (let i = 0; i < 20; i++) {
  35.       index = -1;
  36.  
  37.       p0.add(polar(0.2, 4).add(polar(-0.4, 2).add(polar(0.05, 1))));
  38.       fillRect(p0.x, p0.y, 1, 1);
  39.  
  40.       p1.add(
  41.         polar(0.1, 2).add(
  42.           polar(-0.2, 2).add(polar(0.03, 1).add(polar(-0.01, 0.5)))
  43.         )
  44.       );
  45.       fillRect(p1.x, p1.y, 1, 1);
  46.  
  47.       p2.add(polar(0.08, 3).add(polar(-0.2, -12).add(polar(2, 10))));
  48.       fillRect(p2.x, p2.y, 1, 1);
  49.  
  50.       p3.add(polar(0.08, 7).add(polar(-0.2, -12).add(polar(2, 11))));
  51.       fillRect(p3.x, p3.y, 1, 1);
  52.  
  53.       p4 = p4.add(polar(0.025, 2).add(polar(-0.05, 1)));
  54.       fillRect(p4.x, p4.y, 1, 1);
  55.     }
  56.     requestAnimationFrame(loop);
  57.   }
  58.  
  59.   loop();
  60. }

Some polar plots…

// canvas // javascript // math // speed-coded // speedcoding

Plot Implicit Equation

  1. let canvas = document.body.appendChild(
  2.   Object.assign(document.createElement('canvas'), {
  3.     width: 200,
  4.     height: 200
  5.   })
  6. );
  7.  
  8. let c = canvas.getContext("2d"),
  9.   pixels = c.createImageData(canvas.width, canvas.height),
  10.   size = canvas.width * canvas.height,
  11.   width = canvas.width,
  12.   index = 0,
  13.   x, y,
  14.   a = 1,
  15.   col,
  16.   scale = 0.01;
  17.  
  18. for (var i = 0; i < size; i++) {
  19.   x = i % width;
  20.   y = parseInt(i / width);
  21.   x -= 110;
  22.   y -= 100;
  23.   x *= scale;
  24.   y *= scale;
  25.   // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html
  26.   col = (x * x + y * y) * (y * y + x * (x + a));
  27.  
  28.   if (col >= 4 * a * x * y * y) {
  29.     col = 155;
  30.   }
  31.  
  32.   pixels.data[index++] = col;
  33.   pixels.data[index++] = col;
  34.   pixels.data[index++] = col;
  35.   pixels.data[index++] = 255;
  36. }
  37.  
  38. c.putImageData(pixels, 0, 0);

Plot an implicit equation on a canvas.

// canvas // javascript // math // tricks

Superformula Texture

  1. const TWO_PI = Math.PI * 2;
  2. const SIDE = 8;
  3. const N = 30;
  4. const M = 20;
  5.  
  6. document.body.style.margin = 0;
  7.  
  8. const c = document.body
  9.   .appendChild(document.createElement('canvas'))
  10.   .getContext('2d');
  11.  
  12. onresize = () => {
  13.   c.canvas.width = innerWidth;
  14.   c.canvas.height = innerHeight;
  15.  
  16.   draw();
  17. };
  18. onresize();
  19.  
  20. function draw() {
  21.   c.fillStyle = '#000';
  22.   c.fillRect(0, 0, innerWidth, innerHeight);
  23.  
  24.   const sx = innerWidth / SIDE;
  25.   const sy = innerHeight / SIDE;
  26.  
  27.   for (let i = 0; i <= SIDE; i++) {
  28.     for (let j = 0; j <= SIDE; j++) {
  29.       const n1 = ~~(Math.random() * N);
  30.       const n2 = ~~(Math.random() * N);
  31.       const n3 = ~~(Math.random() * N);
  32.       const m = ~~(Math.random() * Math.random() * M);
  33.       let a = 1;
  34.       let b = 1;
  35.       if (Math.random() < 0.5) {
  36.         a = ~~(Math.random() * 8) - 4;
  37.       }
  38.       if (Math.random() < 0.5) {
  39.         b = ~~(Math.random() * 8) - 4;
  40.       }
  41.       superShape(a, b, m, n1, n2, n3, { x: i * sx, y: j * sy }, 40);
  42.     }
  43.   }
  44. }
  45.  
  46. // Superformula (equations from):
  47. // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
  48. // http://en.wikipedia.org/wiki/Superformula
  49. function superShape(a, b, m, n1, n2, n3, pnt, scale) {
  50.   let r = 0;
  51.   let p = 0;
  52.   let xp = 0;
  53.   let yp = 0;
  54.   while (p <= TWO_PI) {
  55.     var ang = (m * p) / 4;
  56.     with (Math) {
  57.       r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1);
  58.       xp = r * cos(p);
  59.       yp = r * sin(p);
  60.     }
  61.     p += 0.01;
  62.     c.fillStyle = '#fff';
  63.     c.fillRect(pnt.x + xp * scale, pnt.y + yp * scale, 1, 1);
  64.   }
  65. }

The Superformula created by Johan Gielis read more about it here… This looks better when expanded to full size on the Snippet Zone editor…

// canvas // graphics // javascript // math

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.

// canvas // graphics // javascript // math // oldschool
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}