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

Get the milliseconds

  1. console.log(+new Date());
  2. console.log(Date.now());

At some point I got in the habit of doing +new Date(). Not entirely sure why, Date.now() is the clear choice. I guess maybe Date.now() is newer…

confirmed… it is new, doesn’t work in much older browsers…

// javascript // speed-coded // tricks

Gravity Dots

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. b.style.background = 'black'
  5. r = (v = 1) => Math.random() * v
  6.  
  7. with(
  8.   b.appendChild(
  9.     d.createElement`canvas`
  10.   ).getContext`2d`) {
  11.  
  12.   onresize = () => {
  13.     canvas.width = innerWidth
  14.     canvas.height = innerHeight
  15.   }
  16.   onresize()
  17.  
  18.   fillStyle = 'red'
  19.  
  20.   dot = (
  21.     x = r(innerWidth),
  22.     y = r(innerHeight),
  23.     mass = 10, sr = r(8) + 4, 
  24.     R = sr,
  25.     dx, dy,
  26.     dist, vx = .2, vy = 0) => { 
  27.  
  28.     return () => { 
  29.       fillStyle = '#005eb0'
  30.       R = sr
  31.       if (r() < .005) {
  32.         vx = r() * 4 - 2
  33.         R = sr * 2
  34.         fillStyle = 'white'
  35.       }
  36.  
  37.       dx = innerWidth / 2 - x
  38.       dy = innerHeight / 2 - y
  39.       dist = Math.sqrt(dx * dx + dy * dy)
  40.       dist *= dist
  41.       vx += dx / dist * mass
  42.       vy += dy / dist * mass
  43.  
  44.       x += vx
  45.       y += vy
  46.  
  47.       beginPath()
  48.       arc(x, y, R, 0, 6.29)
  49.       fill()
  50.     }
  51.   }
  52.  
  53.   const dots = []
  54.   for (let i = 0; i < 10; i++) dots.push(dot())
  55.   loop = () => {
  56.     fillStyle = 'rgba(0, 0, 0, 0.2)'
  57.     fillRect(0, 0, canvas.width, canvas.height)
  58.     dots.map(d => d())
  59.   }
  60.   setInterval(loop, 16)
  61. }

Some speed coded dots that gravitate to the center of the screen and occasionally change direction.

// animation // canvas // graphics // javascript // math // random // speed-coded

Merge Collection (array of objects)

  1. const collection = [
  2.   { name: 'Joe' },
  3.   { age: 31 },
  4.   { job: 'programmer' }
  5. ];
  6. const merged = Object.assign({}, ...collection);
  7. console.log(merged);

Combine (“assign”) entire array of objects.

Saw this here… figured it was worth a quick post.

// arrays // javascript // objects // tricks

Fermat’s Spiral Tweak/Fork

  1. document.body.style.margin = 0;
  2. const canvas = document.body.appendChild(document.createElement('canvas'));
  3. const c = canvas.getContext('2d');
  4.  
  5. function resize() {
  6.   canvas.width = window.innerWidth;
  7.   canvas.height = window.innerHeight;
  8.   draw();
  9. }
  10.  
  11. setInterval(draw, 16);
  12.  
  13. let t = 0;
  14. function draw() {
  15.   c.fillStyle = 'rgba(155, 155, 155, .9)';
  16.   c.fillRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'rgba(0, 0, 0, 0.5)';
  18.  
  19.   const iter = 500;
  20.   const halfWidth = window.innerWidth / 2;
  21.   const halfHeight = window.innerHeight / 2;
  22.   let rad = 0,
  23.     scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,
  24.     theta = 0,
  25.     x,
  26.     y;
  27.  
  28.   c.save();
  29.   c.translate(halfWidth, halfHeight);
  30.  
  31.   for (let i = 0; i < iter; i++) {
  32.     rad = 3 * Math.sin(Math.sqrt(theta)) * scale;
  33.     x = rad * Math.cos(theta);
  34.     y = rad * Math.sin(theta * 0.99);
  35.     c.fillRect(x, y, 2, 2);
  36.     c.fillRect(-x, -y, 4, 4);
  37.     theta += 0.05 + t * 0.001;
  38.   }
  39.   c.restore();
  40.   t += 0.1;
  41. }
  42.  
  43. resize();
  44. window.addEventListener('resize', resize);
// animation // canvas // javascript // speed-coded

Fermat’s Spiral

  1. const canvas = document.body.appendChild(document.createElement('canvas'));
  2. const c = canvas.getContext('2d');
  3.  
  4. function resize() {
  5.   canvas.width = window.innerWidth;
  6.   canvas.height = window.innerHeight;
  7.   draw();
  8. }
  9.  
  10. function draw() {
  11.   c.clearRect(0, 0, canvas.width, canvas.height);
  12.   c.fillStyle = 'blue';
  13.  
  14.   const iter = 300;
  15.   const halfWidth = window.innerWidth / 2;
  16.   const halfHeight = window.innerHeight / 2;
  17.   let rad = 0,
  18.     theta = 0,
  19.     scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,
  20.     x,
  21.     y;
  22.  
  23.   c.save();
  24.   c.translate(halfWidth, halfHeight);
  25.  
  26.   for (let i = 0; i < iter; i++) {
  27.     rad = Math.sqrt(theta) * scale;
  28.     x = rad * Math.cos(theta);
  29.     y = rad * Math.sin(theta);
  30.     c.fillRect(x, y, 2, 2);
  31.     c.fillRect(-x, -y, 5, 5);
  32.  
  33.     theta += 0.05;
  34.   }
  35.   c.restore();
  36. }
  37.  
  38. resize();
  39. window.addEventListener('resize', resize);

Draw Fermat’s spiral…

// canvas // javascript // math
Older Posts
Newer Posts

Recent

Archive

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