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

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

Oscillating Canvas Wave

  1. const c = document.body
  2.   .appendChild(document.createElement('canvas'))
  3.   .getContext('2d');
  4.  
  5. Object.assign(document.body.style, {
  6.   margin: 0,
  7.   height: '100%'
  8. });
  9.  
  10. Object.assign(c.canvas.style, {
  11.   position: 'absolute',
  12.   left: 0,
  13.   top: 0,
  14.   width: '100%',
  15.   height: '100%'
  16. });
  17.  
  18. let t = 0;
  19.  
  20. function resize() {
  21.   c.canvas.width = innerWidth * 2;
  22.   c.canvas.height = innerHeight * 2;
  23.   draw();
  24. }
  25. window.addEventListener('resize', resize);
  26. resize();
  27.  
  28. function draw() {
  29.   const {
  30.     canvas: { width, height }
  31.   } = c;
  32.  
  33.   c.fillStyle = 'rgba(155, 155, 155, .4)';
  34.   c.fillRect(0, 0, width, height);
  35.   c.fillStyle = '#000';
  36.  
  37.   let x = innerWidth;
  38.   let y = 0;
  39.  
  40.   t += 0.05;
  41.   for (let i = 0; i < innerHeight; i++) {
  42.     x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));
  43.     y += 2;
  44.     c.fillRect(x, y, 100, 1);
  45.   }
  46. }
  47.  
  48. function loop() {
  49.   draw();
  50.   window.requestAnimationFrame(loop);
  51. }
  52. loop();

Speed coded oscillating wave on canvas… Looks better in fullscreen.

// animation // canvas // javascript // speed-coded
Older Posts
Newer Posts

Recent

Archive

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