Snippet Zone

Easy Hex Color Invert

```
let color = 0xFFFF00;
```
```
 
```
```
function toHexString(col) { 
```

  return '#' + ('000000' + col.toString(16)).substr(-6);

```
}
```
```
 
```
```
function onClick() {
```
```
  // invert the color
```
```
  color ^= 0xFFFFFF;
```

  document.body.style.background = toHexString(color);

```
}
```
```
 
```
```
onClick();
```
```
 
```

document.addEventListener('click', onClick);

```
 
```

console.log('try a different initial color');

console.log('click anywhere to invert background...');

Easily invert a hex color. Expanding on yesterdays post – just one of many reasons you may want to work with colors in their integer form.

October 10, 2021

// color // hex // javascript // math // tricks

Integers to Colors

```
function toHexString(col) { 
```

  return '#' + ('000000' + col.toString(16)).substr(-6);

```
}
```
```
 
```

document.body.style.background = toHexString(0x275ba1);

```
 
```

console.log("#275ba1 as an integer:", 0x275ba1);

console.log("#ff0000 as an integer:", 0xff0000);

Convert an integer in hex (like 0xff0000) to a usable hex string "#ff0000".

October 9, 2021

// color // hex // javascript // math

Canvas ImageData

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const width = 200;
```
```
canvas.width = canvas.height = width;
```
```
 
```
```
const c = canvas.getContext('2d');
```

const pixels = c.createImageData(canvas.width, canvas.height);

const size = canvas.width * canvas.height;

```
 
```
```
let index = 0, x, y;
```
```
 
```
```
for (var i = 0; i < size; i++){
```
```
  x = i % width;
```
```
  y = Math.floor(i / width);
```
```
 
```
```
  pixels.data[index++] = x;
```
```
  pixels.data[index++] = y;
```
```
  pixels.data[index++] = width - x;
```
```
  pixels.data[index++] = 255;
```
```
}
```
```
c.putImageData(pixels, 0, 0);
```

This shows how to set pixel data on an html5 canvas.

September 17, 2021

// canvas // color // graphics // hex // javascript // math

toString Hack Obfuscated

```
x=''+self 
```
```
j=''
```

'd1d7a1712345691a7512d427b1da7d9ab7519a4b721a961721d694'

```
.split``
```
```
.map(_=>j+=`x[0x${_}]+`)
```
```
console.log(eval(j+'""'))
```

Yesterday’s snippet saying something else…

It’s simpler than it looks:

```
x=''+self 
```
```
// becomes "[object Window]"
```
```
 
```
```
j='' 
```

// initialize `j` which will be javascript to pass to `eval`

```
 
```
```
'd1d7a17123456...' 
```
```
// this is a list of index values to 
```

// look up in `x` in hexidecimal so that each

```
// index is a single character
```
```
 
```
```
.split``
```

// split the index values into an array `[0xe, 0x2 ...`

```
 
```
```
.map(_=>j+=`x[0x${_}]+`)
```

// map over the index values and write a string like

```
// this `x[0xe]+x[0x2]+...` into `j`
```
```
 
```
```
console.log(eval(j+'""'))
```

// evaluate `j` with an empty string at the end

```
// `x[0xe]+x[0x2]+""` and log it out
```

September 13, 2021

// arrays // codegolf // golfed // hacks // hex // humor // javascript // obfuscation // strings // tricks

Random Hex Color (semi-golfed)

document.body.innerHTML += 'click anywhere...'

```
 
```
```
onclick = () =>
```
```
  document.body.style.background = 
```

    `#${Math.random().toString(16).substr(-6)}`

I golfed this snippet slightly for no reason in particular. I recently posted a nice readable way to make random hsl colors. This snippet generates a random hexidecimal color.

How it works:

Math.random() // random number between 0 and 1

```
 
```

.toString(16) // convert to hex string (something like "0.2d6bcee4198d4")

```
 
```

.substr(-6) // grab the last 6 characters

Here is a non-golfed version:

const instructionsEl = document.createElement('p');

instructionsEl.innerHTML = 'click anywhere...';

document.body.appendChild(instructionsEl);

```
 
```
```
const randomHexColor = () => 
```

  `#${Math.random().toString(16).substr(-6)}`;

```
 
```

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

  document.body.style.background = randomHexColor();

```
});
```

September 6, 2021

// codegolf // color // css // golfed // hex // javascript

Newer Posts