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

Swrls

  1. const canvas = document.createElement("canvas");
  2. const c = canvas.getContext("2d");
  3.  
  4. canvas.width = innerWidth;
  5. canvas.height = innerHeight;
  6. document.body.append(canvas); 
  7.  
  8. const TWO_PI = 2 * Math.PI;
  9.  
  10. class Dot {
  11.   constructor(id, x, y, theta, parent) {
  12.     this.x = x;
  13.     this.y = y;
  14.     this.t = theta;
  15.     this.vx = Math.cos(this.t) * Math.random() * 2;
  16.     this.vy = Math.sin(this.t) * Math.random() * 2;
  17.     this.life = 30;
  18.     this.col = parent.col;
  19.  
  20.     if (Math.random() < 0.005) this.other = true;
  21.     if (this.other) {
  22.       this.life = 1000;
  23.       this.t = Math.random() * 7;
  24.       this.vx = Math.cos(this.t) * Math.random() * 2;
  25.       this.vy = Math.sin(this.t) * Math.random() * 2;
  26.       this.col = "black";
  27.     }
  28.     this.iter = 0;
  29.     this.parent = parent;
  30.     this.id = id;
  31.     this.alpha = 0.25;
  32.  
  33.     if (Math.random() < 0.3) this.alpha = 0.25;
  34.   }
  35.  
  36.   draw() {
  37.     this.x += this.vx;
  38.     this.y += this.vy;
  39.     this.iter++;
  40.     if (this.iter > this.life) {
  41.       delete this.parent.dots[this.id];
  42.     }
  43.     c.fillStyle = this.col;
  44.     c.globalAlpha = this.alpha;
  45.     if (!this.no) this.alpha -= 0.00125;
  46.     c.fillRect(this.x, this.y, this.parent.size, this.parent.size);
  47.   }
  48. }
  49.  
  50. class Stain {
  51.   constructor(x = innerWidth, y = innerHeight) {
  52.     this.x = x / 2;
  53.     this.y = y / 2;
  54.     this.num = 1;
  55.     this.step = TWO_PI / this.num;
  56.  
  57.     this.size = 1 + Math.random() * Math.random() * 2;
  58.     this.rad = Math.random() * 300;
  59.     this.dots = {};
  60.     this.dotId = 0;
  61.     this.col = Math.random() < 0.8 ? "white" : "black";
  62.     this.to = Math.random() * 7;
  63.     this.S = 20 + Math.random() * 50;
  64.     this.R = 100 + Math.random() * 300;
  65.     this.rr = 50 + Math.random() * 300;
  66.     this.dir = Math.random() < 0.6 ? 1 : Math.random() * 10 - 5;
  67.     this.v = 1;
  68.     this.tt = 0;
  69.     if (Math.random() * 0.25) this.v = Math.random() * 5;
  70.   }
  71.  
  72.   draw() { 
  73.     const circ = this.rad * TWO_PI;
  74.     this.rad -= this.v;
  75.  
  76.     this.step = TWO_PI / circ;
  77.  
  78.     if (this.rad > 0) {
  79.       for (let i = 1; i <= this.R; i += this.S) {
  80.         let t = (i * this.step + this.to) * this.dir;
  81.         let x = this.x + this.rad * Math.cos(t);
  82.         let y = this.y + this.rad * Math.sin(t);
  83.         this.dots[this.dotId] = new Dot(this.dotId, x, y, t, this);
  84.         this.dotId++;
  85.       }
  86.     }
  87.     for (let i in this.dots) {
  88.       if (this.dots[i]) this.dots[i].draw();
  89.     }
  90.   }
  91. }
  92.  
  93. onresize = e => {
  94.   canvas.width = innerWidth;
  95.   canvas.height = innerHeight;
  96.   c.fillStyle = "black";
  97.   c.fillRect(0, 0, innerWidth, innerHeight)
  98. }
  99.  
  100. onresize()
  101.  
  102. let ss = [new Stain()];
  103.  
  104. function loop() {
  105.   if (Math.random() < 0.05) {
  106.     ss.push(
  107.       new Stain(Math.random() * innerWidth * 2, Math.random() * innerHeight * 2)
  108.     );
  109.   }
  110.   ss.forEach((s) => s.draw());
  111.   c.globalAlpha = 0.05;
  112.   c.drawImage(canvas, 0, 3, canvas.width + 0.2, canvas.height - 6);
  113.   c.globalAlpha = 1;
  114.   requestAnimationFrame(loop);
  115. }
  116. loop();

