Skip to content

Instantly share code, notes, and snippets.

@dev001hajipro

dev001hajipro/index.html

Created March 30, 2017 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dev001hajipro/12838c53ea72e98398a9f3c5a35bc398 to your computer and use it in GitHub Desktop.
Save dev001hajipro/12838c53ea72e98398a9f3c5a35bc398 to your computer and use it in GitHub Desktop.
Download ZIP
pixel sort // source https://jsbin.com/nuyezac
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>pixel sort</title>
</head>
<body>
<h1>Pixel sort</h1>
<canvas id="c" width="640" height="320"></canvas>
<script id="jsbin-javascript">
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
img;
img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
// left side original image (320x320).
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, 320, 320);
var data32 = new Uint32Array(imageData.data.buffer);
// Compare brightness.
data32.sort(function(p1,p2) {
var r1 = p1 >> 0 & 0x000000FF;
var g1 = p1 >> 8 & 0x000000FF;
var b1 = p1 >> 16 & 0x000000FF;
var L1 = r1 + g1 + b1 / 3;
var r2 = p2 >> 0 & 0x000000FF;
var g2 = p2 >> 8 & 0x000000FF;
var b2 = p2 >> 16 & 0x000000FF;
var L2 = r2 + g2 + b2 / 3;
return L1 - L2;
});
ctx.putImageData(imageData, 320, 0);
};
img.src = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/Arnljotl%C3%A4gden.jpg';
</script>
<script id="jsbin-source-javascript" type="text/javascript">var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
img;
img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
// left side original image (320x320).
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, 320, 320);
var data32 = new Uint32Array(imageData.data.buffer);
// Compare brightness.
data32.sort(function(p1,p2) {
var r1 = p1 >> 0 & 0x000000FF;
var g1 = p1 >> 8 & 0x000000FF;
var b1 = p1 >> 16 & 0x000000FF;
var L1 = r1 + g1 + b1 / 3;
var r2 = p2 >> 0 & 0x000000FF;
var g2 = p2 >> 8 & 0x000000FF;
var b2 = p2 >> 16 & 0x000000FF;
var L2 = r2 + g2 + b2 / 3;
return L1 - L2;
});
ctx.putImageData(imageData, 320, 0);
};
img.src = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/Arnljotl%C3%A4gden.jpg';</script></body>
</html>
Raw
jsbin.nuyezac.js
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
img;
img = new Image();
img.crossOrigin = "Anonymous";
img.onload = function() {
// left side original image (320x320).
ctx.drawImage(img, 0, 0);
var imageData = ctx.getImageData(0, 0, 320, 320);
var data32 = new Uint32Array(imageData.data.buffer);
// Compare brightness.
data32.sort(function(p1,p2) {
var r1 = p1 >> 0 & 0x000000FF;
var g1 = p1 >> 8 & 0x000000FF;
var b1 = p1 >> 16 & 0x000000FF;
var L1 = r1 + g1 + b1 / 3;
var r2 = p2 >> 0 & 0x000000FF;
var g2 = p2 >> 8 & 0x000000FF;
var b2 = p2 >> 16 & 0x000000FF;
var L2 = r2 + g2 + b2 / 3;
return L1 - L2;
});
ctx.putImageData(imageData, 320, 0);
};
img.src = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/Arnljotl%C3%A4gden.jpg';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment