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

Canvas Blur Repeatedly

  1. document.body.style.margin = 0
  2. const canvas = document.body.appendChild(
  3.   document.createElement('canvas')
  4. )
  5. const c = canvas.getContext('2d')
  6.  
  7. function clear() {
  8.   c.fillStyle = 'rgb(95 182 209)'
  9.   c.fillRect(0, 0, innerWidth, innerHeight)
  10. }
  11.  
  12. function resize() {
  13.   canvas.width = innerWidth
  14.   canvas.height = innerHeight
  15.   clear()
  16. }
  17. resize()
  18.  
  19. addEventListener('resize', resize)
  20.  
  21. function loop() {
  22.   const size = Math.min(innerWidth / 2, 
  23.   innerHeight / 2)
  24.   const halfSize = size / 2
  25.  
  26.   c.filter = 'blur(50px)'
  27.   c.fillStyle = 'rgba(0, 0, 0, 0.02)'
  28.   c.fillRect(
  29.     innerWidth / 2 - halfSize, 
  30.     innerHeight / 2 - halfSize,
  31.     size, size)
  32.  
  33.   requestAnimationFrame(loop)
  34. }
  35. loop()

Apply a blur filter to a rectangle over and over again…

Browser support at the time of the post is still lacking – and there are some interesting rendering differences between Chrome and Firefox:

Firefox on left and Chrome on right…

As nice as it would be to be able to use these I don’t recommend it yet. Using a GLSL shader is the way to go for now…

// canvas // filters // javascript

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

Confirm Background Color

  1. const btn = document.body.appendChild(
  2.   document.createElement('button')
  3. )
  4. btn.innerHTML = 'click me'
  5. btn.style.fontSize = '2em'
  6. btn.style.cursor = 'pointer'
  7. btn.addEventListener('click', e => {
  8.   if (confirm('Do you want to change the background color?')) {
  9.     const deg = Math.random() * 360
  10.     document.body.style.backgroundColor = `hsl(${deg}deg, 50%, 50%)`
  11.   }
  12. })

Change background color with a call to confirm

// javascript // ui

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
Older Posts

Recent

Archive

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