Speed coding for some recent youtube shorts…

// animation // canvas // color // curves // graphics // hacks // javascript // math // random // speed-coded // speedcoding // tricks

Simple Way to Validate CSS Colors

  1. function isColor(col) {
  2.   const cache = isColor[col]
  3.   if (cache != null) {
  4.     console.log('- reading cache')
  5.     return cache
  6.   }
  7.   isColor.el.style = ''
  8.   isColor.el.style.color = col
  9.   return isColor[col] = !!isColor.el.style.color
  10. }
  11. isColor.el = document.createElement('div')
  12.  
  13.  
  14. console.log('is "red" a color?', isColor('red'))
  15. console.log('from the cache: ', isColor('red'))
  16.  
  17. console.log('is "rgbx(1, 2, 3)" a color?', isColor('rgbx(1, 2, 3)'))
  18.  
  19. console.log('is "#0f0" a color?', isColor('#0f0'))
  20.  
  21. console.log('is "hsl(192, 50%, 50%)" a color?', isColor('hsl(192, 50%, 50%)'))
  22. console.log('from the cache: ', isColor('hsl(192, 50%, 50%)'))
  23.  
  24. console.log('is "lab(2000.1337% -8.6911 -159.131231 / .987189732)" ?',
  25.   isColor('lab(2000.1337% -8.6911 -159.131231 / .987189732)'))
  26.  
  27. console.log('is "snippetZone" ?', isColor('snippetZone'))

I find this technique is usually good enough to validate colors…

// color // css // dom // graphics // hacks // hex // html // javascript // tricks

Cut Hole in Canvas (eraser)

  1. document.body.style.background = 'gray';
  2. const canvas = document.createElement('canvas');
  3. const c = canvas.getContext('2d');
  4.  
  5. canvas.width = 300;
  6. canvas.height = 300;
  7.  
  8. c.fillStyle='rgba(255, 0, 0, 0.8)'
  9. c.fillRect(0, 0, canvas.width, canvas.height);
  10.  
  11. c.globalCompositeOperation = 'destination-out';
  12. c.fillStyle = 'black';
  13. c.fillRect(100, 100, 150, 50);
  14.  
  15. document.body.appendChild(canvas);

destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.

// canvas // color // graphics // tricks

