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

Fermat’s Spiral Tweak/Fork

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

Canvas Spiraling Things

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. document.body.appendChild(canvas);
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth;
  9.   canvas.height = innerHeight;
  10.   c.fillStyle = '#000';
  11.   c.fillRect(0, 0, canvas.width, canvas.height);
  12. }
  13. resize();
  14. addEventListener('resize', resize);
  15.  
  16. const cols = ['#555', 'white', 'gray', '#a4c3eb', '#75879e'];
  17.  
  18. const getCol = () => cols[Math.floor(Math.random() * cols.length)];
  19.  
  20. function rect() {
  21.   let x = innerWidth / 2;
  22.   let y = innerHeight / 2;
  23.   let col = getCol();
  24.   let width = 10;
  25.   let height = 10;
  26.   let halfWidth = width / 2;
  27.   let halfHeight = height / 2;
  28.   let alpha = 0.15 + Math.random() * 0.5;
  29.   let vx = 0;
  30.   let vy = 0;
  31.   let rot = 0;
  32.   let rotInc = Math.random() * 0.1 - 0.05;
  33.  
  34.   function change() {
  35.     vx += (Math.random() * 1 - 0.5) / 2;
  36.     vy += (Math.random() * 1 - 0.2) / 2;
  37.   }
  38.   change();
  39.  
  40.   function check() {
  41.     if (x < 0) x = innerWidth;
  42.     if (y < 0) y = innerHeight;
  43.     if (x > innerWidth) x = 0;
  44.     if (y > innerHeight) y = 0;
  45.   }
  46.  
  47.   const radius = 20 + Math.random() * 80;
  48.   const verts = [];
  49.   const NUM = 200;
  50.   const off = Math.random() * 5;
  51.   const cols = [];
  52.   for (var i = 0; i < NUM; i += 2) {
  53.     let xp = Math.random() * 10 - 5;
  54.     let yp = Math.random() * 10 - 5;
  55.     let zp = Math.random() * 10 - 5;
  56.     let dist = Math.sqrt(xp * xp + yp * yp + zp * zp);
  57.     // normalize and scale x,y,z
  58.     verts[i] = (xp / dist) * radius;
  59.     verts[i + 1] = (yp / dist) * radius;
  60.     cols.push(i % 255);
  61.   }
  62.  
  63.   return () => {
  64.     if (Math.random() < 0.13) {
  65.       change();
  66.     }
  67.  
  68.     vx *= 0.99;
  69.     vy *= 0.99;
  70.  
  71.     x += vx;
  72.     y += vy;
  73.  
  74.     check();
  75.  
  76.     c.globalAlpha = alpha;
  77.  
  78.     c.save();
  79.  
  80.     rot += rotInc;
  81.     c.translate(x, y);
  82.     c.rotate(rot);
  83.  
  84.     for (var i = 0; i < NUM; i += 2) {
  85.       const channel = cols[i];
  86.       c.fillStyle = `rgb(${channel}, ${channel}, ${channel})`;
  87.       c.fillRect(verts[i], verts[i + 1], 2, 2);
  88.     }
  89.     c.restore();
  90.   };
  91. }
  92.  
  93. let rects = [];
  94. let NUM = 20;
  95.  
  96. for (let i = 0; i < NUM; i++) {
  97.   rects.push(rect());
  98. }
  99.  
  100. rects[0]();
  101.  
  102. function loop() {
  103.   c.globalCompositeOperation = 'source-over';
  104.   c.globalAlpha = 0.025;
  105.   c.fillStyle = '#000';
  106.   c.fillRect(0, 0, canvas.width, canvas.height);
  107.  
  108.   for (let i = 0; i < NUM; i++) {
  109.     rects[i]();
  110.   }
  111.  
  112.   requestAnimationFrame(loop);
  113. }
  114.  
  115. loop();
// animation // canvas // javascript // speed-coded

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

