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

ES5 Canvas Thing

  1. var canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. ),
  4. c = canvas.getContext("2d"),
  5. size = canvas.width,
  6. quarterSize = size / 4,
  7. eightSize = size / 8,
  8. halfSize = size / 2,
  9. TWO_PI = Math.PI * 2,
  10. bombNum = 3,
  11. bombs = [],
  12. wanderers = {}, 
  13. wandererIndex = 0,
  14. particles = {},
  15. particleIndex = 0;
  16.  
  17. canvas.width = canvas.height = 300
  18.  
  19. c.fillStyle = "rgb(100,100,100)";
  20. c.fillRect(0,0,size,size);
  21.  
  22. function Particle(x, y){
  23.   this.x = x;
  24.   this.y = y;
  25.   var rad = 3 + Math.random() * 6;
  26.   var theta = Math.random() * TWO_PI;
  27.   this.vx = rad * Math.cos(theta);
  28.   this.vy = rad * Math.sin(theta);
  29.   this.alpha = 1;
  30.   particleIndex++;
  31.   this.index = particleIndex;
  32.   particles[this.index] = this;
  33. }
  34. Particle.prototype.draw = function(){
  35.   this.x += this.vx;
  36.   this.y += this.vy;
  37.   this.vx *= 0.9;
  38.   this.vy *= 0.9;
  39.   this.alpha -= 0.05;
  40.  
  41.   if (this.alpha <= 0){
  42.     this.alpha = 0;
  43.     delete particles[this.index];
  44.  
  45.   }
  46.  
  47.   c.fillStyle = "rgba(255,255,255,"+this.alpha+")";
  48.   c.beginPath();
  49.   c.arc(this.x, this.y, 1, 0, TWO_PI, false);
  50.   c.fill();
  51. };
  52.  
  53. function Bomb(){
  54.   this.x = quarterSize + Math.random() * halfSize;
  55.   this.y = quarterSize + Math.random() * halfSize;
  56.   this.radius = 15 + Math.random() * 20;
  57. }
  58. Bomb.prototype.draw = function(){
  59.   c.fillStyle = "#e64c25";
  60.   c.beginPath();
  61.   c.arc(this.x, this.y, this.radius, 0, TWO_PI, false);
  62.   c.fill();
  63. };
  64.  
  65. function Wanderer(x, y){
  66.   this.x = x;
  67.   this.y = y;
  68.   this.vx = Math.random() * 4 - 2;
  69.   this.vy = Math.random() * 4 - 2;
  70.   particleIndex++;
  71.   this.index = particleIndex;
  72.   particles[this.index] = this;
  73. }
  74. Wanderer.prototype.die = function(){
  75.   for (var j = 0; j < 4; j++){
  76.     new Particle(this.x, this.y);
  77.   }
  78.  
  79.   delete particles[this.index];
  80. };
  81. Wanderer.prototype.draw = function(){
  82.   this.x += this.vx;
  83.   this.y += this.vy;
  84.  
  85.   if (Math.random() < 0.1){
  86.     this.vx = Math.random() * 4 - 2;
  87.     this.vy = Math.random() * 4 - 2;
  88.   }
  89.  
  90.   if (this.x < 0) this.x = size;
  91.   if (this.x > size) this.x = 0;
  92.   if (this.y < 0) this.y = size;
  93.   if (this.y > size) this.y = 0;
  94.  
  95.   c.fillStyle = "white";
  96.   c.beginPath();
  97.   c.arc(this.x, this.y, 2, 0, TWO_PI, false);
  98.   c.closePath();
  99.   c.fill();
  100.  
  101.   for (var i = 0; i < bombNum; i++){
  102.     var bomb = bombs[i];
  103.     var dx = this.x - bomb.x;
  104.     var dy = this.y - bomb.y;
  105.     if (Math.sqrt(dx * dx + dy * dy) < bomb.radius){
  106.       this.die();
  107.     }
  108.   }
  109. };
  110.  
  111. for (var i = 0; i < bombNum; i++){
  112.   bombs[i] = new Bomb();
  113. }
  114.  
  115. new Wanderer(eightSize, eightSize); 
  116.  
  117. setInterval(function(){
  118.   c.fillStyle = "rgba(100,100,100, 0.2)";
  119.   c.fillRect(0,0,size,size);
  120.   c.strokeStyle = "white";
  121.   c.beginPath();
  122.   c.arc(eightSize, eightSize, 5, 0, TWO_PI, false);
  123.   c.stroke();
  124.  
  125.   if (Math.random() < 0.02){
  126.     new Wanderer(eightSize, eightSize); 
  127.   }
  128.  
  129.   for (var i = 0; i < bombNum; i++){
  130.     bombs[i].draw();
  131.   }
  132.  
  133.   for (var i in wanderers){
  134.     wanderers[i].draw(); 
  135.   }
  136.  
  137.   for (var i in particles){
  138.     particles[i].draw();
  139.   }
  140. }, 16);

An old es5 speedcoded thing…

// canvas // graphics // javascript

