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

Complementary HSL

  1. const a = document.body.appendChild(document.createElement('div')),
  2.       b = document.body.appendChild(document.createElement('div'));
  3. let degA = degB = 0;
  4.  
  5. const size = {
  6.   width: '100px',
  7.   height: '100px'
  8. };
  9. Object.assign(a.style, size);
  10. Object.assign(b.style, size);
  11.  
  12. function loop() {
  13.   degA += 1;
  14.   degB = degA + 180;
  15.   a.style.background = `hsl(${degA}deg, 100%, 50%)`;
  16.   b.style.background = `hsl(${degB}deg, 100%, 50%)`;
  17.   requestAnimationFrame(loop);
  18. }
  19. loop();

In HSL a hue difference of 180 degrees between two values will create a set of complimentary colors.

// animation // color // css // dom // javascript // tricks // ui

Wiggly Line Canvas

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10. }
  11. addEventListener('resize', resize);
  12. resize();
  13.  
  14. const PAD = 50;
  15. const RAD = 2;
  16. const SPEED = 20;
  17. const TWO_PI = Math.PI * 2;
  18.  
  19. let mode = 'draw';
  20.  
  21. let t = Math.random() * TWO_PI, 
  22.     x = innerWidth / 2, 
  23.     y = innerHeight / 2,
  24.     vx = 0, vy = 0, ta = 0;
  25.  
  26. function loop() {
  27.   for (var i = 0; i < SPEED; i++) {
  28.     t = Math.sin(ta) * TWO_PI;
  29.     vx = RAD * Math.cos(t);
  30.     vy = RAD * Math.sin(t);
  31.     ta += Math.random() * 0.1 - 0.05;
  32.     x += vx;
  33.     y += vy;
  34.  
  35.     if (Math.random() < 0.005) {
  36.       mode = 'no draw';
  37.     } else if (Math.random() < 0.005) {
  38.       mode = 'draw';
  39.     }
  40.  
  41.     if (mode === 'draw') {
  42.       c.fillStyle = 'red';
  43.       c.fillRect(x, y, 2, 2);
  44.     }
  45.  
  46.     if (x < -PAD) {
  47.       x = innerWidth + PAD;
  48.     } else if (x > innerWidth + PAD) {
  49.       x = -PAD;
  50.     }
  51.     if (y < -PAD) {
  52.       y = innerHeight + PAD;
  53.     } else if (y > innerHeight + PAD) {
  54.       y = -PAD;
  55.     }
  56.   }
  57.  
  58.   requestAnimationFrame(loop);
  59. }
  60. loop();

Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.

// animation // canvas // javascript // math // random // tricks

Array Sum Golfed

  1. a = [1, 2, 3, 6, 9];
  2. sum = eval(a.join`+`);
  3. console.log(sum);

Found myself doing something like this a few times… easy golfed array sum. I saw this over at codegolf stackexchange here.

That whole thread is a great. I plan to post more from there in the future.

// codegolf // humor // javascript // math // obfuscation

Canvas ImageData

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const width = 200;
  5. canvas.width = canvas.height = width;
  6.  
  7. const c = canvas.getContext('2d');
  8. const pixels = c.createImageData(canvas.width, canvas.height);
  9. const size = canvas.width * canvas.height;
  10.  
  11. let index = 0, x, y;
  12.  
  13. for (var i = 0; i < size; i++){
  14.   x = i % width;
  15.   y = Math.floor(i / width);
  16.  
  17.   pixels.data[index++] = x;
  18.   pixels.data[index++] = y;
  19.   pixels.data[index++] = width - x;
  20.   pixels.data[index++] = 255;
  21. }
  22. c.putImageData(pixels, 0, 0);

This shows how to set pixel data on an html5 canvas.

// canvas // color // graphics // hex // javascript // math

isPointInPath Canvas

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3. let mouseX = 0, mouseY = 0;
  4.  
  5. canvas.width = 400;
  6. canvas.height = 400;
  7. document.body.appendChild(canvas);
  8. document.body.style.margin = 0;
  9.  
  10. c.fillStyle = 'black';
  11. c.fillRect(0, 0, canvas.width, canvas.height);
  12.  
  13. document.addEventListener('mousemove', e => {
  14.   mouseX = e.clientX;
  15.   mouseY = e.clientY;
  16. });
  17.  
  18. // no scroll on mobile: 
  19. document.addEventListener('touchmove', 
  20.   e => e.preventDefault(), { passive: false });
  21.  
  22. document.addEventListener('touchmove', e => {
  23.   mouseX = e.touches[0].clientX;
  24.   mouseY = e.touches[0].clientY;
  25. });
  26.  
  27. const loop = () => {
  28.   c.fillStyle = 'black';
  29.   c.fillRect(0, 0, canvas.width, canvas.height); 	
  30.   c.lineWidth = 3;
  31.   c.strokeStyle = 'blue';
  32.   c.beginPath();
  33.   c.moveTo(20, 20);
  34.   c.lineTo(110, 20);
  35.   c.lineTo(110, 110);
  36.   c.lineTo(20, 110);
  37.   c.closePath();
  38.  
  39.   if (c.isPointInPath(mouseX, mouseY)) {
  40.     c.strokeStyle = 'white';
  41.     c.fillStyle = 'red';
  42.     c.fill();
  43.   }
  44.   c.stroke();
  45.  
  46.   requestAnimationFrame(loop);
  47. };
  48.  
  49. loop();

See if a point is with a path inside canvas. Take a look at MDN for more info.

// canvas // javascript // scrolling // touchEvents // ui
Older Posts
Newer Posts

Recent

Archive

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