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

sTwister

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth * 2
  5. canvas.height = innerHeight * 2
  6. canvas.style.scale = '.5 .5'
  7. canvas.style.transformOrigin = '0 0'
  8. canvas.style.filter = 'contrast(1.1)'
  9. document.body.append(canvas)
  10.  
  11.  
  12. const canvas2 = document.createElement('canvas')
  13. const c2 = canvas2.getContext('2d')
  14.  
  15. canvas2.width = innerWidth * 2
  16. canvas2.height = innerHeight * 2
  17.  
  18.  
  19. const r = (n = 1) => Math.random() * n
  20.  
  21. let anc = ~~r(360)
  22.  
  23. function plaint(x, y) {
  24.   let vy = r(-20) - 1
  25.   let vx = 0
  26.   const cl = ~~r(50) + anc;
  27.   let t = r(7)
  28.   let rx = r(1) + .5
  29.   let jag = r(.5)
  30.   let bright = r(100)
  31.   return () => {
  32.     vx = rx * Math.cos(t)
  33.     if (r() < jag) {
  34.       t += r(3)
  35.     }
  36.     x += vx
  37.     y += vy
  38.     c.fillStyle = `hsla(${cl}, 20%, ${bright}%, .5)`
  39.  
  40.     c.fillRect(x, y, 4, 4)
  41.     if (y < 0) {
  42.       y = canvas.height
  43.       vy = r(-20) - 1
  44.     }
  45.   }
  46. }
  47.  
  48. function erase() {
  49.   c.fillStyle = 'black'
  50.   c.fillRect(0, 0, canvas.width, canvas.height)
  51.  
  52. }
  53. erase()
  54.  
  55. const plntNum = 350
  56. let xStep = canvas.width / plntNum
  57.  
  58. const plnt = []
  59. for (let i = 0; i < plntNum; i++) {
  60.   const x = i * xStep
  61.   plnt.push(plaint(x, canvas.height))
  62. }
  63.  
  64. let R = null 
  65.  
  66. function swister(C, x, y, fc, ss, n, slow) {
  67.   const shadesNum = n || 100
  68.   const shades = []
  69.   const rad = R || 200   
  70.  
  71.   for (let i = 0; i < shadesNum; i++) {
  72.     shades.push({
  73.       x,
  74.       y,
  75.       xx: 0,
  76.       yy: 0,
  77.       r: r(rad) + 200,
  78.       t: r(7),
  79.       rinc: r(1) - .1,
  80.       tinc: r(.1),
  81.       cl: fc(),
  82.       a: r(.02) + .01
  83.     }) 
  84.  
  85.   }
  86.  
  87.   return () => {
  88.     for (let i = 0; i < shadesNum; i++) {
  89.       let s = shades[i]
  90.       s.xx = s.x + s.r * Math.cos(s.t)
  91.       s.yy = s.y + s.r * Math.sin(s.t)
  92.       s.r -= s.rinc;
  93.       if (s.r < 200) {
  94.         s.r = r(rad) + 200
  95.         s.tinc = r(.1)
  96.         if (slow) s.tinc *= .1
  97.         if (r() < .5) s.inc *= -1;
  98.  
  99.         s.rinc = r(.1)
  100.       }
  101.       s.t += s.tinc
  102.       C.fillStyle = `rgba(${s.cl}, ${s.cl}, ${s.cl}, ${s.a})`
  103.       C.fillRect(s.xx, s.yy, ss, ss)
  104.     }
  105.   }
  106. }
  107.  
  108. R = r(canvas.width / 5) + 50
  109. let s1x = (canvas.width - R) * r() + R / 2
  110. let s1y = (canvas.height - R) * r() + R / 2
  111. let s = swister(c, s1x, s1y,
  112.   () => r(10), 24
  113. )
  114. let s2 = swister(c2,
  115.   s1x - 50, s1y - 50,
  116.   () => r(200) + 0, 4
  117. )
  118.  
  119. let s3 = swister(c2,
  120.   s1x - 50, s1y - 50,
  121.   () => r(50) + 200, 8, 4, true
  122. )
  123.  
  124.  
  125. R = r(150) + 50
  126. let s2x = (canvas.width - R) * r() + R / 2
  127. let s2y = (canvas.height - R) * r() + R / 2
  128. let sa = swister(c, s2x, s2y,   
  129.   () => r(10), 24
  130. )
  131. let sb = swister(c2,
  132.   s2x - 50, s2y - 50,
  133.   () => r(200) + 0, 4
  134. )
  135.  
  136. let sc = swister(c2,
  137.   s2x - 50, s2y - 50,
  138.   () => r(50) + 200, 8, 4, true
  139. ) 
  140.  
  141. function draw() {
  142.  
  143.   c.globalAlpha = 1;
  144.   c.globalCompositeOperation = 'source-over'  
  145.   plnt.forEach(p => p())
  146.  
  147.   s()
  148.   sa()
  149.   c.globalAlpha = .05;
  150.   c.drawImage(canvas, -10, -10, canvas.width + 10, canvas.height + 10)
  151.   // c.globalCompositeOperation = 'source-atop'
  152.   s2()
  153.   sb()
  154.   s3()
  155.   sc()
  156.   c.globalAlpha = 1
  157.   c.globalCompositeOperation = 'hard-light'
  158.   c.drawImage(canvas2, 0, 0);
  159.   c.globalAlpha = .02; 
  160.  
  161.   c.drawImage(canvas, 0, 0, canvas.width, canvas.height + 10)
  162.   requestAnimationFrame(draw)
  163. }
  164. draw()

