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

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

Canvas Spiraling Things

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. document.body.appendChild(canvas);
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10.   c.fillStyle = '#000';
  11.   c.fillRect(0, 0, canvas.width, canvas.height);
  12. }
  13. resize();
  14. addEventListener('resize', resize);
  15.  
  16. const cols = ['#555', 'white', 'gray', '#a4c3eb', '#75879e'];
  17.  
  18. const getCol = () => cols[Math.floor(Math.random() * cols.length)];
  19.  
  20. function rect() {
  21.   let x = innerWidth / 2;
  22.   let y = innerHeight / 2;
  23.   let col = getCol();
  24.   let width = 10;
  25.   let height = 10;
  26.   let halfWidth = width / 2;
  27.   let halfHeight = height / 2;
  28.   let alpha = 0.15 + Math.random() * 0.5;
  29.   let vx = 0;
  30.   let vy = 0;
  31.   let rot = 0;
  32.   let rotInc = Math.random() * 0.1 - 0.05;
  33.  
  34.   function change() {
  35.     vx += (Math.random() * 1 - 0.5) / 2;
  36.     vy += (Math.random() * 1 - 0.2) / 2;
  37.   }
  38.   change();
  39.  
  40.   function check() {
  41.     if (x < 0) x = innerWidth;
  42.     if (y < 0) y = innerHeight;
  43.     if (x > innerWidth) x = 0;
  44.     if (y > innerHeight) y = 0;
  45.   }
  46.  
  47.   const radius = 20 + Math.random() * 80;
  48.   const verts = [];
  49.   const NUM = 200;
  50.   const off = Math.random() * 5;
  51.   const cols = [];
  52.   for (var i = 0; i < NUM; i += 2) {
  53.     let xp = Math.random() * 10 - 5;
  54.     let yp = Math.random() * 10 - 5;
  55.     let zp = Math.random() * 10 - 5;
  56.     let dist = Math.sqrt(xp * xp + yp * yp + zp * zp);
  57.     // normalize and scale x,y,z
  58.     verts[i] = (xp / dist) * radius;
  59.     verts[i + 1] = (yp / dist) * radius;
  60.     cols.push(i % 255);
  61.   }
  62.  
  63.   return () => {
  64.     if (Math.random() < 0.13) {
  65.       change();
  66.     }
  67.  
  68.     vx *= 0.99;
  69.     vy *= 0.99;
  70.  
  71.     x += vx;
  72.     y += vy;
  73.  
  74.     check();
  75.  
  76.     c.globalAlpha = alpha;
  77.  
  78.     c.save();
  79.  
  80.     rot += rotInc;
  81.     c.translate(x, y);
  82.     c.rotate(rot);
  83.  
  84.     for (var i = 0; i < NUM; i += 2) {
  85.       const channel = cols[i];
  86.       c.fillStyle = `rgb(${channel}, ${channel}, ${channel})`;
  87.       c.fillRect(verts[i], verts[i + 1], 2, 2);
  88.     }
  89.     c.restore();
  90.   };
  91. }
  92.  
  93. let rects = [];
  94. let NUM = 20;
  95.  
  96. for (let i = 0; i < NUM; i++) {
  97.   rects.push(rect());
  98. }
  99.  
  100. rects[0]();
  101.  
  102. function loop() {
  103.   c.globalCompositeOperation = 'source-over';
  104.   c.globalAlpha = 0.025;
  105.   c.fillStyle = '#000';
  106.   c.fillRect(0, 0, canvas.width, canvas.height);
  107.  
  108.   for (let i = 0; i < NUM; i++) {
  109.     rects[i]();
  110.   }
  111.  
  112.   requestAnimationFrame(loop);
  113. }
  114.  
  115. loop();
// animation // canvas // javascript // speed-coded

Guess the semi-golf

  1. a=3217+'';a=[a];console.log(a[0][2])

Try and guess what would be logged here…

// arrays // codegolf // humor // javascript // strings
Older Posts
Newer Posts

Recent

Archive

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