Snippet Zone

crystl

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
let w;
```
```
let h;
```
```
 
```
```
onresize = e => {
```
```
  w = innerWidth * 2
```
```
  h = innerHeight * 2
```
```
  canvas.width = w
```
```
  canvas.height = h
```
```
  canvas.style.width = (w / 2) + 'px'
```

  canvas.style.height = (h / 2) + 'px'

```
  c.fillStyle = '#000'
```
```
  c.fillRect(0, 0, w, h) 
```
```
}
```
```
onresize()
```
```
 
```
```
document.body.append(canvas)
```

canvas.style.filter = 'contrast(2) brightness(1.2)'

```
 
```
```
class Crystal {
```
```
  constructor() {
```
```
    this.init()
```
```
  }
```
```
  init() {
```
```
    this.x = w / 2
```
```
    this.y = h * .7
```
```
    this.rad = 250
```
```
 
```
```
    this.sides = 5
```
```
    // + ~~(Math.random() * 5)
```

    this.shrinkTime = 400 + Math.random() * 100

```
    this.t = Math.random() * 7
```
```
    this.st = this.t;
```

    this.step = (Math.PI * 2) / this.sides

```
    this.time = 0
```

    this.shrinkSpeed = 1.3 - Math.random() * .6

```
    this.a = 0
```
```
    this.ad = .05
```
```
  }
```
```
 
```
```
  draw() { 
```
```
 
```
```
    this.a += (this.ad - this.a) / 150
```
```
    c.lineWidth = 5
```

    c.strokeStyle = `rgba(255, 255, 255, ${this.a})`

    c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`

```
    c.beginPath()
```
```
 
```
```
    for (let j = 0; j < 2; j++) {
```
```
      this.time++
```

      if (this.time > this.shrinkTime) {

```
        this.rad -= this.shrinkSpeed
```
```
        if (this.rad < 0) {
```
```
          setTimeout(() => {
```

            c.fillStyle = 'rgba(0, 0, 0, .02)'

```
            c.fillRect(0, 0, w, h)
```
```
            this.init()
```
```
          }, 500)
```
```
          return;
```
```
        }
```
```
      }
```
```
      this.t = this.st
```

      for (let i = 0; i < this.sides; i++) {

```
        let p = {
```

          x: this.rad * Math.cos(this.t),

          y: this.rad * .6 * Math.sin(this.t)

```
        }
```
```
        this.t += this.step;
```
```
        if (i === 0) {
```

          c.moveTo(this.x + p.x, this.y + p.y)

```
        } else {
```

          c.lineTo(this.x + p.x, this.y + p.y)

```
        }
```
```
      }
```
```
      c.closePath()
```
```
      c.stroke() 
```
```
      c.fill()
```
```
 
```
```
 
```
```
      this.y -= 1
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
let cryst = new Crystal()
```
```
 
```
```
 
```
```
setInterval(() => {
```

  for (let i = 0; i < 3; i++) cryst.draw()

```
}, 16)
```

quick crystal for recent youtube short…

July 27, 2024

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

Two Circles Explode

const { random, min, sqrt, cos, sin, PI } = Math

```
let TWO_PI = PI * 2
```
```
let minSize
```
```
 
```
```
document.body.style.margin = 0
```

document.body.style.background = 'black'

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
addEventListener('resize', resize)
```
```
resize()
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth
```
```
  canvas.height = innerHeight
```

  minSize = min(innerWidth, innerHeight)

```
  clear()
```
```
}
```
```
 
```
```
function clear() {
```
```
  c.fillStyle = 'rgba(0, 0, 0, .15)'
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
}
```
```
 
```
```
let dots = []
```

function dot({x, y, vx, vy, rad, grav = .15}) {

```
  let sx = x
```
```
  let sy = y
```
```
  let svx = vx
```
```
  let svy = vy
```
```
  let intersected
```
```
  let partsNum = 20
```
```
  let parts = []
```
```
  let delay = random() * 5
```
```
  let time = 0
```
```
 
```
```
  dots.push(() => y > innerHeight)
```
```
 
```
```
  return {
```
```
    step() {
```
```
      time++
```
```
      if (time < delay) return
```
```
      if (intersected) {
```

        for (let i = 0; i < partsNum; i++) {

```
          parts[i].step()
```
```
        }
```
```
        return
```
```
      }
```
```
      x += vx
```
```
      y += vy
```
```
      vy += grav;
```
```
      c.beginPath()
```
```
      c.arc(x, y, rad(), 0, 7)
```
```
      c.fill()
```
```
    },
```
```
    reset() {
```
```
      x = sx;
```
```
      y = sy;
```
```
      vx = svx;
```
```
      vy = svy;
```
```
      intersected = false
```
```
    },
```
```
    hit() {
```
```
      if (!intersected) {
```
```
        partsNum = rad() / 3
```

        for (let i = 0; i < partsNum; i++) {

```
          let t = random() * TWO_PI
```
```
          let r = 5 + random() * 5
```
```
          let size = random() * 10
```
```
 
```
```
          parts.push(
```
```
            dot({
```
```
              x, y,
```
```
              vx: r * cos(t),
```
```
              vy: r * sin(t),
```
```
              rad: () => size
```
```
            })
```
```
          )
```
```
        }
```
```
      }
```
```
      intersected = true
```
```
    },
```
```
    get x() {
```
```
      return x
```
```
    },
```
```
    get y() {
```
```
      return y
```
```
    }
```
```
  }
```
```
}
```
```
 
