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

Average Some Curves

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5.  
  6. function resize() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   draw();
  10. }
  11.  
  12. function draw() {
  13.   c.clearRect(0, 0, canvas.width, canvas.height);
  14.  
  15.   Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  16.   const iter = 100,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 50, rad2 = 50, theta = 0, x, y;
  20.   let x2, y2;
  21.   for (let i = 0; i < iter; i++) {
  22.     c.fillStyle = 'blue';
  23.     x = halfWidth + rad * Math.cos(theta);
  24.     y = halfHeight + rad * Math.sin(theta);
  25.     c.fillRect(x, y, 5, 5);
  26.  
  27.     c.fillStyle = 'red';
  28.  
  29.     rad2 = 80 + rad * Math.cos(theta * 3);
  30.     x2 = halfWidth + rad2 * Math.cos(theta);
  31.     y2 = halfHeight + rad2 * Math.sin(theta);
  32.     c.fillRect(x2, y2, 5, 5);
  33.  
  34.     c.fillStyle = 'green';
  35.     c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);
  36.  
  37.     theta += .1;
  38.   }
  39. }
  40.  
  41. resize();
  42. window.addEventListener('resize', resize);
// canvas // graphics // math // speedcoding

Raphaël Easing Equations

  1. var ef = R.easing_formulas = {
  2.     linear: function (n) {
  3.         return n;
  4.     },
  5.     "<": function (n) {
  6.         return pow(n, 1.7);
  7.     },
  8.     ">": function (n) {
  9.         return pow(n, .48);
  10.     },
  11.     "<>": function (n) {
  12.         var q = .48 - n / 1.04,
  13.             Q = math.sqrt(.1734 + q * q),
  14.             x = Q - q,
  15.             X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
  16.             y = -Q - q,
  17.             Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
  18.             t = X + Y + .5;
  19.         return (1 - t) * 3 * t * t + t * t * t;
  20.     },
  21.     backIn: function (n) {
  22.         var s = 1.70158;
  23.         return n * n * ((s + 1) * n - s);
  24.     },
  25.     backOut: function (n) {
  26.         n = n - 1;
  27.         var s = 1.70158;
  28.         return n * n * ((s + 1) * n + s) + 1;
  29.     },
  30.     elastic: function (n) {
  31.         if (n == !!n) {
  32.             return n;
  33.         }
  34.         return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
  35.     },
  36.     bounce: function (n) {
  37.         var s = 7.5625,
  38.             p = 2.75,
  39.             l;
  40.         if (n < (1 / p)) {
  41.             l = s * n * n;
  42.         } else {
  43.             if (n < (2 / p)) {
  44.                 n -= (1.5 / p);
  45.                 l = s * n * n + .75;
  46.             } else {
  47.                 if (n < (2.5 / p)) {
  48.                     n -= (2.25 / p);
  49.                     l = s * n * n + .9375;
  50.                 } else {
  51.                     n -= (2.625 / p);
  52.                     l = s * n * n + .984375;
  53.                 }
  54.             }
  55.         }
  56.         return l;
  57.     }
  58. };
  59. ef.easeIn = ef["ease-in"] = ef["<"];
  60. ef.easeOut = ef["ease-out"] = ef[">"];
  61. ef.easeInOut = ef["ease-in-out"] = ef["<>"];
  62. ef["back-in"] = ef.backIn;
  63. ef["back-out"] = ef.backOut;

Another fun chunk of code directly from the Raphaël source. Makes me think of the Penner easing equations.

// animation // javascript // math

HSL to RGB JavaScript

  1. const hsl2rgb = (h, s, l, o) => {
  2.   if (h > 1 || s > 1 || l > 1) {
  3.       h /= 360;
  4.       s /= 100;
  5.       l /= 100;
  6.   }
  7.   h *= 360;
  8.  
  9.   let R, G, B, X, C;
  10.  
  11.   h = (h % 360) / 60;
  12.   C = 2 * s * (l < .5 ? l : 1 - l);
  13.   X = C * (1 - Math.abs(h % 2 - 1));
  14.   R = G = B = l - C / 2;
  15.  
  16.   h = ~~h;
  17.   R += [C, X, 0, 0, X, C][h];
  18.   G += [X, C, C, X, 0, 0][h];
  19.   B += [0, 0, X, C, C, X][h];
  20.   return `rgba(${~~(R * 255)}, ${~~(G * 255)}, ${~~(B * 255)}, ${o})`;
  21. };
  22.  
  23. console.log(hsl2rgb(122, 50, 50, .5));

Taken from the Raphaël source… Always fun to browse – I’ve learned lots of great stuff from it 😀

// color // javascript // math

Polar Forking Tweak

  1. const FOUR_PI = 6 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() { 
  16.   c.fillStyle = 'rgba(0, 0, 0, .3)'
  17.   c.fillRect(0, 0, canvas.width, canvas.height)
  18.   c.fillStyle = 'white';
  19.  
  20.   const halfWidth = window.innerWidth / 2;
  21.   const halfHeight = window.innerHeight / 2;
  22.   let theta = 0,
  23.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  24.     x,
  25.     y;
  26.  
  27.   c.save();
  28.   c.translate(halfWidth, halfHeight)
  29.  
  30.   let b = 5 * cos(inc);
  31.   inc += .02;
  32.  
  33.   for (let i = 0; theta < FOUR_PI; i++) {
  34.     let rad = a * (b + 10 * sin(theta / 3));
  35.     // randomly speed-coded and tweaked... leaving as is :D
  36.     x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);
  37.     y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);
  38.     c.fillRect(x,y, 2, 2);
  39.     theta += 0.04;
  40.   }
  41.   c.restore();
  42.  
  43.   requestAnimationFrame(draw)
  44. }
  45.  
  46. resize();
  47. addEventListener('resize', resize);
  48.  
  49. draw();

Just randomly futzing with sin/cos…

// animation // canvas // curves // graphics // hacks // humor // math

Freeth’s Nephroid Animated

  1. const FOUR_PI = 4 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() {
  16.   c.clearRect(0, 0, canvas.width, canvas.height);
  17.   c.fillStyle = 'blue';
  18.  
  19.   const halfWidth = window.innerWidth / 2;
  20.   const halfHeight = window.innerHeight / 2;
  21.   let theta = 0,
  22.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  23.     x,
  24.     y;
  25.  
  26.   c.save();
  27.   c.translate(halfWidth, halfHeight)
  28.  
  29.   // Freeth's Nephroid
  30.   // https://mathshistory.st-andrews.ac.uk/Curves/Freeths/
  31.   // r = a(1 + 2sin(θ / 2))
  32.   let b = 2 * cos(inc);
  33.   inc += .01;
  34.  
  35.   for (let i = 0; theta < FOUR_PI; i++) {
  36.     let rad = a * (b + 2 * sin(theta / 2))
  37.     x = rad * cos(theta);
  38.     y = rad * sin(theta);
  39.     c.fillRect(x, y, 2, 2);
  40.     theta += 0.05;
  41.   }
  42.   c.restore();
  43.  
  44.   requestAnimationFrame(draw)
  45. }
  46.  
  47. resize();
  48. window.addEventListener('resize', resize);
  49.  
  50. draw()

It’s always fun to play with curves from here Famous Curves Index

// animation // canvas // javascript // math
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}