Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/index.html

Created May 3, 2017 23:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save veltman/e7778d9ce18d66c04cbbede51c32957d to your computer and use it in GitHub Desktop.
Save veltman/e7778d9ce18d66c04cbbede51c32957d to your computer and use it in GitHub Desktop.
Download ZIP
Gradual pixelation
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<canvas width="960" height="500"></canvas>
<script>
var canvas = document.querySelector("canvas"),
offscreen = document.createElement("canvas"),
context = canvas.getContext("2d"),
offscreenContext = offscreen.getContext("2d"),
width = offscreen.width = canvas.width,
height = offscreen.height = canvas.height,
grain = 64,
up = true,
img = new Image();
context.msImageSmoothingEnabled = false;
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
img.onload = draw;
img.src = "neon.jpg";
function draw() {
var dx = Math.round(width / grain),
dy = Math.round(height / grain),
delay = 25;
context.clearRect(0, 0, width, height);
offscreenContext.clearRect(0, 0, width, height);
offscreenContext.drawImage(img, 0, 0, width, height, 0, 0, dx, dy);
context.drawImage(offscreen, 0, 0, dx, dy, 0, 0, width, height);
up ? grain-- : grain++;
if (grain === 64 || grain === 1) {
up = !up;
delay = 500;
}
setTimeout(draw, delay);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment