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

Fermat’s Spiral

  1. const canvas = document.body.appendChild(document.createElement('canvas'));
  2. const c = canvas.getContext('2d');
  3.  
  4. function resize() {
  5.   canvas.width = window.innerWidth;
  6.   canvas.height = window.innerHeight;
  7.   draw();
  8. }
  9.  
  10. function draw() {
  11.   c.clearRect(0, 0, canvas.width, canvas.height);
  12.   c.fillStyle = 'blue';
  13.  
  14.   const iter = 300;
  15.   const halfWidth = window.innerWidth / 2;
  16.   const halfHeight = window.innerHeight / 2;
  17.   let rad = 0,
  18.     theta = 0,
  19.     scale = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.006,
  20.     x,
  21.     y;
  22.  
  23.   c.save();
  24.   c.translate(halfWidth, halfHeight);
  25.  
  26.   for (let i = 0; i < iter; i++) {
  27.     rad = Math.sqrt(theta) * scale;
  28.     x = rad * Math.cos(theta);
  29.     y = rad * Math.sin(theta);
  30.     c.fillRect(x, y, 2, 2);
  31.     c.fillRect(-x, -y, 5, 5);
  32.  
  33.     theta += 0.05;
  34.   }
  35.   c.restore();
  36. }
  37.  
  38. resize();
  39. window.addEventListener('resize', resize);

Draw Fermat’s spiral…

// canvas // javascript // math

Wobbling Discord Blob

  1. const SCALE = 0.25;
  2. const TWO_PI = Math.PI * 2;
  3. const HALF_PI = Math.PI / 2;
  4. const canvas = document.createElement("canvas");
  5. const c = canvas.getContext("2d");
  6.  
  7. canvas.width = window.innerWidth;
  8. canvas.height = window.innerHeight;
  9. document.body.appendChild(canvas);
  10.  
  11. class Blob {
  12.   constructor() {
  13.     this.wobbleIncrement = 0;
  14.     // use this to change the size of the blob
  15.     // use this to change the size of the blob
  16.     this.radius = 1100;
  17.     // think of this as detail level
  18.     // number of conections in the `bezierSkin`
  19.     this.segments = 14;
  20.     this.step = HALF_PI / this.segments;
  21.     this.anchors = [];
  22.     this.radii = [];
  23.     this.thetaOff = [];
  24.  
  25.     const bumpRadius = 200;
  26.     const halfBumpRadius = bumpRadius / 2;
  27.  
  28.     for (let i = 0; i < this.segments + 2; i++) {
  29.       this.anchors.push(0, 0);
  30.       this.radii.push(Math.random() * bumpRadius - halfBumpRadius);
  31.       this.thetaOff.push(Math.random() * TWO_PI);
  32.     }
  33.  
  34.     this.theta = 0;
  35.     this.thetaRamp = 0;
  36.     this.thetaRampDest = 12;
  37.     this.rampDamp = 25;
  38.   }
  39.   update() {
  40.     this.thetaRamp += (this.thetaRampDest - this.thetaRamp) / this.rampDamp;
  41.     this.theta += 0.03;
  42.  
  43.     this.anchors = [0, this.radius];
  44.     for (let i = 0; i <= this.segments + 2; i++) {
  45.       const sine = Math.sin(this.thetaOff[i] + this.theta + this.thetaRamp);
  46.       const rad = this.radius + this.radii[i] * sine;
  47.       const theta = this.step * i;
  48.       const x = rad * Math.sin(theta);
  49.       const y = rad * Math.cos(theta);
  50.       this.anchors.push(x, y);
  51.     }
  52.  
  53.     c.save();
  54.     c.translate(-10, -10);
  55.     c.scale(SCALE, SCALE);
  56.     c.fillStyle = "blue";
  57.     c.beginPath();
  58.     c.moveTo(0, 0);
  59.     bezierSkin(this.anchors, false);
  60.     c.lineTo(0, 0);
  61.     c.fill();
  62.     c.restore();
  63.   }
  64. }
  65.  
  66. const blob = new Blob();
  67.  
  68. function loop() {
  69.   c.clearRect(0, 0, canvas.width, canvas.height);
  70.   blob.update();
  71.   window.requestAnimationFrame(loop);
  72. }
  73. loop();
  74.  
  75. // array of xy coords, closed boolean
  76. function bezierSkin(bez, closed = true) {
  77.   const avg = calcAvgs(bez);
  78.   const leng = bez.length;
  79.  
  80.   if (closed) {
  81.     c.moveTo(avg[0], avg[1]);
  82.     for (let i = 2; i < leng; i += 2) {
  83.       let n = i + 1;
  84.       c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  85.     }
  86.     c.quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
  87.   } else {
  88.     c.moveTo(bez[0], bez[1]);
  89.     c.lineTo(avg[0], avg[1]);
  90.     for (let i = 2; i < leng - 2; i += 2) {
  91.       let n = i + 1;
  92.       c.quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  93.     }
  94.     c.lineTo(bez[leng - 2], bez[leng - 1]);
  95.   }
  96. }
  97.  
  98. // create anchor points by averaging the control points
  99. function calcAvgs(p) {
  100.   const avg = [];
  101.   const leng = p.length;
  102.   let prev;
  103.  
  104.   for (let i = 2; i < leng; i++) {
  105.     prev = i - 2;
  106.     avg.push((p[prev] + p[i]) / 2);
  107.   }
  108.   // close
  109.   avg.push((p[0] + p[leng - 2]) / 2, (p[1] + p[leng - 1]) / 2);
  110.   return avg;
  111. }

