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

Random Color Strings

  1. R = Math.random
  2. b = document.body
  3. b.style = 'background: black; font-family: sans-serif; text-transform: uppercase; color: white;'
  4.  
  5. setInterval(_ => {
  6.   if (R()<.9) {
  7.     s = ''
  8.     for(i=0;i<R() * 30 + 4;i++) s+=(~~(R() * 0xff)).toString(36)
  9.       .replace(R() < .9 ? /[0-9]/g : '', '')
  10.  
  11.     b.innerHTML += `
  12.      <n style="color:hsl(${R()*360}, 30%, 50%)">${s}</n> `+(R()<.1?'<br>':'');
  13.   }
  14. }, 100)

Make some random strings and give them a random color… a friend of mine showed a work in progress forked codepen – so I created a golfed version/variation…

// codegolf // random // regex // speedcoding // strings

Building Spikes Codegolf

  1. f = 
  2.  
  3. n=>`   ^ 
  4.   /|\\
  5.  /.|.\\
  6. /..|..\\
  7. ___`.replace(/.[_|^]./g,'$&'.repeat(n))+'____'
  8.  
  9. // test it out
  10. document.body.innerHTML += 
  11. `<pre>${f(1)}
  12. ${f(3)}
  13. ${f(4)}`

Great codegolf stackexchange answer from user tsh

// codegolf // golfed // javascript // regex // strings

W3Schools Output Tag

  1. <!-- from w3schools.com -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5.  
  6. <h1>The output element</h1>
  7.  
  8. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  9. <input type="range" id="a" value="50">
  10. +<input type="number" id="b" value="25">
  11. =<output name="x" for="a b"></output>
  12. </form>
  13.  
  14. <p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>
  15.  
  16. </body>
  17. </html>

I like w3Schools.

This code has some problems… but… for a cool little snippet to play with – I think that’s ok. SnippetZone certainly has tons of things like this…

// hacks // html // humor // speedcoding

