summaryrefslogtreecommitdiff
path: root/canvasquery.dither.js
diff options
context:
space:
mode:
authorjules <jules@okfoc.us>2013-12-13 15:28:31 -0500
committerjules <jules@okfoc.us>2013-12-13 15:28:31 -0500
commit346f3a9817b1e0812565396b9811a1ce5adc97b8 (patch)
tree47944eb9a2762ef2036d140430a69be5afa9f368 /canvasquery.dither.js
parent96fd8423cc0793d47cab9117b0167fe19041cdea (diff)
reorganize
Diffstat (limited to 'canvasquery.dither.js')
-rw-r--r--canvasquery.dither.js217
1 files changed, 0 insertions, 217 deletions
diff --git a/canvasquery.dither.js b/canvasquery.dither.js
deleted file mode 100644
index a76ad12..0000000
--- a/canvasquery.dither.js
+++ /dev/null
@@ -1,217 +0,0 @@
-var patterns = {}
-patterns[2] = [ 0, 2,
- 3, 1 ]
-
-patterns[3] = [ 0, 5, 3,
- 8, 1, 6,
- 4, 7, 2, ]
-
-patterns[4] = [ 0, 8, 2, 10,
- 6, 14, 4, 12,
- 3, 11, 1, 9,
- 5, 13, 7, 15 ]
-
-CanvasQuery.Wrapper.prototype.threshold = function(factor) {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- if (factor < 1) factor *= 255
-
- for (var i = 0; i < height; i++) {
- for (var j = 0; j < width; j++) {
- var a = 4 * (i*width + j)
- var val = (bitmapData[a] + bitmapData[a+1] + bitmapData[a+2]) / 3
- var lum = val > factor ? 255 : 0
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.randomDither = function() {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- for (var i = 0; i < height; i++) {
- for (var j = 0; j < width; j++) {
- var a = 4 * (i*width + j)
- var val = (bitmapData[a] + bitmapData[a+1] + bitmapData[a+2]) / (3*255)
- var lum = val > Math.random() ? 255 : 0
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.pattern2Dither = function() {
- this.patternDither(2)
-}
-CanvasQuery.Wrapper.prototype.pattern3Dither = function() {
- this.patternDither(3)
-}
-CanvasQuery.Wrapper.prototype.pattern4Dither = function() {
- this.patternDither(4)
-}
-CanvasQuery.Wrapper.prototype.patternDither = function(n) {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- var pat = patterns[n]
- var len = pat.length - 1
-
- for (var i = 0; i < height; i++) {
- for (var j = 0; j < width; j++) {
- var p = ((i % n) * n) + (j % n)
- var a = 4 * (i*width + j)
- var val = (bitmapData[a] + bitmapData[a+1] + bitmapData[a+2]) / (3*255)
- var lum = val > pat[p]/len ? 255 : 0
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.pattern2LiteDither = function() {
- this.patternLiteDither(2)
-}
-CanvasQuery.Wrapper.prototype.pattern3LiteDither = function() {
- this.patternLiteDither(3)
-}
-CanvasQuery.Wrapper.prototype.pattern4LiteDither = function() {
- this.patternLiteDither(4)
-}
-CanvasQuery.Wrapper.prototype.patternLiteDither = function(n) {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- var pat = patterns[n]
- var len = pat.length
-
- for (var i = 0; i < height; i++) {
- for (var j = 0; j < width; j++) {
- var p = ((i % n) * n) + (j % n)
- var a = 4 * (i*width + j)
- var val = (bitmapData[a] + bitmapData[a+1] + bitmapData[a+2]) / (3*255)
- var lum = val > pat[p]/len ? 255 : 0
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.floydSteinbergDither = function(n) {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var mask = this.grayscaleToMask()
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- for (var y = 0; y < height; y++) {
- for (var x = 0; x < width; x++) {
- var p = (y*width + x)
- var a = 4 * p
- var val = mask[p]
- var lum = val > 127 ? 255 : 0
- var error = val - lum
- if (x < width-1)
- mask[ (y*width) + x+1 ] += 7/16 * error
- if (y < height-1 && x > 0)
- mask[ ((y+1)*width) + x-1 ] += 5/16 * error
- if (y < height-1)
- mask[ ((y+1)*width) + x ] += 3/16 * error
- if (y < height-1 && x < width-1)
- mask[ ((y+1)*width) + x+1 ] += 1/16 * error
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.rightDither = function(n) {
- var bitmap = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height)
- var bitmapData = bitmap.data
-
- var mask = this.grayscaleToMask()
-
- var width = this.canvas.width
- var height = this.canvas.height
-
- for (var y = 0; y < height; y++) {
- for (var x = 0; x < width; x++) {
- var p = (y*width + x)
- var a = 4 * p
- var val = mask[p]
- var lum = val > 127 ? 255 : 0
- var error = val - lum
- if (x < width-1)
- mask[ (y*width) + x+1 ] += 7/16 * error
- bitmapData[a] = bitmapData[a+1] = bitmapData[a+2] = lum
- }
- }
- this.context.putImageData(bitmap, 0, 0);
- return this;
-}
-
-CanvasQuery.Wrapper.prototype.halftone = function(radius, angle) {
- var mask = this.grayscaleToMask()
-
- this.fillStyle("#fff")
- this.fillRect(0, 0, this.canvas.width, this.canvas.height)
-
- var diameter = radius*2
- var TWO_PI = Math.PI*2
-
- var angle = angle / 180 * Math.PI
-
- var cos = Math.cos(angle)
- var sin = Math.sin(angle)
-
- var xstep = cos * radius
- var ystep = sin * radius
-
- var w = this.canvas.width
- var h = this.canvas.height
-
- this.fillStyle("#000")
-
- for (var i = -w; i < w; i++) {
- for (var j = -h; j < h; j++) {
- var x = i * ystep - j * xstep
- var y = i * xstep + j * ystep
- if (x > -diameter && y > -diameter && x < w+diameter && y < h+diameter) {
- circle(this,x,y)
- }
- }
- }
-
- function circle(cq,x,y) {
- var xx = x < 0 ? 0 : x > w ? w - 1 : x;
- var yy = y < 0 ? 0 : y > h ? h - 1 : y;
- var r = (1 - Math.pow( mask[ ~~(~~yy*w+(xx)) ] / 255, Math.E/4 )) * radius
- cq.beginPath()
- .arc(x,y,r,0,TWO_PI)
- .closePath()
- .fill();
- }
- return this;
-}
-