```
```
const bigRad = () => minSize * .14;
```
```
 
```
```
let leftDot
```
```
let rightDot
```
```
 
```
```
function start() {
```
```
 
```
```
  rightDot = dot({
```
```
    x: innerWidth, 
```
```
    y: innerHeight / 2, 
```
```
    vx: -innerWidth * .005, 
```
```
    vy: -6, rad: bigRad
```
```
  })
```
```
 
```
```
  leftDot = dot({
```
```
    x: 0, 
```
```
    y: innerHeight / 2, 
```
```
    vx: innerWidth * .005, 
```
```
    vy: -6, rad: bigRad
```
```
  })
```
```
}
```
```
start()
```
```
 
```
```
function collide(a, b) {
```
```
  const dx = a.x - b.x
```
```
  const dy = a.y - b.y
```
```
  const dist = sqrt(dx**2 + dy**2)
```
```
  return dist <= bigRad() * 1.8
```
```
}
```
```
 
```
```
function loop() {
```
```
  let inc = 2
```
```
 
```
```
  clear()
```
```
  c.fillStyle = 'white'
```
```
  if (collide(leftDot, rightDot)) {
```
```
 
```
```
    leftDot.hit()
```
```
    rightDot.hit()
```
```
  }
```
```
 
```
```
  leftDot.step()
```
```
  rightDot.step()
```
```
 
```
```
  dots.forEach(done => {
```
```
    if (done()) inc++;
```
```
  }) 
```
```
 
```

  if (dots.length > 2 && inc == dots.length)  {

```
    dots = []
```
```
    start()
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Two circles intersect and explode repeatedly… works at any browser size…

March 7, 2022

// animation // canvas // gradients

Grads

```
const grad = {
```
```
  gen(c) {
```
```
    const canvas = c.canvas;
```

    const t = Math.random() * 2 * Math.PI;

```
    const cx = canvas.width / 2;
```
```
    const cy = canvas.height / 2;
```
```
    const r = Math.max(cx, cy);
```
```
    const x1 = cx * Math.cos(t);
```
```
    const y1 = cy * Math.sin(t);
```

    const x2 = cx * Math.cos(t + Math.PI);

    const y2 = cy * Math.sin(t + Math.PI);

```
 
```
```
    const drawFn = c => {
```

      const g = c.createLinearGradient(x1, y1, x2, y2);

```
      g.addColorStop(0, 'white');
```
```
      g.addColorStop(1, 'black');
```
```
 
```
```
      c.fillStyle = g;
```

      c.fillRect(0, 0, canvas.width, canvas.height);

```
    };
```
```
 
```
```
    drawFn(c);
```
```
  }
```
```
};
```
```
 
```
```
Object.assign(document.body.style, { 
```
```
    margin: 0,
```
```
    display: 'grid',
```

    'grid-template-columns': '1fr 1fr 1fr',

```
  });
```

const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');

```
 
```
```
for (let j = 0; j < 21; j++) { 
```
```
  const SIZE = 200;
```
```
  const c = document.body.appendChild(
```
```
    document.createElement('canvas')
```
```
  ).getContext('2d');
```
```
 
```

  c.canvas.width = c.canvas.height = SIZE;

```
  Object.assign(c.canvas.style, {
```
```
    position: 'relative', 
```
```
    width: '100%'
```
```
  })
```
```
 
```
```
 
```

  c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`

```
  c.fillRect(0, 0, SIZE, SIZE)
```
```
 
```
```
  for (let i = 0; i < 5; i++) { 
```
```
    c.globalAlpha = .5;
```

    c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]

```
    grad.gen(c)
```
```
  }
```
```
}
```

Not sure what this is… used the random gradient code and variations on it a few times….

January 8, 2022

// gradients // graphics

Gray Gradient Texture

function rect(x1, y1, x2, y2, col, blur = 0.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```