Canvas Path2D

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. )
  4. const c = canvas.getContext('2d')
  5.  
  6. canvas.width = innerWidth
  7. canvas.height = innerHeight
  8.  
  9. c.translate(10, 10)
  10. const path = new Path2D('M 154.75 61.5 Q 169.75 63.8 184.8 69.35 173.15 68.3 161.7 69.4 173.1 73.85 184.8 75.95 173.1 77.15 161.65 75.95 173.05 80.45 184.8 82.55 173 83.75 160.05 82.35 173 87.05 184.8 89.15 172.95 90.35 161.65 89.1 172.9 93.65 184.8 95.75 172.8 96.9 161.65 95.7 172.8 100.2 184.8 102.35 172.75 103.5 163.7 102.7 172.7 106.8 184.8 110.3 172.7 110.1 161.65 108.85 172.6 113.35 184.8 118.85 171.05 116.05 158.35 114.65 167.3 126.9 174 141.45 166.5 132.45 157.65 125.1 162.55 136.3 169.35 146.1 160.2 138.65 152.95 129.7 157.85 141 164.7 150.75 155.5 143.25 147.3 133.15 153.15 145.6 160 155.45 150.75 147.9 143.65 139 148.45 150.2 155.35 160.1 146.05 152.4 139 143.65 143.7 154.75 150.7 164.75 141.3 157.05 135.5 150.05 139 159.35 145.05 170.4 136.65 161.7 129.7 152.95 134.25 163.9 139 176.45 131.3 164.75 123.3 154.8 121 169.8 115.45 184.8 116.5 173.15 115.4 161.7 110.95 173.1 108.85 184.8 107.65 173.1 108.85 161.65 104.35 173.05 102.25 184.8 101.05 173 102.45 160.05 97.75 173 95.65 184.8 94.45 172.95 95.7 161.65 91.15 172.9 89.05 184.8 87.9 172.8 89.1 161.65 84.6 172.8 82.45 184.8 81.3 172.75 82.1 163.7 78 172.7 74.5 184.8 74.7 172.7 75.95 161.65 71.45 172.6 65.95 184.8 68.75 171.05 70.15 158.4 57.9 167.35 43.35 174.05 52.35 166.55 59.7 157.7 48.5 162.6 38.7 169.4 46.15 160.25 55.1 153 43.8 157.9 34.05 164.75 41.55 155.55 51.65 147.35 39.2 153.2 29.35 160.05 36.9 150.8 45.8 143.7 34.6 148.5 24.7 155.4 32.4 146.1 41.15 139.05 30.05 143.75 20.05 150.75 27.75 141.35 34.75 135.55 25.45 139.05 14.4 145.1 23.1 136.7 31.85 129.75 20.9 134.3 8.35 139.05 20.05 131.3 30.05 123.3 15.05 121 0 115.45 11.65 116.5 23.1 115.4 11.7 110.95 0 108.85 11.7 107.65 23.15 108.85 11.75 104.35 0 102.25 11.8 101.05 24.75 102.45 11.8 97.75 0 95.65 11.85 94.45 23.15 95.7 11.9 91.15 0 89.05 12 87.9 23.15 89.1 12 84.6 0 82.45 12.05 81.3 21.1 82.1 12.1 78 0 74.5 12.1 74.7 23.15 75.95 12.2 71.45 0 65.95 13.75 68.75 26.45 70.15 17.45 57.9 10.75 43.35 18.25 52.35 27.1 59.7 22.2 48.5 15.4 38.7 24.55 46.15 31.8 55.1 26.9 43.8 20.05 34.05 29.25 41.55 37.45 51.65 31.6 39.2 24.75 29.35 34 36.9 41.1 45.8 36.3 34.6 29.4 24.7 38.7 32.4 45.75 41.15 41.05 30.05 34.05 20.05 43.45 27.75 49.25 34.75 45.75 25.45 39.7 14.4 48.1 23.1 55.05 31.85 50.5 20.9 45.75 8.35 53.5 20.05 61.5 30.05 63.8 15.05 69.35 0 68.3 11.65 69.4 23.1 73.85 11.7 75.95 0 77.15 11.7 75.95 23.15 80.45 11.75 82.55 0 83.75 11.8 82.35 24.75 87.05 11.8 89.15 0 90.35 11.85 89.1 23.15 93.65 11.9 95.75 0 96.9 12 95.7 23.15 100.2 12 102.35 0 103.5 12.05 102.7 21.1 106.8 12.1 110.3 0 110.1 12.1 108.85 23.15 113.35 12.2 118.85 0 116.05 13.75 114.65 26.45 126.9 17.45 141.45 10.75 132.45 18.25 125.1 27.1 136.3 22.2 146.1 15.4 138.65 24.55 129.7 31.8 141 26.9 150.75 20.05 143.25 29.25 133.15 37.45 145.6 31.6 155.45 24.75 147.9 34 139 41.1 150.2 36.3 160.1 29.4 152.4 38.7 143.65 45.75 154.75 41.05 164.75 34.05 157.05 43.45 150.05 49.25 159.35 45.75 170.4 39.7 161.7 48.1 152.95 55.05 163.9 50.5 176.45 45.75 164.75 53.5 154.75 61.5 140.2 73.15 129.35 85.4 146 97.85 158.35 114.65 M 61.5 30.05 Q 73.15 44.6 85.4 55.45 97.8 38.8 114.65 26.45 M 30.05 123.3 Q 44.6 111.65 55.45 99.45 38.8 87 26.45 70.15 M 123.3 154.8 Q 111.65 140.25 99.4 129.4 86.95 146.05 70.15 158.4');
  11.  
  12. c.stroke(path);

Use SVG style paths in canvas…

// canvas // javascript // svg

Proxy Constants

  1. const spec = {
  2.   get(o, key) { 
  3.     return o[key] != null ? 
  4.       o[key] : o[key] = Objector()
  5.   }
  6. };
  7.  
  8. const Objector = () => new Proxy({}, spec);
  9.  
  10. const events = Objector();
  11.  
  12. events.graphics.RENDERED;
  13. events.graphics.ERASED;
  14. events.ui.LOADING;
  15. events.ui.LOADED;
  16. events.files.OPENED;
  17. events.files.CLOSED;
  18.  
  19. const { ERASED } = events.graphics;
  20. console.log('a', ERASED === events.graphics.ERASED);
  21. console.log('b', ERASED === events.files.CLOSED);

This is somewhat evil… I’ve never liked these java style constants. Maybe I’ll write up a detailed alternative method some time.

// humor // proxies // tricks
Older Posts
Newer Posts

Recent

Archive

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