Thinking About Colors

  1. const { assign } = Object
  2. const { min, max, floor, round, abs } = Math
  3.  
  4. // `hslToRgb` and `rgbToHsl` functions from the amazing Raphael library
  5. // by Dmitry Baranovskiy
  6. // https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.js
  7.  
  8. export function hslToRgb({ h, s, l, a }) {
  9.   let H = h
  10.   let S = s
  11.   let L = l
  12.  
  13.   s /= 100
  14.   l /= 100
  15.  
  16.   let r, g, b, x, c
  17.   h = (h % 360) / 60
  18.   c = 2 * s * (l < .5 ? l : 1 - l)
  19.   x = c * (1 - abs(h % 2 - 1))
  20.   r = g = b = l - c / 2;
  21.   h = floor(h)
  22.   r += [c, x, 0, 0, x, c][h]
  23.   g += [x, c, c, x, 0, 0][h]
  24.   b += [0, 0, x, c, c, x][h]
  25.   r *= 255; g *= 255; b *= 255
  26.   r = round(r)
  27.   g = round(g)
  28.   b = round(b)
  29.   return { r, g, b, h: H, s: S, l: L, a }
  30. }
  31.  
  32. export function rgbToHsl({ r, g, b, a }) {
  33.   let R = r
  34.   let G = g
  35.   let B = b
  36.  
  37.   r /= 255
  38.   g /= 255
  39.   b /= 255
  40.  
  41.   let h, s, l, w, m, c;
  42.   w = max(r, g, b);
  43.   m = min(r, g, b);
  44.   c = w - m;
  45.   h = (c == 0 ? null :
  46.         w == r ? (g - b) / c :
  47.         w == g ? (b - r) / c + 2 :
  48.                  (r - g) / c + 4)
  49.   h = ((h + 360) % 6) * 60 / 360;
  50.  
  51.   l = (w + m) / 2;
  52.   s = (c == 0 ? 0 : l < .5 ?
  53.     c / (2 * l) :
  54.     c / (2 - 2 * l));
  55.   h *= 360
  56.   s *= 100
  57.   l *= 100
  58.   h = round(h)
  59.   s = round(s)
  60.   l = round(l);
  61.   return { h, s, l, r: R, g: G, b: B, a }
  62. }
  63.  
  64. const fromDec = dec => ({
  65.   r: dec >> 16,
  66.   g: dec >> 8 & 255,
  67.   b: dec & 255
  68. })
  69.  
  70. const fromHex = hex =>
  71.   fromDec(Number('0x' + hex.slice(1)))
  72.  
  73. const components = def =>
  74.   def.match(/[0-9\.]+/g).map(parseFloat)
  75.  
  76. const fromRgb = rgb => {
  77.   const [r, g, b, a] = components(rgb)
  78.   return { r, g, b, a: a ?? 1 }
  79. }
  80.  
  81. const fromHsl = hsl => {
  82.   const [h, s, l, a] = components(hsl)
  83.   return { h, s, l, a: a ?? 1 }
  84. }
  85.  
  86. const utils = {
  87.   hex: (def, o) => assign(o, rgbToHsl(
  88.     fromHex(def)), { a: o.a ?? 1 }
  89.   ),
  90.   rgb: (def, o) => assign(o, rgbToHsl(fromRgb(def))),
  91.   hsl: (def, o) => assign(o, hslToRgb(fromHsl(def))),
  92.   prop: (def, o) => {
  93.     const name = Object.keys(def)[0]
  94.     o[name] = def[name]
  95.     if (name.match(/[rgb]/)) assign(o, rgbToHsl(o))
  96.     if (name.match(/[hsl]/)) assign(o, hslToRgb(o))
  97.  
  98.     return o
  99.   }
  100. }
  101.  
  102. const types = { '#': 'hex', r: 'rgb', h: 'hsl', '[': 'prop' }
  103. const type = str => types[str[0]]
  104.  
  105. const hx = c => {
  106.   const chan = (+c).toString(16)
  107.   if (chan.length === 0) return '00'
  108.   if (chan.length === 1) return '0' + chan
  109.   return chan
  110. };
  111.  
  112. export function shade(def) {
  113.   const o = {
  114.     set(def) {
  115.       const method = utils[type(String(def))]
  116.       if (method != null) method(def, o)
  117.     },
  118.     hsl: _ => `hsla(${o.h}, ${o.s}%, ${o.l}%, ${o.a})`,
  119.     rgb: _ => `rgba(${o.r}, ${o.g}, ${o.b}, ${o.a})`,
  120.     hex: _ => `#${hx(o.r)}${hx(o.g)}${hx(o.b)}`
  121.   }
  122.   o.set(def)
  123.   return o;
  124. }

Wrote this today for something at work… it’s not done yet but figured it was worth a post… will probably post finished version tomorrow…

This can be a little golfed since it is just a demo for work and not code on a real product 😀

// color // javascript

HWB Colors

  1. // Safari and Firefox only... no Chrome support at time of this post
  2. Object.assign(document.body.style, { 
  3.   margin: 0,
  4.   display: 'grid',
  5.   'grid-template-columns': '1fr 1fr 1fr',
  6. });
  7.  
  8. const hwbBlock = () => {
  9.   const hue = Math.round(Math.random() * 360)
  10.   const white = Math.round(
  11.     Math.random() * Math.random() * 100)
  12.   const black = Math.round(
  13.     Math.random() * Math.random() * 100)
  14.   const col = `hwb(${hue} ${white}% ${black}%)`
  15.   document.body.innerHTML += `
  16.     <div 
  17.       style="
  18.         width: 100%;
  19.         height: 4em;
  20.         font-family: sans-serif;
  21.         text-align: center;
  22.         line-height: 2.3;
  23.         color: white;
  24.         text-shadow: 1px 1px 5px black;
  25.         background:${col}">${col}</div>
  26.   `
  27. }
  28.  
  29. Array(102).fill(0).map(hwbBlock);

HWB color format… Looking forward to better support on this CSS color format…

// color // css
Older Posts

Recent

Archive

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