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

Old Codepen 2013

  1. $(function () {
  2.   var canvas = $("<canvas>").appendTo("body"),
  3.     win = $(window),
  4.     cnvs = canvas[0],
  5.     c = cnvs.getContext("2d"),
  6.     el = $("<div>"),
  7.     letters = [],
  8.     NUM = 10,
  9.     TWO_PI = Math.PI * 2;
  10.  
  11.   c.font = "16px sans-serif";
  12.  
  13.   win
  14.     .resize(function () {
  15.       cnvs.width = win.width();
  16.       cnvs.height = win.height();
  17.       c.fillStyle = "white";
  18.       c.fillRect(0, 0, cnvs.width, cnvs.height);
  19.     })
  20.     .trigger("resize");
  21.  
  22.   function symbol() {
  23.     var r = parseInt(Math.random() * 9999),
  24.       s = "&#" + r + ";";
  25.     el.html(s);
  26.     return el.html();
  27.   }
  28.  
  29.   function Letter() {}
  30.  
  31.   Letter.prototype.init = function () {
  32.     this.x = Math.random() * win.width();
  33.     this.y = Math.random() * win.height();
  34.  
  35.     this.sym = symbol();
  36.     this.rot = Math.random() * 2 * Math.PI;
  37.     this.rotVel = Math.random() * 0.02 - 0.01;
  38.  
  39.     this.size = 1 + Math.random() * 10;
  40.     this.sizeVel = Math.random() * 0.2;
  41.     this.col = ["black", "white", "#999"][parseInt(Math.random() * 3)];
  42.  
  43.     this.rad = Math.random();
  44.     this.vx = this.rad * Math.cos(Math.random() * TWO_PI);
  45.     this.vy = this.rad * Math.sin(Math.random() * TWO_PI);
  46.  
  47.     this.life = 0;
  48.     this.maxLife = parseInt(Math.random() * 200);
  49.  
  50.     if (Math.random() < 0.1) {
  51.       this.doGrad = true;
  52.       this.channel = parseInt(Math.random() * 200);
  53.     }
  54.  
  55.     this.shadow = false;
  56.     if (Math.random() < 0.1) {
  57.       this.shadow = true;
  58.     }
  59.   };
  60.  
  61.   Letter.prototype.run = function () {
  62.     if (this.doGrad) {
  63.       this.channel += 1;
  64.  
  65.       this.col =
  66.         "rgb(" + this.channel + "," + this.channel + "," + this.channel + ")";
  67.     }
  68.  
  69.     if (this.shadow == true) {
  70.       c.shadowBlur = 100;
  71.       c.shadowColor = "rgba(76,105,135,0.2)";
  72.     }
  73.  
  74.     this.size += this.sizeVel;
  75.     this.rot += this.rotVel;
  76.     this.x += this.vx;
  77.     this.y += this.vy;
  78.  
  79.     c.save();
  80.  
  81.     c.translate(this.x, this.y);
  82.     c.scale(this.size, this.size);
  83.     c.rotate(this.rot);
  84.  
  85.     c.fillStyle = this.col;
  86.     c.fillText(this.sym, -this.size / 2, -this.size / 2);
  87.  
  88.     c.restore();
  89.  
  90.     this.life++;
  91.  
  92.     if (this.life >= this.maxLife) {
  93.       this.init();
  94.       //console.log("respurn");
  95.     }
  96.   };
  97.  
  98.   for (var i = 0; i < NUM; i++) {
  99.     var letter = (letters[i] = new Letter());
  100.     letter.init();
  101.   }
  102.  
  103.   setInterval(function () {
  104.     for (var i = 0; i < NUM; i++) {
  105.       letters[i].run();
  106.     }
  107.   }, 30);
  108. });

It’s fun to look through old code….

See the Pen Symbolz by Zevan Rosser (@ZevanRosser) on CodePen.

// canvas // javascript

toString Radix

  1. for (let i = 2; i < 36; i++) {
  2.   console.log((234).toString(i), ` = 234 in base ${i}`)
  3. }

Use the radix argument of toString

// javascript // strings // tricks

Hamming Distance in JavaScript

  1. function hamming(a, b) {
  2.   const leng = a.length
  3.   let dist = 0
  4.  
  5.   // strings need to be same length
  6.   if (leng != b.length) return -1;
  7.  
  8.   a = a.toLowerCase()
  9.   b = b.toLowerCase()
  10.  
  11.   for (let i = 0; i < leng; i++)
  12.     if (a[i] !== b[i]) dist++
  13.  
  14.   return dist
  15. }
  16.  
  17. console.log(hamming('zevan', 'kevin'))
  18. console.log(hamming('joe', 'joe'))
  19. console.log(hamming('john', 'jake'))

The hamming distance between two strings…

// javascript // math // strings

Airbrush-esque

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. const brush = document.createElement('canvas');
  5. const brushC = brush.getContext('2d');
  6.  
  7. canvas.width = innerWidth;
  8. canvas.height = innerHeight;
  9. brush.width = innerWidth;
  10. brush.height = innerHeight;
  11.  
  12. document.body.appendChild(canvas);
  13.  
  14. c.fillStyle = 'black'
  15. c.fillRect(0, 0, canvas.width, canvas.height);
  16.  
  17. let brushSize = 50;
  18. let featherSize = .1;
  19. let featherSteps = Math.floor(brushSize * featherSize) + 1;
  20. let st = brushSize - featherSteps;
  21.  
  22. let a = 0;
  23. if (st < 1) st = 1;
  24. for (let i = 0; i < st; i++) {
  25.   a = 1 / (st - i)
  26.   c.strokeStyle = `rgba(255, 255, 255, ${a})`;
  27.   console.log(c.strokeStyle)
  28.   c.lineWidth = brushSize - i;
  29.   c.lineJoin = 'round'
  30.   c.lineCap = 'round'
  31.   c.beginPath();
  32.   c.moveTo(50, 50);
  33.   c.lineTo(200, 200);
  34.   c.bezierCurveTo(300, 200, 400, 200, 300, 400);
  35.   c.stroke();
  36. }
// canvas // javascript

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
Older Posts
Newer Posts

Recent

Archive

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