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

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

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

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 😀

// 3d // animation // codegolf // css // dom // golfed // hacks // javascript // math // speed-coded // speedcoding // strings

Faster than save/restore HTML5 canvas

  1. const canvas = document.createElement('canvas')
  2. const c = canvas.getContext('2d')
  3.  
  4. canvas.width = innerWidth
  5. canvas.height = innerHeight
  6.  
  7. document.body.append(canvas)
  8.  
  9. c.fillStyle = 'black'
  10. c.fillRect(0, 0, canvas.width, canvas.height)
  11.  
  12. class Shooter {
  13.   constructor() {
  14.     this.x = innerWidth / 2
  15.     this.y = innerHeight / 2
  16.     this.vx = Math.random() * 10 - 5
  17.     this.vy = Math.random() * 10 - 5
  18.     this.color = 'rgba(255, 0, 0, 0.5)'
  19.     this.size = 10
  20.     this.halfSize = this.size / 2
  21.   }
  22.   draw() {
  23.     this.x += this.vx
  24.     this.y += this.vy
  25.  
  26.     if (this.x < 0) {
  27.       this.x = innerWidth
  28.     } else if (this.x > innerWidth) {
  29.       this.x = 0
  30.     }
  31.  
  32.     if (this.y < 0) {
  33.       this.y = innerHeight
  34.     } else if (this.y > innerHeight) {
  35.       this.y = 0
  36.     }
  37.  
  38.     c.fillStyle = this.color
  39.     c.translate(this.x, this.y)
  40.     c.fillRect(-this.halfSize, -this.halfSize, this.size, this.size)
  41.  
  42.     c.setTransform(1, 0, 0, 1, 0, 0)
  43.   }
  44. }
  45.  
  46. const NUM = 1000
  47. const shooters = []
  48. for (let i = 0; i < NUM; i++) {
  49.   shooters.push(new Shooter())
  50. }
  51.  
  52. function loop() {
  53.   c.fillStyle = 'rgba(0, 0, 0, 0.1)'
  54.   c.fillRect(0, 0, innerWidth, innerHeight)
  55.  
  56.   for (let i = 0; i < NUM; i++) {
  57.     shooters[i].draw()
  58.   }
  59.   requestAnimationFrame(loop)
  60. }
  61. loop()

Using setTransform(1, 0, 0, 1, 0, 0) is faster than using save and restore. If you don’t need to save context info like fills, line styles etc… consider this method.

// canvas // graphics // javascript // math // matrix // tricks
Older Posts

Recent

Archive

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