Skip to content

Instantly share code, notes, and snippets.

@winguse
Created March 12, 2017 02:02
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
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