compass-blend-modes 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 2d3c932a487f9195ac257617fc222ddde6121054
+  data.tar.gz: bea92af29b2bc5d8d7723c26103d919f5595a4f9
+SHA512:
+  metadata.gz: b967d38d8411e0a7d3edc2c7e2aaf247d0251e570a29c0d633076353abd12d64701d1d2ccd2264f48161406aaca5dbc09c803ed1687cb899fa0717d7581bdb16
+  data.tar.gz: f1e5d56987cb7f80c895d04f53a9a4ef6726eb100b675f25e6f206a34e7dcfc92fef757db5e7ef026ce99107b1491f77ea6ebe0b2ef0ac4fbb26aced244eb4e6

data/.gitignore

@@ -0,0 +1,2 @@
+.sass-cache
+styles.css

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2013 Grady Kuhnline
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,115 @@
+# SCSS Blend Modes
+CSS doesn't natively support color blending the way that Photoshop does. This library attempts to fake that by allowing you to blend a foreground color with a background color in order to approximate color blending. This not a dynamic blend; you can't use this to blend a color with an image. This was originally intended for use with the [Compass Photoshop Drop Shadow Plugin](https://github.com/heygrady/compass-photoshop-drop-shadow) but it proved impractical to integrate.
+
+## A Note on Real CSS3 Blend Modes
+Adobe has been working on a [W3C spec](http://www.w3.org/TR/compositing/) to [add blend modes to CSS3](http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/). However, this has [not been implemented in any browser](http://css3clickchart.com/#blending-modes). This library is **not** a polyfill for those blend modes. A polyfill for real, dynamic blend modes will require SVG or JavaScript + Canvas.
+
+## A Note on Color Blending
+The included functions are based on [blend.js](https://github.com/jseidelin/pixastic/blob/master/actions/blend.js) from the [Pixastic Image Processing Library](http://www.pixastic.com/lib/). I chose this library because JavaScript is easy enough to read and the blend modes seemed to match closely with what Photoshop offered. Additionally, a [detailed explaination of Photoshop blend modes](http://photoblogstop.com/photoshop/photoshop-blend-modes-explained) was used as a reference as well as the [Wikipedia article on blend modes](http://en.wikipedia.org/wiki/Blend_modes).
+
+These blend mode functions are not magic. In Photoshop, the blend mode functions are applied dynamically between two layers in order to create a pixel-by-pixel blend. In CSS they can only be used to combine two solid colors together. Blend modes can be useful in times when a Photoshop design implements a blend mode on an element, like a drop shadow, that is over a mostly solid background. Choosing a dominant background color and a solid foreground color may allow for the apearance of a dynamically blended color.
+
+## Installation
+#### Install the Ruby Gem.
+```
+gem install compass-blend-modes
+```
+
+#### Existing Compass Projects
+You can include it in any existing Compass project by including the plugin in your config.rb file.
+
+```ruby
+# Require any additional compass plugins here.
+require 'compass-blend-modes'
+```
+
+#### New Compass Projects
+You can install the plugin as part of a new Compass project.
+
+```
+compass create my_project -r compass-blend-modes
+```
+
+## Usage
+
+```scss
+@import 'blend-modes';
+```
+
+### Examples
+
+```scss
+// make sure the functions are imported
+@import 'blend-modes';
+
+// Solid background
+.multiply {
+	background-color: blend-multiply(#7FFFD4, #DEB887);
+}
+
+// RGBa background
+.multiply {
+	background-color: blend-multiply(rgba(#7FFFD4, 0.5), rgba(#DEB887, 0.5));
+}
+```
+
+## Blending Functions
+All functions expect a color as the `$foreground` and `$background` colors. The colors can be any hex, [rgb](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#rgb-instance_method), [rgba](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#rgba-instance_method), [hsl](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#hsl-instance_method), or [hsla](http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#hsla-instance_method) color supported by Sass. Blending functions work by combining the colors from the top-most layer, the `$foreground`, with the lower layer, the `$background`.
+
+- **blend-normal(** *$foreground*, *$background* **)** - Normal is used primarily to preserve the opacity after the blending has been applied to the RGB values.
+- **blend-multiply(** *$foreground*, *$background* **)**
+- **blend-lighten(** *$foreground*, *$background* **)**
+- **blend-darken(** *$foreground*, *$background* **)**
+- **blend-darkercolor(** *$foreground*, *$background* **)** - Not found in Photoshop.
+- **blend-lightercolor(** *$foreground*, *$background* **)** - Not found in Photoshop.
+- **blend-lineardodge(** *$foreground*, *$background* **)**
+- **blend-linearburn(** *$foreground*, *$background* **)**
+- **blend-difference(** *$foreground*, *$background* **)**
+- **blend-screen(** *$foreground*, *$background* **)**
+- **blend-exclusion(** *$foreground*, *$background* **)**
+- **blend-overlay(** *$foreground*, *$background* **)**
+- **blend-softlight(** *$foreground*, *$background* **)**
+- **blend-hardlight(** *$foreground*, *$background* **)**
+- **blend-colordodge(** *$foreground*, *$background* **)**
+- **blend-colorburn(** *$foreground*, *$background* **)**
+- **blend-linearlight(** *$foreground*, *$background* **)**
+- **blend-vividlight(** *$foreground*, *$background* **)**
+- **blend-pinlight(** *$foreground*, *$background* **)**
+- **blend-hardmix(** *$foreground*, *$background* **)**
+- **blend-colorblend(** *$foreground*, *$background* **)**
+- **blend-dissolve(** *$foreground*, *$background* **)** - Not implemented. Dissolve treats transparency as a pixel pattern and applies a diffusion dither pattern.
+- **blend-divide(** *$foreground*, *$background* **)**
+- **blend-hue(** *$foreground*, *$background* **)**
+- **blend-luminosity(** *$foreground*, *$background* **)**
+- **blend-saturation(** *$foreground*, *$background* **)**
+- **blend-subtract(** *$foreground*, *$background* **)**
+
+## HSV Functions
+These functions are used to convert between RGB, HSL and HSV color formats. The HSV color format is not natively supported by CSS or Sass. These functions were taken directly from this [Gist](https://gist.github.com/1069204). HSV values are used to calculate the results for the `blend-colorblend`, `blend-hue`, `blend-luminosity` and `blend-saturation` functions.
+
+- **hsv-to-hsl(** *$h*, [ *$s: 0*, *$v: 0* ] **)** - Converts a HSV color values into HSL color values. `$h` can be a list of three values representing `$h`, `$s` and `$v`.
+- **hsl-to-hsv(** *$h*, [ *$ss: 0*, *$ll: 0* ] **)** - Converts a HSL color values into HSV color values. `$h` can be a list of three values representing `$h`, `$ss` and `$ll`.
+- **color-to-hsv(** *$color* )** - Converts a [Sass Color](http://sass-lang.com/docs/yardoc/Sass/Script/Color.html) into a [list](http://sass-lang.com/docs/yardoc/Sass/Script/List.html) HSV color values.
+- **hsv-to-color(** *$h*, [* $s: 0*, *$v: 0* ] **)** - Converts a list of HSV color values into a Sass Color. `$h` can be a list of three values representing `$h`, `$s` and `$v`
+
+## Internal Functions
+These functions are used to save redundant code and are not meant to be used directly. These functions perform the blending operation on a single r, g or b value.
+
+**NOTE:** These functions are not intended to be used directly.
+
+- **blend-lighten-color(** *$foreground*, *$background* **)**
+- **blend-darken-color(** *$foreground*, *$background* **)**
+- **blend-lineardodge-color(** *$foreground*, *$background* **)**
+- **blend-linearburn-color(** *$foreground*, *$background* **)**
+- **blend-screen-color(** *$foreground*, *$background* **)**
+- **blend-exclusion-color(** *$foreground*, *$background* **)**
+- **blend-overlay-color(** *$foreground*, *$background* **)**
+- **blend-softlight-color(** *$foreground*, *$background* **)**
+- **blend-hardlight-color(** *$foreground*, *$background* **)**
+- **blend-colordodge-color(** *$foreground*, *$background* **)**
+- **blend-colorburn-color(** *$foreground*, *$background* **)**
+- **blend-linearlight-color(** *$foreground*, *$background* **)**
+- **blend-vividlight-color(** *$foreground*, *$background* **)**
+- **blend-pinlight-color(** *$foreground*, *$background* **)**
+- **blend-hardmix-color(** *$foreground*, *$background* **)**
+- **blend-divide-color(** *$foreground*, *$background* **)**

data/compass-blend-modes.gemspec

@@ -0,0 +1,23 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass/blend-modes/version"
+
+Gem::Specification.new do |s|
+  s.name          = 'compass-blend-modes'
+  s.version       = Compass::BlendModes::VERSION
+  s.platform      = Gem::Platform::RUBY
+  s.summary       = "Using standard color blending functions in Sass."
+  s.description   = "Using standard color blending functions in Sass."
+  s.homepage      = "https://github.com/heygrady/scss-blend-modes"
+  s.authors       = ["Grady Kuhnline"]
+  s.email         = ["github@heygrady.net"]
+  s.license       = 'MIT'
+
+  s.has_rdoc      = false
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+
+  s.add_dependency("compass")
+end

data/example/config.rb

@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+require 'compass-blend-modes'
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "i"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+output_style = :compact
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/example/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title></title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width">
+
+        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
+        <link rel="stylesheet" href="css/styles.css">
+        <style>
+            h2 { clear: both; }
+            div { float:left; height: 100px; width: 100px; margin: 10px; }
+        </style>
+    </head>
+    <body>
+        <div class="foreground">foreground</div>
+        <div class="background">background</div>
+        <h2>SCSS Blend Modes</h2>
+        <div class="normal">normal</div>
+        <div class="multiply">multiply</div>
+        <div class="lighten">lighten</div>
+        <div class="darken">darken</div>
+        <div class="darkercolor">darkercolor</div>
+        <div class="lightercolor">lightercolor</div>
+        <div class="lineardodge">lineardodge</div>
+        <div class="linearburn">linearburn</div>
+        <div class="difference">difference</div>
+        <div class="screen">screen</div>
+        <div class="exclusion">exclusion</div>
+        <div class="overlay">overlay</div>
+        <div class="softlight">softlight</div>
+        <div class="hardlight">hardlight</div>
+        <div class="colordodge">colordodge</div>
+        <div class="colorburn">colorburn</div>
+        <div class="linearlight">linearlight</div>
+        <div class="vividlight">vividlight</div>
+        <div class="pinlight">pinlight</div>
+        <div class="hardmix">hardmix</div>
+
+        <h2>Photoshop</h2>
+        <div class="colorblend">colorblend</div>
+        <div class="dissolve">dissolve</div>
+        <div class="divide">divide</div>
+        <div class="hue">hue</div>
+        <div class="luminosity">luminosity</div>
+        <div class="saturation">saturation</div>
+        <div class="subtract">subtract</div>
+
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script src="js/blend-modes.js"></script>
+        <script>
+        var foreground = '#7FFFD4';
+        var background = '#DEB887';
+
+        $.each(['normal', 'multiply', 'lighten', 'darken', 'darkercolor', 'lightercolor', 'lineardodge', 'linearburn', 'difference', 'screen', 'exclusion', 'overlay', 'softlight', 'hardlight', 'colordodge', 'colorburn', 'linearlight', 'vividlight', 'pinlight', 'hardmix'], function(i, mode) {
+            var color = blend(mode, foreground, background);
+            $('.' + mode).after('<div style="background-color: ' + color + '">' + mode + ' JS</div>');
+            if (mode != 'darkercolor' && mode != 'lightercolor') {
+                $('.' + mode).after('<div style="background-image: url(i/' + mode + '.png)">' + mode + ' PS</div>');
+            }
+        });
+
+        $.each(['colorblend', 'dissolve', 'divide', 'hue', 'luminosity', 'saturation', 'subtract'], function(i, mode) {
+            $('.' + mode).after('<div style="background-image: url(i/' + mode + '.png)">' + mode + ' PS</div>');
+        });
+        </script>
+    </body>
+</html>

data/example/js/blend-modes.js

@@ -0,0 +1,459 @@
+/*
+ * Pixastic Lib - Blend - v0.1.1
+ * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
+ * License: [http://www.pixastic.com/lib/license.txt]
+ */
+
+// NOTE: modified to blend 2 single pixels
+
+// color conversions
+function hex2rgba(h) {return [hexToR(h), hexToG(h),hexToB(h), 255]}
+function hexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
+function hexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
+function hexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
+function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
+function rgba2hex(color) {return '#' + (1 << 24 | color[0] << 16 | color[1] << 8 | color[2]).toString(16).substr(1);}
+
+
+function blend(mode, foregroundColor, backgroundColor) {
+	var data = hex2rgba(backgroundColor);
+	var w = 1;
+	var h = 1;
+
+	
+	var data2 = hex2rgba(foregroundColor);
+
+	var p = w*h;
+	var pix = p*4;
+	var pix1, pix2;
+	var r1, g1, b1;
+	var r2, g2, b2;
+	var r3, g3, b3;
+	var r4, g4, b4;
+
+	var dataChanged = false;
+				switch (mode) {
+				case "normal" : 
+					//while (p--) {
+					//	data2[pix-=4] = data2[pix];
+					//	data2[pix1=pix+1] = data2[pix1];
+					//	data2[pix2=pix+2] = data2[pix2];
+					//}
+					break;
+
+				case "multiply" : 
+					while (p--) {
+						data2[pix-=4] = data[pix] * data2[pix] / 255;
+						data2[pix1=pix+1] = data[pix1] * data2[pix1] / 255;
+						data2[pix2=pix+2] = data[pix2] * data2[pix2] / 255;
+					}
+					dataChanged = true;
+					break;
+
+				case "lighten" : 
+					while (p--) {
+						if ((r1 = data[pix-=4]) > data2[pix])
+							data2[pix] = r1;
+						if ((g1 = data[pix1=pix+1]) > data2[pix1])
+							data2[pix1] = g1;
+						if ((b1 = data[pix2=pix+2]) > data2[pix2])
+							data2[pix2] = b1;
+					}
+					dataChanged = true;
+					break;
+
+				case "darken" : 
+					while (p--) {
+						if ((r1 = data[pix-=4]) < data2[pix])
+							data2[pix] = r1;
+						if ((g1 = data[pix1=pix+1]) < data2[pix1])
+							data2[pix1] = g1;
+						if ((b1 = data[pix2=pix+2]) < data2[pix2])
+							data2[pix2] = b1;
+
+					}
+					dataChanged = true;
+					break;
+
+				case "darkercolor" : 
+					while (p--) {
+						if (((r1 = data[pix-=4])*0.3+(g1 = data[pix1=pix+1])*0.59+(b1 = data[pix2=pix+2])*0.11) <= (data2[pix]*0.3+data2[pix1]*0.59+data2[pix2]*0.11)) {
+							data2[pix] = r1;
+							data2[pix1] = g1;
+							data2[pix2] = b1;
+						}
+					}
+					dataChanged = true;
+					break;
+
+				case "lightercolor" : 
+					while (p--) {
+						if (((r1 = data[pix-=4])*0.3+(g1 = data[pix1=pix+1])*0.59+(b1 = data[pix2=pix+2])*0.11) > (data2[pix]*0.3+data2[pix1]*0.59+data2[pix2]*0.11)) {
+							data2[pix] = r1;
+							data2[pix1] = g1;
+							data2[pix2] = b1;
+						}
+					}
+					dataChanged = true;
+					break;
+
+				case "lineardodge" : 
+					/*
+					otherCtx.globalCompositeOperation = "source-over";
+					otherCtx.drawImage(params.canvas, 0, 0);
+					otherCtx.globalCompositeOperation = "lighter";
+					otherCtx.drawImage(image, 0, 0);
+					*/
+
+					while (p--) {
+						if ((r3 = data[pix-=4] + data2[pix]) > 255)
+							data2[pix] = 255;
+						else
+							data2[pix] = r3;
+						if ((g3 = data[pix1=pix+1] + data2[pix1]) > 255)
+							data2[pix1] = 255;
+						else
+							data2[pix1] = g3;
+						if ((b3 = data[pix2=pix+2] + data2[pix2]) > 255)
+							data2[pix2] = 255;
+						else
+							data2[pix2] = b3;
+					}
+					dataChanged = true;
+
+					break;
+
+				case "linearburn" : 
+					while (p--) {
+						if ((r3 = data[pix-=4] + data2[pix]) < 255)
+							data2[pix] = 0;
+						else
+							data2[pix] = (r3 - 255);
+						if ((g3 = data[pix1=pix+1] + data2[pix1]) < 255)
+							data2[pix1] = 0;
+						else
+							data2[pix1] = (g3 - 255);
+						if ((b3 = data[pix2=pix+2] + data2[pix2]) < 255)
+							data2[pix2] = 0;
+						else
+							data2[pix2] = (b3 - 255);
+					}
+					dataChanged = true;
+					break;
+
+				case "difference" : 
+					while (p--) {
+						if ((r3 = data[pix-=4] - data2[pix]) < 0)
+							data2[pix] = -r3;
+						else
+							data2[pix] = r3;
+						if ((g3 = data[pix1=pix+1] - data2[pix1]) < 0)
+							data2[pix1] = -g3;
+						else
+							data2[pix1] = g3;
+						if ((b3 = data[pix2=pix+2] - data2[pix2]) < 0)
+							data2[pix2] = -b3;
+						else
+							data2[pix2] = b3;
+					}
+					dataChanged = true;
+					break;
+
+				case "screen" : 
+					while (p--) {
+						data2[pix-=4] = (255 - ( ((255-data2[pix])*(255-data[pix])) >> 8));
+						data2[pix1=pix+1] = (255 - ( ((255-data2[pix1])*(255-data[pix1])) >> 8));
+						data2[pix2=pix+2] = (255 - ( ((255-data2[pix2])*(255-data[pix2])) >> 8));
+					}
+					dataChanged = true;
+					break;
+
+				case "exclusion" : 
+					var div_2_255 = 2 / 255;
+					while (p--) {
+						data2[pix-=4] = (r1 = data[pix]) - (r1 * div_2_255 - 1) * data2[pix];
+						data2[pix1=pix+1] = (g1 = data[pix1]) - (g1 * div_2_255 - 1) * data2[pix1];
+						data2[pix2=pix+2] = (b1 = data[pix2]) - (b1 * div_2_255 - 1) * data2[pix2];
+					}
+					dataChanged = true;
+					break;
+
+				case "overlay" : 
+					var div_2_255 = 2 / 255;
+					while (p--) {
+						if ((r1 = data[pix-=4]) < 128)
+							data2[pix] = data2[pix]*r1*div_2_255;
+						else
+							data2[pix] = 255 - (255-data2[pix])*(255-r1)*div_2_255;
+
+						if ((g1 = data[pix1=pix+1]) < 128)
+							data2[pix1] = data2[pix1]*g1*div_2_255;
+						else
+							data2[pix1] = 255 - (255-data2[pix1])*(255-g1)*div_2_255;
+
+						if ((b1 = data[pix2=pix+2]) < 128)
+							data2[pix2] = data2[pix2]*b1*div_2_255;
+						else
+							data2[pix2] = 255 - (255-data2[pix2])*(255-b1)*div_2_255;
+
+					}
+					dataChanged = true;
+					break;
+
+				case "softlight" : 
+					var div_2_255 = 2 / 255;
+					while (p--) {
+						if ((r1 = data[pix-=4]) < 128)
+							data2[pix] = ((data2[pix]>>1) + 64) * r1 * div_2_255;
+						else
+							data2[pix] = 255 - (191 - (data2[pix]>>1)) * (255-r1) * div_2_255;
+
+						if ((g1 = data[pix1=pix+1]) < 128)
+							data2[pix1] = ((data2[pix1]>>1)+64) * g1 * div_2_255;
+						else
+							data2[pix1] = 255 - (191 - (data2[pix1]>>1)) * (255-g1) * div_2_255;
+
+						if ((b1 = data[pix2=pix+2]) < 128)
+							data2[pix2] = ((data2[pix2]>>1)+64) * b1 * div_2_255;
+						else
+							data2[pix2] = 255 - (191 - (data2[pix2]>>1)) * (255-b1) * div_2_255;
+
+					}
+					dataChanged = true;
+					break;
+
+				case "hardlight" : 
+					var div_2_255 = 2 / 255;
+					while (p--) {
+						if ((r2 = data2[pix-=4]) < 128)
+							data2[pix] = data[pix] * r2 * div_2_255;
+						else
+							data2[pix] = 255 - (255-data[pix]) * (255-r2) * div_2_255;
+
+						if ((g2 = data2[pix1=pix+1]) < 128)
+							data2[pix1] = data[pix1] * g2 * div_2_255;
+						else
+							data2[pix1] = 255 - (255-data[pix1]) * (255-g2) * div_2_255;
+
+						if ((b2 = data2[pix2=pix+2]) < 128)
+							data2[pix2] = data[pix2] * b2 * div_2_255;
+						else
+							data2[pix2] = 255 - (255-data[pix2]) * (255-b2) * div_2_255;
+
+					}
+					dataChanged = true;
+					break;
+
+				case "colordodge" : 
+					while (p--) {
+						if ((r3 = (data[pix-=4]<<8)/(255-(r2 = data2[pix]))) > 255 || r2 == 255)
+							data2[pix] = 255;
+						else
+							data2[pix] = r3;
+
+						if ((g3 = (data[pix1=pix+1]<<8)/(255-(g2 = data2[pix1]))) > 255 || g2 == 255)
+							data2[pix1] = 255;
+						else
+							data2[pix1] = g3;
+
+						if ((b3 = (data[pix2=pix+2]<<8)/(255-(b2 = data2[pix2]))) > 255 || b2 == 255)
+							data2[pix2] = 255;
+						else
+							data2[pix2] = b3;
+					}
+					dataChanged = true;
+					break;
+
+				case "colorburn" : 
+					while (p--) {
+						if ((r3 = 255-((255-data[pix-=4])<<8)/data2[pix]) < 0 || data2[pix] == 0)
+							data2[pix] = 0;
+						else
+							data2[pix] = r3;
+
+						if ((g3 = 255-((255-data[pix1=pix+1])<<8)/data2[pix1]) < 0 || data2[pix1] == 0)
+							data2[pix1] = 0;
+						else
+							data2[pix1] = g3;
+
+						if ((b3 = 255-((255-data[pix2=pix+2])<<8)/data2[pix2]) < 0 || data2[pix2] == 0)
+							data2[pix2] = 0;
+						else
+							data2[pix2] = b3;
+					}
+					dataChanged = true;
+					break;
+
+				case "linearlight" : 
+					while (p--) {
+						if ( ((r3 = 2*(r2=data2[pix-=4])+data[pix]-256) < 0) || (r2 < 128 && r3 < 0)) {
+							data2[pix] = 0
+						} else {
+							if (r3 > 255)
+								data2[pix] = 255;
+							else
+								data2[pix] = r3;
+						}
+						if ( ((g3 = 2*(g2=data2[pix1=pix+1])+data[pix1]-256) < 0) || (g2 < 128 && g3 < 0)) {
+							data2[pix1] = 0
+						} else {
+							if (g3 > 255)
+								data2[pix1] = 255;
+							else
+								data2[pix1] = g3;
+						}
+						if ( ((b3 = 2*(b2=data2[pix2=pix+2])+data[pix2]-256) < 0) || (b2 < 128 && b3 < 0)) {
+							data2[pix2] = 0
+						} else {
+							if (b3 > 255)
+								data2[pix2] = 255;
+							else
+								data2[pix2] = b3;
+						}
+					}
+					dataChanged = true;
+					break;
+
+				case "vividlight" : 
+					while (p--) {
+						if ((r2=data2[pix-=4]) < 128) {
+							if (r2) {
+								if ((r3 = 255 - ((255-data[pix])<<8) / (2*r2)) < 0) 
+									data2[pix] = 0;
+								else
+									data2[pix] = r3
+							} else {
+								data2[pix] = 0;
+							}
+						} else if ((r3 = (r4=2*r2-256)) < 255) {
+							if ((r3 = (data[pix]<<8)/(255-r4)) > 255) 
+								data2[pix] = 255;
+							else
+								data2[pix] = r3;
+						} else {
+							if (r3 < 0) 
+								data2[pix] = 0;
+							else
+								data2[pix] = r3
+						}
+
+						if ((g2=data2[pix1=pix+1]) < 128) {
+							if (g2) {
+								if ((g3 = 255 - ((255-data[pix1])<<8) / (2*g2)) < 0) 
+									data2[pix1] = 0;
+								else
+									data2[pix1] = g3;
+							} else {
+								data2[pix1] = 0;
+							}
+						} else if ((g3 = (g4=2*g2-256)) < 255) {
+							if ((g3 = (data[pix1]<<8)/(255-g4)) > 255)
+								data2[pix1] = 255;
+							else
+								data2[pix1] = g3;
+						} else {
+							if (g3 < 0) 
+								data2[pix1] = 0;
+							else
+								data2[pix1] = g3;
+						}
+
+						if ((b2=data2[pix2=pix+2]) < 128) {
+							if (b2) {
+								if ((b3 = 255 - ((255-data[pix2])<<8) / (2*b2)) < 0) 
+									data2[pix2] = 0;
+								else
+									data2[pix2] = b3;
+							} else {
+								data2[pix2] = 0;
+							}
+						} else if ((b3 = (b4=2*b2-256)) < 255) {
+							if ((b3 = (data[pix2]<<8)/(255-b4)) > 255) 
+								data2[pix2] = 255;
+							else
+								data2[pix2] = b3;
+						} else {
+							if (b3 < 0) 
+								data2[pix2] = 0;
+							else
+								data2[pix2] = b3;
+						}
+					}
+					dataChanged = true;
+					break;
+
+				case "pinlight" : 
+					while (p--) {
+						if ((r2=data2[pix-=4]) < 128)
+							if ((r1=data[pix]) < (r4=2*r2))
+								data2[pix] = r1;
+							else
+								data2[pix] = r4;
+						else
+							if ((r1=data[pix]) > (r4=2*r2-256))
+								data2[pix] = r1;
+							else
+								data2[pix] = r4;
+
+						if ((g2=data2[pix1=pix+1]) < 128)
+							if ((g1=data[pix1]) < (g4=2*g2))
+								data2[pix1] = g1;
+							else
+								data2[pix1] = g4;
+						else
+							if ((g1=data[pix1]) > (g4=2*g2-256))
+								data2[pix1] = g1;
+							else
+								data2[pix1] = g4;
+
+						if ((r2=data2[pix2=pix+2]) < 128)
+							if ((r1=data[pix2]) < (r4=2*r2))
+								data2[pix2] = r1;
+							else
+								data2[pix2] = r4;
+						else
+							if ((r1=data[pix2]) > (r4=2*r2-256))
+								data2[pix2] = r1;
+							else
+								data2[pix2] = r4;
+					}
+					dataChanged = true;
+					break;
+
+				case "hardmix" : 
+					while (p--) {
+						if ((r2 = data2[pix-=4]) < 128)
+							if (255 - ((255-data[pix])<<8)/(2*r2) < 128 || r2 == 0)
+								data2[pix] = 0;
+							else
+								data2[pix] = 255;
+						else if ((r4=2*r2-256) < 255 && (data[pix]<<8)/(255-r4) < 128)
+							data2[pix] = 0;
+						else
+							data2[pix] = 255;
+
+						if ((g2 = data2[pix1=pix+1]) < 128)
+							if (255 - ((255-data[pix1])<<8)/(2*g2) < 128 || g2 == 0)
+								data2[pix1] = 0;
+							else
+								data2[pix1] = 255;
+						else if ((g4=2*g2-256) < 255 && (data[pix1]<<8)/(255-g4) < 128)
+							data2[pix1] = 0;
+						else
+							data2[pix1] = 255;
+
+						if ((b2 = data2[pix2=pix+2]) < 128)
+							if (255 - ((255-data[pix2])<<8)/(2*b2) < 128 || b2 == 0)
+								data2[pix2] = 0;
+							else
+								data2[pix2] = 255;
+						else if ((b4=2*b2-256) < 255 && (data[pix2]<<8)/(255-b4) < 128)
+							data2[pix2] = 0;
+						else
+							data2[pix2] = 255;
+					}
+					dataChanged = true;
+					break;
+			}
+	return rgba2hex(data2);
+}