Flower of Life Canvas

  1. ((
  2.   d = document,
  3.   b = d.body,
  4.   rad = (innerWidth * 1.9) / 6,
  5.   theta = 0,
  6.   thetaSpeed = 0.03,
  7.   cx = innerWidth / 4,
  8.   cy = innerHeight / 4,
  9.   ox = 0,
  10.   oy = 0,
  11.   offTheta,
  12.   x, y, ang, step, blur,
  13.   _
  14. ) => {
  15.   Object.assign(b.style, {
  16.     background: 'black',
  17.     margin: 0
  18.   }) 
  19.  
  20.   blur = Object.assign(d.createElement`canvas`, {
  21.     width: innerWidth * 2,
  22.     height: innerHeight * 2
  23.   }).getContext`2d`
  24.  
  25.   with (Math) {
  26.     with (b.appendChild(
  27.       Object.assign(d.createElement`canvas`, {
  28.         width: innerWidth * 2,
  29.         height: innerHeight * 2
  30.       })
  31.     ).getContext`2d`) {
  32.       Object.assign(canvas.style, {
  33.         width: '100%',
  34.         height: '100%'
  35.       })
  36.  
  37.       onresize = () => {
  38.         blur.canvas.width = canvas.width = innerWidth * 2
  39.         blur.canvas.height = canvas.height = innerHeight * 2
  40.         rad = (innerWidth * 2.5) / 6
  41.         cx = innerWidth
  42.         cy = innerHeight
  43.         fillStyle = '#000'
  44.         fillRect(0, 0, canvas.width, canvas.height)
  45.       }
  46.       onresize()
  47.  
  48.       step = (PI * 2) / 6
  49.  
  50.       _ = t => {
  51.         ang = ~~(t / 500) % 7
  52.  
  53.         globalAlpha = 0.23
  54.         fillStyle = '#fff'
  55.  
  56.         if (ang > 0) {
  57.           offTheta = step * ang
  58.           ox = rad * cos(offTheta)
  59.           oy = rad * sin(offTheta)
  60.         } else {
  61.           ox = 0
  62.           oy = 0
  63.         }
  64.  
  65.         for (i = 0; i < 20; i++) {
  66.           x = ox + cx + rad * cos(theta)
  67.           y = oy + cy + rad * sin(theta)
  68.           theta += thetaSpeed
  69.  
  70.           fillRect(x, y, 4, 4)
  71.         }
  72.  
  73.         blur.drawImage(canvas, 0, 0)
  74.  
  75.         globalAlpha = 0.05
  76.         drawImage(blur.canvas, 0, 2)
  77.  
  78.         requestAnimationFrame(_)
  79.       }
  80.       _()
  81.     }
  82.   }
  83. })()

Speed coded animated flower of life on canvas

// animation // canvas // javascript // math // obfuscation // speed-coded

Wiggly Line on Canvas 2

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5. document.body.style.margin = 0;
  6.  
  7. function resize() {
  8.   canvas.width = innerWidth * 2;
  9.   canvas.height = innerHeight * 2;
  10.   canvas.style.width = innerWidth + 'px';
  11.   canvas.style.height = innerHeight + 'px';
  12. }
  13. addEventListener('resize', resize);
  14. resize();
  15.  
  16. const PAD = 50;
  17. const RAD = 2;
  18. const SPEED = 200;
  19. const TWO_PI = Math.PI * 2;
  20.  
  21. let mode = 'draw';
  22.  
  23. let t = Math.random() * TWO_PI, 
  24.     x = canvas.width / 2, 
  25.     y = canvas.height / 2,
  26.     vx = 0, vy = 0, ta = 0;
  27.  
  28. let solid = false;
  29. let dotMod = 3;
  30. function loop() {
  31.   if (Math.random() < .01) solid = !solid;
  32.   if (Math.random() < .01) dotMod = [2, 3, 6][Math.floor(Math.random() * 3)]
  33.  
  34.   for (var i = 0; i < SPEED; i++) {
  35.     t = Math.sin(ta) * TWO_PI;
  36.     vx = RAD * Math.cos(t);
  37.     vy = RAD * Math.sin(t);
  38.     ta += Math.random() * 0.1 - 0.05;
  39.     x += vx;
  40.     y += vy;
  41.  
  42.     if (Math.random() < 0.005) {
  43.       mode = 'no draw';
  44.     } else if (Math.random() < 0.005) {
  45.       mode = 'draw';
  46.     }
  47.  
  48.     if (mode === 'draw' && (solid || i % dotMod === 0)) {
  49.       c.fillStyle = 'black';
  50.       c.fillRect(x, y, 2, 2);
  51.     }
  52.  
  53.     if (x < -PAD) {
  54.       x = canvas.width + PAD;
  55.     } else if (x > canvas.width + PAD) {
  56.       x = -PAD;
  57.     }
  58.     if (y < -PAD) {
  59.       y = canvas.height + PAD;
  60.     } else if (y > canvas.height + PAD) {
  61.       y = -PAD;
  62.     }
  63.   }
  64.  
  65.   requestAnimationFrame(loop);
  66. }
  67. loop();

This is a variation on a post from awhile back. I was posting it over on dev.to and realized I wanted it to look a bit different.

// animation // canvas // graphics // javascript
Older Posts
Newer Posts

Recent

Archive

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