Speed-coded this on the train the other day. Might port over to WebGL sometime soon…

// canvas // codegolf // golfed // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

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…

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

zxlp Hidden SierpiƄski

  1. // https://actionsnippet.com/?p=349
  2. // zxlp : Hidden SierpiƄski
  3. const canvas = document.createElement('canvas')
  4. const c = canvas.getContext('2d')
  5.  
  6. let s = .5
  7. canvas.width = innerWidth * s
  8. canvas.height = innerHeight * s
  9. canvas.style.transformOrigin = '0 0'
  10. canvas.style.scale = 1 / s
  11. canvas.style.imageRendering = 'pixelated'
  12. document.body.append(canvas)
  13.  
  14. const frame = document.createElement('canvas')
  15. const fc = frame.getContext('2d')
  16. frame.width = canvas.width
  17. frame.height = canvas.height
  18.  
  19. const copy = document.createElement('canvas')
  20. const cc = copy.getContext('2d')
  21. copy.width = canvas.width
  22. copy.height = canvas.height
  23.  
  24. frame.style.left = '100px' 
  25. frame.style.top = '100px'
  26.  
  27. fc.fillStyle = 'red'
  28. fc.fillRect(0, 0, 100, 100)
  29.  
  30. const _ = c.getImageData(0, 0, canvas.width, canvas.height)
  31.  
  32. const size = canvas.width * canvas.height * 4
  33.  
  34. let mx = 0
  35. let mouseX = 0
  36.  
  37. onpointermove = e => {
  38.   mx = e.clientX
  39. }
  40.  
  41. function loop() {
  42.   mouseX += (mx - mouseX) / 50
  43.  
  44.   for (let i = 0; i < size; i += 4) {
  45.     let ox = (~~(i / 4)) % canvas.width
  46.     let oy = (~~(i / 4)) / canvas.width
  47.     let col = ((ox | oy) * mouseX / 20) % 255
  48.  
  49.     _.data[i] = 0
  50.     _.data[i + 1] = col
  51.     _.data[i + 2] = col
  52.     _.data[i + 3] = 255
  53.   }
  54.  
  55.   c.putImageData(_, 0, 0)
  56.  
  57.   requestAnimationFrame(loop);
  58. }
  59. loop();

port of an old actionsnippet (see here) – made a youtube short of it at some point here…

// binary // canvas // color // graphics // hacks // hex // javascript // math // oldschool // tricks

