Snippet Zone

Interesting Color Picker

document.addEventListener('touchmove', e => e.preventDefault(), {

```
  passive: false
```
```
});
```
```
 
```
```
document.body.innerHTML += `
```
```
<style>
```
```
  * {
```
```
    -moz-user-select: none;
```
```
    -webkit-user-select: none;
```
```
    -ms-user-select: none;
```
```
    user-select: none;
```
```
  }
```
```
  body {
```
```
    background: #333;
```
```
  }
```
```
  .select-box {
```
```
    border: 1px solid white;
```
```
    outline: 1px solid black;
```
```
  }
```
```
  .swatch {
```
```
    border: none;
```
```
    outline: none;
```
```
  }
```
```
</style>
```
```
`;
```
```
 
```

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

```
Object.assign(col.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  width: '100%',
```
```
  height: '200px',
```
```
  background:
```

    `linear-gradient(0, black 0%, transparent 50%, transparent 50%, white 100%),

     linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)`

```
});
```
```
 
```

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

```
Object.assign(swatches.style, {
```
```
  position: 'absolute',
```
```
  top: '200px',
```
```
  left: 0,
```
```
  width: '100%'
```
```
});
```
```
 
```

function box(x, y, cls = 'select-box', parent = document.body) {

  const box = parent.appendChild(document.createElement`div`);

```
  box.classList.add(cls);
```
```
  Object.assign(box.style, {
```
```
    position: 'absolute',
```
```
    left: `${x}%`,
```
```
    top: `${y}px`,
```
```
    width: '40px',
```
```
    height: '40px',
```
```
    background: 'none',
```
```
    transform: 'translate(-50%, -50%)',
```
```
    cursor: 'pointer',
```
```
 
```
```
    color: 'white'
```
```
  });
```
```
  return box;
```
```
}
```
```
 
```
```
function touch(e) {
```
```
  let x = e.clientX;
```
```
  let y = e.clientY;
```

  if (e.touches != null && e.touches.length > 0) {

```
    x = e.touches[0].clientX;
```
```
    y = e.touches[0].clientY;
```
```
  }
```
```
  return { x, y };
```
```
}
```
```
 
```

document.addEventListener('touchstart', onDown);

document.addEventListener('touchmove', onMove);

document.addEventListener('touchend', onUp);

document.addEventListener('mousedown', onDown);

document.addEventListener('mousemove', onMove);

document.addEventListener('mouseup', onUp);

```
 
```
```
let down = false;
```
```
let currBox;
```
```
let currSwatch;
```
```
let swatchHeight = 30;
```
```
let id = 0;
```
```
 
```
```
function toHSL(x, y) {
```
```
  let deg = x * 360;
```

  return `hsl(${deg}deg, 100%, ${100 - y / 2}%)`;

```
}
```
```
 
```
```
function onDown(e) {
```
```
  let { x, y } = touch(e);
```
```
  down = true;
```
```
  let hPercent = x / innerWidth;
```
```
  let color = toHSL(hPercent, y);
```

  if (e.target.classList.contains('swatch')) {

    e.target.style.outline = '2px solid red';

```
    e.target.style.zIndex = 999;
```
```
    down = false;
```
```
    setTimeout(() => {
```

      if (confirm('Would you like to remove this swatch?')) {

        currBox = document.querySelector(

          `.select-box[data-id="${e.target.dataset.id}"]`

```
        );
```
```
 
```
```
        if (currBox != null) {
```

          currBox.parentNode.removeChild(currBox);

          e.target.parentNode.removeChild(e.target);

```
        }
```
```
      } else {
```
```
        e.target.style.outline = null;
```
```
        e.target.style.zIndex = null;
```
```
      }
```
```
    }, 250);
```

  } else if (e.target.classList.contains('select-box')) {

```
    currBox = e.target;
```

    c = document.querySelector(`.swatch[data-id="${currBox.dataset.id}"]`);

```
  } else {
```
```
    currBox = box(hPercent * 100, y);
```
```
    currBox.dataset.id = id++;
```

    currSwatch = box(0, 0, 'swatch', swatches);

    currSwatch.dataset.id = currBox.dataset.id;

```
    Object.assign(currSwatch.style, {
```
```
      width: '100%',
```
```
      position: 'relative',
```
```
      height: `${swatchHeight}px`,
```
```
      transform: 'none',
```
```
      background: color
```
```
    });
```
```
  }
```
```
}
```
```
 
```
```
function onMove(e) {
```
```
  if (down) {
```
```
    let { x, y } = touch(e);
```
```
    let hPercent = x / innerWidth;
```
```
    let color = toHSL(hPercent, y);
```
```
    Object.assign(currBox.style, {
```
```
      left: `${hPercent * 100}%`,
```
```
      top: `${y}px`
```
```
    });
```

    currSwatch.style.background = color;

```
  }
```
```
}
```
```
 
```
```
function onUp(e) {
```
```
  down = false;
```
```
  currBox = null;
```
```
}
```

Click anywhere on the spectrum to add a color… color boxes can be dragged, color swatches can be deleted by clicking on them…

Just something that popped into my head awhile back so figured I’d do a speed-coded prototype. I’d like to revisit this and add more to it.

November 28, 2021

// color // dom // graphics // html // javascript // math // speed-coded // touchEvents // ui

Animate to Target

function box(x, y, col = 'red', cursor){

  const box = document.body.appendChild(

```
    document.createElement`div`
```
```
  )
```
```
  box.classList.add(col + '-box')
```
```
  Object.assign(box.style, {
```
```
    position: 'absolute', 
```
```
    left: `${x}%`,
```
```
    top: `${y}%`,
```
```
    width: '30px',
```
```
    height: '30px',
```
```
    background: col,
```
```
    cursor: cursor || 'pointer',
```
```
    color: 'white'
```
```
  })
```
```
  return box
```
```
}
```
```
 
```
```
const NUM = 10;
```
```
for (let i = 0; i < NUM; i++) 
```
```
  box(
```
```
    Math.random() * 100, 
```
```
    Math.random() * 100)
```
```
 
```
```
 
```
```
let destX = destY = x = y = 0;
```

const blue = box(destX, destY, 'blue', 'default')

```
const info = box(0, 30, 'gray')
```
```
info.innerHTML = 'click the red boxes'
```
```
Object.assign(info.style, {
```
```
  width: '100%', 
```
```
  padding: '.5em',
```
```
  fontFamily: 'sans-serif'
```
```
})
```
```
 
```

document.addEventListener('click', e => {

```
  const curr = e.target
```

  if (curr.classList.contains('red-box')) {

```
    destX = curr.offsetLeft
```
```
    destY = curr.offsetTop
```
```
    curr.style.background = 'black'
```

    setTimeout(() => curr.style.background = 'red', 700)

```
    if (info.parentNode != null) { 
```

      info.parentNode.removeChild(info);

```
    }
```
```
  }
```
```
})
```
```
 
```
```
function loop() {
```
```
  x += (destX - x) / 12
```
```
  y += (destY - y) / 12
```

  blue.style.transform = `translate3d(${x}px, ${y}px, 0)`

```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Click a red box, watch the blue box animate…

November 27, 2021

// animation // dom // html // javascript

Obfuscated Pseudo-typed Globals

```
number:age = 33;
```
```
number:height = 6;
```
```
string:name = 'joe';
```
```
object:person = { name, age, height };
```
```
console.log(person);
```

WARNING: do not use this

This one is bad enough that I feel the need to put a warning. This is some weird obfuscation… I’ve put labels before global variable definitions so they look like type declarations.

It’s funny, monaco says lots of stuff about this one if you hit the Try it out… button you can see…

November 26, 2021

// humor // javascript // obfuscation

Oscillating Canvas Wave

```
const c = document.body
```

  .appendChild(document.createElement('canvas'))

```
  .getContext('2d');
```
```
 
```
```
Object.assign(document.body.style, {
```
```
  margin: 0,
```
```
  height: '100%'
```
```
});
```
```
 
```
```
Object.assign(c.canvas.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  width: '100%',
```
```
  height: '100%'
```
```
});
```
```
 
```
```
let t = 0;
```
```
 
```
```
function resize() {
```
```
  c.canvas.width = innerWidth * 2;
```
```
  c.canvas.height = innerHeight * 2;
```
```
  draw();
```
```
}
```

window.addEventListener('resize', resize);

```
resize();
```
```
 
```
```
function draw() {
```
```
  const {
```
```
    canvas: { width, height }
```
```
  } = c;
```
```
 
```

  c.fillStyle = 'rgba(155, 155, 155, .4)';

```
  c.fillRect(0, 0, width, height);
```
```
  c.fillStyle = '#000';
```
```
 
```
```
  let x = innerWidth;
```
```
  let y = 0;
```
```
 
```
```
  t += 0.05;
```

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

    x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));

```
    y += 2;
```
```
    c.fillRect(x, y, 100, 1);
```
```
  }
```
```
}
```
```
 
```
```
function loop() {
```
```
  draw();
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Speed coded oscillating wave on canvas… Looks better in fullscreen.

November 25, 2021

// animation // canvas // javascript // speed-coded

CSS Color Picker Gradient

```
const col = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
Object.assign(col.style, {
```
```
  position: 'absolute',
```
```
  left: 0, top: 0,
```
```
  width: '100%',
```
```
  height: '200px',
```

  background: 'linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'

```
});
```

CSS gradient that cycles hue – useful for a colorpicker. This is the main part of the snippet:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)

November 24, 2021

// color // css // dom // javascript

Older Posts

Newer Posts

Interesting Color Picker

Animate to Target

Obfuscated Pseudo-typed Globals

Oscillating Canvas Wave

CSS Color Picker Gradient

Recent

Archive