This is a stackoverflow answer of mine. The question was asking how to create a wobbling blob like the one in the background of the discord login page. Take a look at the answer here.

User AmooHesam wrapped it up in a github repo here.

// animation // canvas // javascript // math // paths // ui

Local Mouse Click

  1. const RIGHT_BOUND = 200;
  2. const measureEl = document.createElement('div');
  3.  
  4. Object.assign(measureEl.style, {
  5.   position: 'absolute',
  6.   left: 0,
  7.   top: 0,
  8.   zIndex: 999
  9. });
  10.  
  11. function localPosition(e, element, w = 1, h = 1) {
  12.  
  13.   // normalize desktop and mobile
  14.   const touches = e.touches;
  15.   let x;
  16.   let y;
  17.   if (touches != null && touches.length > 0) {
  18.     x = touches[0].clientX;
  19.     y = touches[0].clientY;
  20.   } else {
  21.     x = e.clientX;
  22.     y = e.clientY;
  23.   }
  24.  
  25.   function location(width) {
  26.     let left = 0;
  27.     let right = RIGHT_BOUND;
  28.     let mid;
  29.  
  30.     while (right - left > 0.0001) {
  31.       mid = (right + left) / 2;
  32.  
  33.       measureEl.style[width ? 'width' : 'height'] = `${mid}%`;
  34.       measureEl.style[width ? 'height' : 'width'] = '100%';
  35.       element.appendChild(measureEl);
  36.       const el = document.elementFromPoint(x, y);
  37.  
  38.       element.removeChild(measureEl);
  39.       if (el === measureEl) {
  40.         right = mid;
  41.       } else {
  42.         if (right === RIGHT_BOUND) {
  43.           return null;
  44.         }
  45.         left = mid;
  46.       }
  47.     }
  48.  
  49.     return mid;
  50.   }
  51.  
  52.   const left = location(1);
  53.   const top = location(0);
  54.   return left != null && top != null
  55.     ? {
  56.         // percentage values
  57.         left,
  58.         top,
  59.         // pixel values
  60.         x: left * w * 0.01,
  61.         y: top * h * 0.01
  62.       }
  63.     : null;
  64. }
  65.  
  66. const div = document.body.appendChild(document.createElement('div'));
  67. div.innerHTML = 'click me';
  68. Object.assign(div.style, {
  69.   postition: 'absolute',
  70.   transform: 'translate(20px, 20px) rotate(45deg) scale(0.8)',
  71.   width: '120px',
  72.   height: '90px',
  73.   color: 'white',
  74.   fontFamily: 'sans-serif',
  75.   background: 'gray'
  76. });
  77.  
  78. document.addEventListener('touchstart', onClick);
  79. document.addEventListener('mousedown', onClick);
  80.  
  81. function onClick(e) {
  82.   const info = localPosition(e, e.target, 120, 90);
  83.   console.log(info);
  84. }

Find the local percentage and pixel values of the mouse/touch location.

I found this one on stackoverflow here by user 4esn0k.

This is an interesting alternative to semi-broken native browser solutions and custom matrix math 😉

// css // dom // html // javascript // math

Low Resolution Sine Table

  1. const sin = [
  2. 0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,
  3. 9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,
  4. 1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,
  5. -8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,
  6. -10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,
  7. -6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];
  8.  
  9. const c = document.body.appendChild(
  10.   document.createElement('canvas')
  11. ).getContext('2d');
  12.  
  13. const size = 200;
  14. c.canvas.width = c.canvas.height = size;
  15.  
  16. let x = 0;
  17. let tick = 0;
  18. let xOff = 30;
  19. let lines = 14;
  20. let pad = 10;
  21. let stagger = 8;
  22.  
  23. const loop = () => {
  24.   tick++;
  25.   c.fillStyle = 'red';
  26.   c.fillRect(0, 0, size, size);
  27.   c.fillStyle = 'white';
  28.  
  29.   for (let i = 0; i < size; i++) {
  30.     for (let j = 1; j < lines; j++) { 
  31.       x = xOff + sin[(i + j * stagger + tick) % 125];
  32.       c.fillRect(x + j * pad, i, 1, 1);
  33.     }
  34.   }
  35.   requestAnimationFrame(loop);
  36. };
  37. loop()

This is a low resolution sine table. I created this array to run on the original gameboy sometime last year… worked great for that…

// canvas // javascript // math

100 35 Ways

  1. const _100 = 100;
  2.  
  3. const count = i => {
  4.   document.body.innerHTML += 
  5.     _100.toString(i) + ` :: ... ${i}<br>`
  6.   i++ < 36 && count(i)
  7. }
  8. count(2)

Display 100 in many bases from binary to base 36… Today is the 100th post on Snippet Zone.

// javascript // math // strings
Older Posts
Newer Posts

Recent

Archive

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