const blends = 'multiply,screen,overlay,darken,lighten,color-dodge,color-burn,hard-light,soft-light,difference,exclusion,hue'.split(

```
  ','
```
```
);
```
```
const cols = ['black', 'white'];
```
```
 
```
```
function gen() {
```

  [...document.querySelectorAll('div')].forEach(d =>

```
    d.parentNode.removeChild(d)
```
```
  );
```
```
  for (let j = 0; j < 4; j++) {
```
```
    const rects = [];
```
```
    for (let i = 0; i < 10; i++) {
```
```
      const x = Math.random() * 100;
```
```
      const y = Math.random() * 100;
```

      const s = Math.random() * Math.random() * Math.random() * 30 + 3;

      const col = cols[~~(Math.random() * cols.length)];

      rects.push(rect(x, y, x + s, y + s, col, Math.random() * 10));

```
    }
```

    const el = document.body.appendChild(document.createElement('div'));

    el.style.backgroundImage = rects.join(', ');

    el.style.mixBlendMode = blends[~~(Math.random() * blends.length)];

```
  }
```
```
}
```
```
gen();
```
```
 
```
```
document.body.innerHTML += `
```

  <button id="regen">Regenerate</button>

```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
    div {
```
```
      position: absolute;
```
```
      top: 0; left: 0;
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
    #regen {
```
```
      position: absolute;
```
```
      width: 100px;
```
```
      height: 30px;
```
```
      background: #ccc;
```
```
      border: 1px solid white;
```
```
      margin: 1em;
```
```
      cursor: pointer;
```
```
      transition: all 250ms ease-out;
```
```
      z-index: 999;
```
```
    }
```

    #regen:hover { background: #333; color: white; }

```
  </style>
```
```
`;
```
```
 
```
```
regen.onclick = gen;
```

Playing around some more with lots of linear gradients.

December 9, 2021

// color // css // gradients // graphics // hacks // javascript // speed-coded

Conic Accident

```
conicBtn.onclick = () => {
```
```
  document.body.innerHTML += `
```
```
  <style>
```
```
    div {
```

      background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

```
    }
```
```
  </style>
```
```
  `
```
```
}
```

get ready….

When I created the gradient conic snippet from a few days ago – I accidentally applied the rule to the entire page…. thought it was funny enough to be worth making a snippet out of 😀

December 8, 2021

// css // gradients // graphics // hacks // javascript

Older Posts

crystl

Two Circles Explode

Grads

Gray Gradient Texture

Conic Accident

Recent

Archive