)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Flun Draw

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth * 2
  5. canvas.height = innerHeight * 2
  6. document.body.append(canvas)
  7. canvas.style.width = innerWidth + 'px'
  8. canvas.style.height = innerHeight + 'px'
  9. c.fillStyle = 'white'
  10. c.fillRect(0, 0, canvas.width, canvas.height)
  11.  
  12. const flun = (
  13.   ax = innerWidth,
  14.   ay = innerHeight,
  15.   r = 0,
  16.   x = 0, y = 0,
  17.   t = 0,
  18.   dt = 0,
  19.   spin = 0,
  20.   spinc = .1,
  21.   rinc = 0,
  22.   col = 'black',
  23.   hist = []
  24. ) => {
  25.  
  26.   const init = () => {
  27.     dt = Math.random() * Math.PI * 2
  28.     r = 0
  29.     rinc = Math.random() * 1
  30.     spinc = Math.random() * .01 - .005
  31.     col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']
  32.       [~~(Math.random() * 3)]
  33.   }
  34.   init()
  35.  
  36.   return () => {
  37.  
  38.     spin += spinc
  39.     if (Math.random() < .005) {
  40.       init()
  41.     } else {
  42.       r += rinc
  43.     }
  44.  
  45.     if (Math.random() < .01) {
  46.       ax = x
  47.       ay = y
  48.       const inside = ax > 0 &&
  49.         ax < canvas.width &&
  50.         ay > 0 &&
  51.         ay < canvas.height
  52.       if (!inside) {
  53.         const p = hist[~~(Math.random() * hist.length)]
  54.         ax = p[0]
  55.         ay = p[1]
  56.       }
  57.       init()
  58.     } 
  59.  
  60.     t += (dt - t) / 22
  61.  
  62.     x = ax + Math.cos(t + spin) * r
  63.     y = ay + Math.sin(t + spin) * r
  64.  
  65.     if (x > 0 && x < canvas.width &&
  66.       y > 0 && y < canvas.height) {
  67.       hist.push([x, y])
  68.     }
  69.  
  70.     c.fillStyle = col
  71.     c.fillRect(x, y, 4, 4)
  72.   }
  73. }
  74.  
  75. const f = flun()
  76.  
  77. setInterval(() => {
  78.   for (let i = 0; i < 20; i++) f()
  79. }, 16)

Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects

T Plant

  1. const { PI } = Math
  2. const canvas = document.createElement('canvas')
  3. const c = canvas.getContext('2d')
  4.  
  5. canvas.width = innerWidth * 2
  6. canvas.height = innerHeight * 2
  7. canvas.style.scale = '.5 .5'
  8. canvas.style.transformOrigin = '0 0'
  9. document.body.append(canvas)
  10. let o = -PI / 2
  11.  
  12. const r = (n = 1) => Math.random() * n
  13.  
  14. function branch(x, y, ang = o, f) {
  15.   let vx, vy
  16.   let life = 0
  17.   let dead
  18.   let vv = 1 + r(2)
  19.   let ll = r(200)
  20.   let a = 1;
  21.   if (f) a = 0
  22.  
  23.   return () => {
  24.     if (dead) return
  25.     if (life > 200 + ll) {
  26.       dead = true;
  27.       let n = 10 + r(20)
  28.       for (let i = 0; i < n; i++) {
  29.  
  30.         let dest = {
  31.           x,
  32.           y: y + r(30) - 15
  33.         }
  34.         bs.push(leafPart(x, y, dest))
  35.       }
  36.     }
  37.  
  38.     life++
  39.     if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {
  40.       if (r() < .3) {
  41.         dead = true
  42.         bs.push(
  43.           branch(x, y, ang + r(PI / 4)))
  44.         branch(x, y, ang + r(-PI / 4))
  45.         return
  46.       }
  47.       bs.push(
  48.         branch(x, y, o + r(2) - 1))
  49.     }
  50.     vx = Math.cos(ang)
  51.     vy = Math.sin(ang) * vv
  52.     ang += r(.1) - .05
  53.  
  54.     x += vx
  55.     y += vy
  56.     c.fillStyle = `rgba(255, 255, 255, ${a})`
  57.     if (f) {
  58.       a += .01
  59.     }
  60.  
  61.     c.fillRect(x, y, 4, 4)
  62.   }
  63. }
  64.  
  65. function leafPart(x, y, dest) {
  66.   let ang = r(7)
  67.   let rr = r(1) + .5
  68.   let vv = -r(3)
  69.   let life = 0
  70.   let maxLife = 40 + r(200)
  71.   let vx
  72.   let vy
  73.   let CC = 190 + r(30)
  74.  
  75.   return () => {
  76.     life++
  77.     if (life < maxLife) {
  78.       vx = Math.cos(ang) * rr
  79.       vy = Math.sin(ang) * rr + vv
  80.       x += vx
  81.       y += vy
  82.       ang += r(.4) - .2
  83.       c.fillStyle = 'rgba(255, 255, 255, .1)'
  84.     } else {
  85.       c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`
  86.       x += (dest.x - x) / 42
  87.       y += (dest.y - y) / 12
  88.     }
  89.  
  90.     c.fillRect(x, y, 4, 4)
  91.   }
  92. }
  93. let bs = []
  94. let lf = []
  95.  
  96. bs.push(
  97.   branch(innerWidth, innerHeight * 1.9, o, true)
  98. )
  99.  
  100. function loop() {
  101.   bs.forEach(b => b())
  102.   requestAnimationFrame(loop)
  103. }
  104. loop()

Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops 😀

See the short here…

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…

Golfed Codepen – 3D Spiral Thing

  1. // sort of golfed version of https://www.instagram.com/p/C1uv6Kqv19T/
  2. // by @mewtru
  3. b = document.body
  4. a = Object.assign
  5. a(b.style, { background:'#000', color:'#fff'})
  6. w = 'snippet.zone snippet.zone'.toUpperCase().split``
  7. F = (n, O = 0, C, S, o, t) => { 
  8.   b.innerHTML += `<div id=${n} style='position:absolute;left:50%;top:50%;translate:-50% -50%;width:100% text-align:center;white-space:nowrap'></div>`
  9.   w.map(l => this[n].innerHTML += `<span style='display:inline-block;margin-right:5px;font-size:28px'>${l}</span>`)
  10.   t = O
  11.   setInterval(_ => {
  12.     t += .005
  13.     ;[...this[n].children].map((e, i) => { 
  14.       T = t + i / 2.7
  15.       a(e.style, {
  16.         translate: `0 ${Math.sin(T) * 100}px`,
  17.         scale: Math.cos(T) * .5 + .5})
  18.     }, 16)
  19.   })
  20. }
  21. F('Z') 
  22. F('X', 3)

“Very cool” pen by Lucas Fernando that comes from @mewtru
I decided to do a speed-coded semi-golfed version… can definitely be way more golfed 😀

Parametric Equation for Rectangle

  1. // from http://math.stackexchange.com/questions/69099/equation-of-a-rectangle
  2. const rect = (px, py, rx, ry, t) => ({
  3.   x: px + rx + rx * (Math.abs(Math.cos(t)) * Math.cos(t) + Math.abs(Math.sin(t)) * Math.sin(t)),
  4.   y: py + ry + ry * (Math.abs(Math.cos(t)) * Math.cos(t) - Math.abs(Math.sin(t)) * Math.sin(t))
  5. })
  6.  
  7. const SIZE = 200
  8.  
  9. const c = document.body.appendChild(
  10.   Object.assign(document.createElement`canvas`,
  11.     { width: SIZE, height: SIZE }
  12.   )).getContext`2d`
  13.  
  14. c.fillStyle = 'black'
  15. c.fillRect(0, 0, SIZE, SIZE)
  16.  
  17. let t = 0
  18. setInterval(() => {
  19.   const { x, y } = rect(20, 20, 60, 70, t)
  20.   c.fillStyle = 'rgba(255, 0, 0, .1)'
  21.   c.fillRect(x, y, 10, 10)
  22.   t += .05
  23. }, 16)

Wanted to know how to do this for something back in 2015. Great math stackexchange answer here: http://math.stackexchange.com/questions/69099/equation-of-a-rectangle

Could be optimized but leaving as is to match:

x = p(|cos t|cos t + |sin t| sin t)
y = p(|cos t|cos t - |sin t| sin t)

One small change here is to add the width and height to the offset so that it draws from the upper left hand corner instead of the center…

snippet.zone /// {s/z}