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

Random Value From Array

  1. const modes = ['walk', 'run', 'hide', 'jump', 'dance'];
  2.  
  3. const randomMode = modes[Math.floor(modes.length * Math.random())];
  4.  
  5. console.log(randomMode);
  6.  
  7.  
  8. // turn it into a function:
  9. function randomChoice(arr) {
  10.   return arr[Math.floor(arr.length * Math.random())];
  11. }
  12.  
  13. const colors = ['red', 'green', 'blue', 'black', 'white']  ;
  14.  
  15. console.log(randomChoice(colors));
  16. console.log(randomChoice(modes));

Grab a random value from an array.

// arrays // javascript // tricks

Some Boxes

  1. const canvas = document.createElement('canvas'),
  2.   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 = '#ccc';
  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 = Math.random() * innerWidth;
  22.   let y = Math.random() * innerHeight;
  23.   let dx = x;
  24.   let dy = y;
  25.   let size = Math.min(innerWidth, innerHeight);
  26.   let width = size * Math.random() * Math.random() + 30;
  27.   let height = size * Math.random() * Math.random() + 30;
  28.   let halfWidth = width / 2;
  29.   let halfHeight = height / 2;
  30.   let col = getCol();
  31.   let damp = 5 + Math.random() * 70;
  32.   let alpha = 0.2 + Math.random() * 0.4;
  33.  
  34.   function move() {
  35.     if (Math.random() < 0.5) {
  36.       dy = y;
  37.       dx += Math.random() * Math.random() * size - size / 2;
  38.     } else {
  39.       dx = x;
  40.       dy += Math.random() * Math.random() * size - size / 2;
  41.     }
  42.   }
  43.  
  44.   return () => {
  45.     if (Math.random() < 0.01) {
  46.       move();
  47.     }
  48.  
  49.     if (x < halfWidth) {
  50.       dx = innerWidth - width;
  51.     }
  52.  
  53.     if (y < halfHeight) {
  54.       dy = innerHeight - height;
  55.     }
  56.  
  57.     if (x > innerWidth + halfWidth) {
  58.       dx = width;
  59.     }
  60.  
  61.     if (y > innerHeight + halfHeight) {
  62.       dy = height;
  63.     }
  64.  
  65.     x += (dx - x) / damp;
  66.     y += (dy - y) / damp;
  67.  
  68.     c.globalAlpha = alpha;
  69.     c.fillStyle = col;
  70.     c.fillRect(x - halfWidth, y - halfHeight, width, height);
  71.   };
  72. }
  73.  
  74. let rects = [];
  75. let NUM = 30;
  76. for (let i = 0; i < NUM; i++) {
  77.   rects.push(rect());
  78. }
  79.  
  80. function loop() {
  81.   c.globalCompositeOperation = 'source-over';
  82.   c.globalAlpha = 0.01;
  83.   c.fillStyle = '#ccc';
  84.   c.fillRect(0, 0, canvas.width, canvas.height);
  85.  
  86.   c.globalCompositeOperation = 'hard-light';
  87.   for (let i = 0; i < NUM; i++) {
  88.     rects[i]();
  89.   }
  90.   requestAnimationFrame(loop);
  91. }
  92. loop();
// canvas // javascript

Upload Image

  1. const uploadInput = document.body.appendChild(
  2.   Object.assign(document.createElement('input'), {
  3.     type: 'file',
  4.     accept: 'image/png, image/jpeg'
  5.   })
  6. );
  7.  
  8. const imageEl = document.body.appendChild(
  9.   Object.assign(document.createElement('img'), {
  10.     style: `
  11.             display:block;
  12.             width: 100%;
  13.           `
  14.   })
  15. );
  16.  
  17. const reader = new FileReader();
  18.  
  19. reader.addEventListener('load', () => {
  20.   imageEl.src = reader.result;
  21. });
  22.  
  23. uploadInput.addEventListener('change', e => {
  24.   const file = e.target.files[0];
  25.   if (file != null) {
  26.     reader.readAsDataURL(file);
  27.   }
  28. });

Load an image into memory…

// images // javascript // ui

Flatten Array Golf

  1.  
  2. console.log([100, 200, [2], [3, 4, [2, 3, [5]], 100]]+'')
  3. // outputs: "100,200,2,3,4,2,3,5,100"

Coercing a multidimensional array to a string flattens it and joins it with commas

// arrays // codegolf // javascript // strings

Animation Along Path SVG

  1. const el = document.body.appendChild(
  2.   document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg width="100%" height="100%" viewBox="0 0 550 496">
  6.     <path 
  7.       d="M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10" 
  8.       stroke="black" fill='none' vector-effect="non-scaling-stroke"/>
  9.     <circle cx="20" cy="10" r="6" fill="red" />
  10.   </svg>
  11.   <style>
  12.     svg, div, body, html {
  13.       overflow: visible; 
  14.       height: 100%; 
  15.       width: 100%;
  16.       margin: 0; padding: 0;
  17.     }
  18.   </style>
  19.  `;
  20.  
  21. const circle = el.querySelector('circle');
  22. const path = el.querySelector('path');
  23. const length = path.getTotalLength();
  24. let pos = 0;
  25.  
  26. function loop() {
  27.   pos += 3;
  28.   if (pos > length) {
  29.     pos = 0;
  30.   }
  31.   const point = path.getPointAtLength(pos);
  32.   circle.cx.baseVal.value = point.x;
  33.   circle.cy.baseVal.value = point.y;
  34.   requestAnimationFrame(loop);
  35. }
  36. loop();

SVG has an easy way to animate something along an arbitrary path… getPointAtLength

// animation // curves // javascript // svg // tricks
Older Posts
Newer Posts

Recent

Archive

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