crystl

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. let w;
  5. let h;
  6.  
  7. onresize = e => {
  8.   w = innerWidth * 2
  9.   h = innerHeight * 2
  10.   canvas.width = w
  11.   canvas.height = h
  12.   canvas.style.width = (w / 2) + 'px'
  13.   canvas.style.height = (h / 2) + 'px'  
  14.   c.fillStyle = '#000'
  15.   c.fillRect(0, 0, w, h) 
  16. }
  17. onresize()
  18.  
  19. document.body.append(canvas)
  20. canvas.style.filter = 'contrast(2) brightness(1.2)'
  21.  
  22. class Crystal {
  23.   constructor() {
  24.     this.init()
  25.   }
  26.   init() {
  27.     this.x = w / 2
  28.     this.y = h * .7
  29.     this.rad = 250
  30.  
  31.     this.sides = 5
  32.     // + ~~(Math.random() * 5)
  33.     this.shrinkTime = 400 + Math.random() * 100 
  34.     this.t = Math.random() * 7
  35.     this.st = this.t;
  36.     this.step = (Math.PI * 2) / this.sides
  37.     this.time = 0
  38.     this.shrinkSpeed = 1.3 - Math.random() * .6
  39.     this.a = 0
  40.     this.ad = .05
  41.   }
  42.  
  43.   draw() { 
  44.  
  45.     this.a += (this.ad - this.a) / 150
  46.     c.lineWidth = 5
  47.     c.strokeStyle = `rgba(255, 255, 255, ${this.a})`
  48.     c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`
  49.     c.beginPath()
  50.  
  51.     for (let j = 0; j < 2; j++) {
  52.       this.time++
  53.       if (this.time > this.shrinkTime) {
  54.         this.rad -= this.shrinkSpeed
  55.         if (this.rad < 0) {
  56.           setTimeout(() => {
  57.             c.fillStyle = 'rgba(0, 0, 0, .02)'
  58.             c.fillRect(0, 0, w, h)
  59.             this.init()
  60.           }, 500)
  61.           return;
  62.         }
  63.       }
  64.       this.t = this.st
  65.       for (let i = 0; i < this.sides; i++) {
  66.         let p = {
  67.           x: this.rad * Math.cos(this.t),
  68.           y: this.rad * .6 * Math.sin(this.t)
  69.         }
  70.         this.t += this.step;
  71.         if (i === 0) {
  72.           c.moveTo(this.x + p.x, this.y + p.y)
  73.         } else {
  74.           c.lineTo(this.x + p.x, this.y + p.y)
  75.         }
  76.       }
  77.       c.closePath()
  78.       c.stroke() 
  79.       c.fill()
  80.  
  81.  
  82.       this.y -= 1
  83.     }
  84.   }
  85. }
  86.  
  87. let cryst = new Crystal()
  88.  
  89.  
  90. setInterval(() => {
  91.   for (let i = 0; i < 3; i++) cryst.draw()
  92. }, 16)

quick crystal for recent youtube short…

// 3d // canvas // gradients // graphics // hacks // isometric // javascript // math // random // speed-coded // speedcoding // tricks

squigs

  1. const canvas = document.body.appendChild(document.createElement("canvas"));
  2. const c = canvas.getContext("2d");
  3. document.body.style.margin = 0;
  4.  
  5. function resize() {
  6.   canvas.width = innerWidth * 2;
  7.   canvas.height = innerHeight * 2;
  8.   canvas.style.width = innerWidth + "px";
  9.   canvas.style.height = innerHeight + "px";
  10. }
  11. addEventListener("resize", resize);
  12. resize();
  13.  
  14. const PAD = 50;
  15. const RAD = 2;
  16. const SPEED = 40;
  17. const TWO_PI = Math.PI * 2;
  18.  
  19. let mode = "draw";
  20.  
  21. let t = Math.random() * TWO_PI,
  22.   x = innerWidth,
  23.   y = innerHeight,
  24.   vx = 0,
  25.   vy = 0,
  26.   ta = 0,
  27.   w = 10,
  28.   h = 1,
  29.   hue = 20;
  30.  
  31. function loop() {
  32.   c.globalAlpha = 1;
  33.   if (Math.random() < 0.12) {
  34.     let alpha = 0.02;
  35.     if (Math.random() < 0.1) alpha = 0.1;
  36.     c.fillStyle = `rgba(255, 255, 255, ${alpha})`;
  37.     c.fillRect(0, 0, canvas.width, canvas.height);
  38.   }
  39.   for (var i = 0; i < SPEED; i++) {
  40.     t = Math.sin(ta) * TWO_PI;
  41.     vx = RAD * Math.cos(t);
  42.     vy = RAD * Math.sin(t);
  43.     ta += Math.random() * 0.1 - 0.05;
  44.     x += vx;
  45.     y += vy;
  46.  
  47.     if (Math.random() < 0.005) {
  48.       mode = "no draw";
  49.       hue = [200, 20, 10, 40][~~(Math.random() * 4)];
  50.       if (Math.random() < 0.5) {
  51.         w = Math.random() * 200;
  52.         h = Math.random() * Math.random() * 10;
  53.       } else {
  54.         w = Math.random() * 20;
  55.         h = Math.random() * Math.random() * 200;
  56.       }
  57.     } else if (Math.random() < 0.005) {
  58.       mode = "draw";
  59.     }
  60.  
  61.     if (mode === "draw") {
  62.       c.shadowColor = "rgba(0, 205, 205, 0.2)";
  63.       c.shadowBlur = 5;
  64.       c.fillStyle = `hsl(${hue}, 100%, 50%)`;
  65.       c.fillRect(x, y, w, h);
  66.  
  67.       c.shadowColor = null;
  68.       c.shadowBlur = 0;
  69.     }
  70.  
  71.     if (x < -PAD) {
  72.       x = innerWidth + PAD;
  73.     } else if (x > canvas.width + PAD) {
  74.       x = -PAD;
  75.     }
  76.     if (y < -PAD) {
  77.       y = innerHeight + PAD;
  78.     } else if (y > canvas.height + PAD) {
  79.       y = -PAD;
  80.     }
  81.   }
  82.   c.globalAlpha = 0.9;
  83.   c.drawImage(canvas, -2, -1, canvas.width + 3, canvas.height + 4);
  84.  
  85.   requestAnimationFrame(loop);
  86. }
  87. loop();

More fun speed coding for some recent youtube shorts…

// canvas // curves // filters // hacks // hex // javascript // math // random // speedcoding // tricks
Older Posts

Recent

Archive

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