Fibonacci Triangle Golfed

  1. // by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld
  2. f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}
  3. `+f(n-1,b-a,(a+"").length-~p):''
  4.  
  5. console.log(f(20))

Great golfed solution to this question at codegolf stackexchange by user Arnauld

// codegolf // javascript // math

Acronym Definition Generator

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Acro</title>
  6.  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <style>
  10.  
  11.       body {
  12.         font-family: sans-serif;
  13.         margin: 3em;
  14.       }
  15.  
  16.       button {
  17.         cursor: pointer;
  18.         font-size: 1em;
  19.         padding: .6em;
  20.         margin-bottom: 2em;
  21.       }
  22.  
  23.       h1 {
  24.         font-size: 3em;
  25.         text-decoration: underline;
  26.       }
  27.  
  28.       hr {
  29.         border: none;
  30.         border-bottom: 1px dashed gray;  
  31.       }
  32.  
  33.       i {
  34.         text-transform: lowercase;
  35.       }
  36.  
  37.       #acro {
  38.         position: relative;
  39.         width: 100%;
  40.         min-width: 350px;
  41.         max-width: 700px;
  42.         margin: 0 auto;
  43.  
  44.       }
  45.  
  46.       input[type=text] {
  47.         padding: .5em;  
  48.         margin-right: 1em;
  49.         text-transform: uppercase;
  50.       }
  51.  
  52.       #go {
  53.         margin-right: .5em;  
  54.       }
  55.  
  56.       #btn {
  57.         float: right;  
  58.       }
  59.  
  60.       .row {
  61.         width: 100%;
  62.         clear: both;
  63.       }
  64.       .uiBreak { display: none; }
  65.  
  66.       @media only screen and (max-width: 600px) {
  67.         body {
  68.           font-size: .8em;
  69.           margin: 1em;
  70.         }
  71.  
  72.       }
  73.  
  74.       @media only screen and (max-width: 400px) {
  75.         .uiBreak { display: block; }
  76.         #btn {
  77.           float: left;
  78.           display: block;
  79.           clear: both;
  80.         }
  81.       }
  82.  
  83.     </style>
  84.   </head>
  85.   <body>
  86.     <div id=acro>
  87.       <h1>Acro</h1>
  88.       <div>
  89.         <input id=input type=text placeholder="enter acronym">
  90.         <button id=go>go...</button>
  91.         <br class=uiBreak>
  92.         <button id=btn>generate random...</button>
  93.       </div>
  94.  
  95.       <div id=acros></div>
  96.     </div>
  97.     <script>
  98. (() => {
  99.  
  100.   const min = 3
  101.   const max = 5
  102.   const diff = max - min
  103.  
  104.   const { random } = Math
  105.  
  106.   const wordsByLetter = {}
  107.   const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split``
  108.   let words;
  109.  
  110.   alphabet.forEach(let => wordsByLetter[let] = [])
  111.  
  112.   console.log('loading...')
  113.  
  114.   fetch('words.txt')
  115.     .then(data => data.text())
  116.     .then(text => {
  117.       console.log('prepping...')
  118.  
  119.       words = text.split(/\s+/m).sort()
  120.  
  121.       const chunk = 500
  122.       const ticks = ~~(words.length / chunk)
  123.  
  124.       let idx = 0
  125.       let count = 0
  126.  
  127.       let interval = setInterval(() => {
  128.         if (count === ticks) {
  129.           start()
  130.           clearInterval(interval)
  131.           return
  132.         }
  133.  
  134.         for (let i = 0; i < chunk; i++) {
  135.           const word = words[idx]
  136.           if (word[0]) {
  137.             const firstLetter = word[0].toUpperCase()
  138.             wordsByLetter[firstLetter]?.push(word)
  139.           }
  140.           idx++
  141.         }
  142.         count++
  143.       }, 1)
  144.     })
  145.  
  146.   function start() {
  147.     console.log('starting...')
  148.  
  149.     const rando = _ => {
  150.       const leng =  ~~(min + diff * random())
  151.       let word = ''
  152.       for (let i = 0; i < leng; i++) {
  153.         word += alphabet[~~(random() * alphabet.length)]
  154.       }
  155.       return word
  156.     }
  157.  
  158.     const gen = custom => {
  159.       if (!custom) return
  160.       custom = custom.toUpperCase()
  161.       const leng = custom.length
  162.       const def = []
  163.  
  164.       for (let i = 0; i < leng; i++) {
  165.         const sourceWords = wordsByLetter[custom[i]]
  166.         def[i] = sourceWords[~~(random() * sourceWords.length)]
  167.       }
  168.       const div = document.createElement`div`
  169.       div.className = 'row'
  170.       div.innerHTML = `
  171.         <h2>${custom}</h2>
  172.         <i>${def.join` `}</i>
  173.         <hr>
  174.       `
  175.       acros.prepend(div)
  176.     }
  177.  
  178.     btn.onclick = () => {
  179.       gen(rando())
  180.     }
  181.  
  182.     go.onclick = () => gen(input.value);
  183.     document.onkeydown = e => {
  184.       if (e.key === 'Enter') gen(input.value);
  185.     }
  186.  
  187.   }
  188. })()
  189.     </script>
  190.   </body>
  191. </html>


A friend of mine had this idea the other night so I coded it up…

Update: I forgot to mention, this uses this list of words from google…

// humor // javascript // speedcoding // strings

JavaScript Exotic Undefined

  1. // from Martin Kleppe
  2. Array: [][[]]
  3. String: ""[""]
  4. Function: ($=>$)()
  5. Object: ({}).$
  6. Number: 0.0.$
  7. RegExp: /$/.$
  8. Boolean: false.true

Fun tweet from Martin Kleppe today

// javascript // undefined

osx Command Files

  1. #!/bin/bash
  2. cd "$(dirname "$0")"
  3. . ~/.nvm/nvm.sh
  4.  
  5. nvm use stable && npm run dev

Then name that file “whatever.command”. When you double-click it, it’ll launch a terminal and run the command. I pop these in my dock for projects I’m always opening…

// javascript // osx // tricks
Older Posts
Newer Posts

Recent

Archive

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