Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const width = 600;
const height = 600;
const img = document.querySelector('img');
const input = document.createElement('canvas');
const output = document.createElement('canvas');
output.width = input.width = width;
output.width = input.height = height;
const icx = input.getContext('2d');
const ocx = output.getContext('2d');
document.body.appendChild(input);
document.body.appendChild(output);
icx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const dg = Math.PI * 2 / width * x;
const r = 0.5 * y;
const sx = width / 2 - r * Math.cos(dg);
const sy = height / 2 - r * Math.sin(dg);
const {data: [red, green, blue]} = icx.getImageData(sx, sy, 1, 1);
ocx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
ocx.fillRect(x, y, 1, 1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.