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

Nonsense Words Golfed

  1. vow = 'aeiou'.split``
  2. con = 'bcdfghjklmnpqrstvwxyz'.split``
  3.  
  4. R = _ => Math.random()
  5. r = a => a[~~(R() * a.length)]
  6.  
  7. part = _ => r(con) + r(vow) + (
  8.   R() < .5 ? r(vow) : ''
  9. )
  10.  
  11. wrd = _ => {
  12.   n = ~~(R() * 3) + 1
  13.   s = ''
  14.   for (i = n; i--;) 
  15.     s += part()
  16.  
  17.   return s + ' '
  18. }
  19.  
  20. for(k = 30; k--;) 
  21.   document.body.innerHTML += wrd()

Some nonsense words…

// humor // strings

Alphabet Array Golfed

  1. l=[]
  2. for(i=26;i--;)l[i]=(10+i).toString(36)
  3. console.log(l)

A nasty golfed way to fill an array with letters a-z.

I usually do (as seen in another post):

  1. let letters = 'abcdefghijklmopqrstuvwxyz'.split``
// codegolf // javascript // speedcoding // strings

Fake RNG

  1. let anchors
  2. let idx
  3. let leng = 10
  4. let size = 200
  5. let px = 0
  6. let py = 0
  7.  
  8. function seed() {
  9.   idx = 0
  10.   anchors = (Date.now() + '').split``
  11.     .reverse()
  12.     .map(v => parseFloat(v) / 10)
  13.     .splice(0, leng)
  14. }
  15.  
  16. let last = 0
  17. let zoom = 1
  18. function rand() {
  19.   if (idx > size * size) seed()
  20.  
  21.   px += zoom
  22.   py += ~~(px / size)
  23.  
  24.   if (px >= size) px = 0
  25.   if (py >= size) py = 0
  26.  
  27.   const point = {
  28.     x: anchors[idx % leng],
  29.     y: anchors[(idx + 1) % leng]
  30.   }
  31.   idx++
  32.  
  33.   let dists = []
  34.   for (let i = 0; i < anchors.length; i += 2) {
  35.     let dx = px - anchors[i] * size
  36.     let dy = py - anchors[i + 1] * size
  37.     dists.push(Math.sqrt(dx * dx + dy * dy))
  38.   }
  39.   dists.sort()
  40.   last += (dists[0] / size - last) / 4
  41.   return last
  42. }
  43.  
  44. seed()
  45.  
  46. let d = document
  47. let b = d.body
  48. with (b.appendChild(
  49.   Object.assign(d.createElement`canvas`, { width: 400, height: 400 })
  50. ).getContext`2d`) {
  51.   fillStyle = 'black'
  52.   fillRect(0, 0, 400, 400)
  53.  
  54.   for (let i = 0; i < 200; i++) {
  55.     for (let j = 0; j < 200; j++) {
  56.       const c = rand() * 255
  57.       fillStyle = `rgb(${c}, ${c}, ${c})`
  58.       fillRect(j * 2, i * 2, 1, 2)
  59.     }
  60.   }
  61. }

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

// canvas // graphics // hacks // math // random // speedcoding

Drag Svg Circles

  1. document.addEventListener('touchmove', (e) => e.preventDefault(), {
  2.   passive: false,
  3. });
  4.  
  5. // this is just lazy - obviously goes in your stylesheet.... :P
  6. document.body.innerHTML += `
  7. <style>
  8.   body, html {
  9.     padding: 0;
  10.     height: 100%;
  11.     margin: 0;
  12.   }
  13. </style>
  14. `;
  15.  
  16. const temp = document.createElement('div');
  17. temp.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 500 500"></svg>`;
  18.  
  19. const svg = document.body.appendChild(temp.querySelector('svg'));
  20.  
  21. const CIRCLE_NUM = 4;
  22.  
  23. // make some randomly positioned circles
  24. for (let i = 0; i < CIRCLE_NUM; i++) {
  25.   const x = Math.random() * 150 + 150;
  26.   const y = Math.random() * 150 + 150;
  27.   svg.innerHTML += `<circle 
  28.     cx="${x}" cy="${y}" r="60" 
  29.     stroke="#000" fill="rgba(81, 121, 200, 0.3)" 
  30.     style="cursor:pointer" />`;
  31. }
  32.  
  33. function touch(e) {
  34.   const pt = svg.createSVGPoint();
  35.   pt.x = e.clientX;
  36.   pt.y = e.clientY;
  37.   return pt.matrixTransform(svg.getScreenCTM().inverse());
  38. }
  39.  
  40. let down, ox, oy, curr;
  41. document.addEventListener('pointerdown', (e) => {
  42.   down = true;
  43.   if (e.target.tagName === 'circle') {
  44.     curr = e.target;
  45.     const { x, y } = touch(e);
  46.     ox = curr.cx.baseVal.value - x;
  47.     oy = curr.cy.baseVal.value - y;
  48.   }
  49. });
  50.  
  51. document.addEventListener('pointermove', (e) => {
  52.   if (down && curr) {
  53.     const { x, y } = touch(e);
  54.     curr.cx.baseVal.value = x + ox;
  55.     curr.cy.baseVal.value = y + oy;
  56.   }
  57. });
  58.  
  59. document.addEventListener('pointerup', (e) => {
  60.   down = false;
  61.   curr = null;
  62. });

Drag some svg circles on mobile and desktop…

// javascript // svg // ui

Average Some Curves

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5.  
  6. function resize() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   draw();
  10. }
  11.  
  12. function draw() {
  13.   c.clearRect(0, 0, canvas.width, canvas.height);
  14.  
  15.   Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  16.   const iter = 300,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 50, rad2 = 50, theta = 0, x, y;
  20.   let x2, y2;
  21.   for (let i = 0; i < 100; i++) {
  22.     c.fillStyle = 'blue';
  23.     x = halfWidth + rad * Math.cos(theta);
  24.     y = halfHeight + rad * Math.sin(theta);
  25.     c.fillRect(x, y, 5, 5);
  26.  
  27.     c.fillStyle = 'red';
  28.  
  29.     rad2 = 80 + rad * Math.cos(theta * 3);
  30.     x2 = halfWidth + rad2 * Math.cos(theta);
  31.     y2 = halfHeight + rad2 * Math.sin(theta);
  32.     c.fillRect(x2, y2, 5, 5);
  33.  
  34.     c.fillStyle = 'green';
  35.     c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);
  36.  
  37.     theta += .1;
  38.   }
  39. }
  40.  
  41. resize();
  42. window.addEventListener('resize', resize);
// canvas // graphics // math // speedcoding
Older Posts
Newer Posts

Recent

Archive

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