Permalink
Browse files

New: Gradient renderer

  • Loading branch information...
1 parent 8ca2553 commit ee3dfef25a74901c53eade4286893baa2ed8b668 @trethaller committed Aug 6, 2013
Showing with 149 additions and 16 deletions.
  1. BIN img/gradient-1.png
  2. +20 −1 js/app.coffee
  3. +24 −2 js/app.js
  4. +50 −6 js/core.coffee
  5. +55 −7 js/core.js
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -23,8 +23,9 @@ editor = new Editor {
targetValue: 1.0
}
-Renderers = [GammaRenderer, NormalRenderer]
+Renderers = [GammaRenderer, NormalRenderer, GradientRenderer]
Tools = [RoundBrush, Picker]
+
Commands = [
{
name: "Fill"
@@ -293,6 +294,24 @@ createPalette = ($container)->
$slider.slider
value: editor.get('targetValue')
+
+loadGradient = (name, url)->
+ $canvas = $('<canvas/>').attr {width: 512, height:1}
+ ctx = $canvas[0].getContext('2d')
+ imageObj = new Image()
+ imageObj.onload = ()->
+ ctx.drawImage(this, 0, 0);
+ imageData = ctx.getImageData(0,0,512,1)
+ data = new Uint32Array(imageData.data.buffer)
+ GradientRenderer.properties.gradient = {
+ lut: data
+ }
+ imageObj.src = url
+
+# --
+
+loadGradient('g1', 'img/gradient-1.png')
+
$(document).ready ()->
doc = new Document(512, 512)
fillLayer doc.layer, (x,y)->
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -147,9 +147,48 @@ GammaRenderer = (()->
`function renderLayer (layer, view, rects) {
var width = layer.width;
var height = layer.height;
+ var destBuffer = new Uint32Array(view.imageData.data.buffer)
+ var fb = layer.getBuffer();
+ var gamma = properties.gamma;
+ for(var i in rects) {
+ var r = rects[i];
+ var minX = r.x;
+ var minY = r.y;
+ var maxX = minX + r.width;
+ var maxY = minY + r.height;
+ for(var iy=minY; iy<=maxY; ++iy) {
+ var offset = iy * width;
+ for(var ix=minX; ix<=maxX; ++ix) {
+ var fval = fb[offset + ix];
+ var val = Math.round(Math.pow((fval + 1.0) * 0.5, gamma) * 255.0);
+ destBuffer[offset + ix] =
+ (val) | (val << 8) | (val << 16) | 0xff000000;
+ }
+ }
+ view.context.putImageData(view.imageData, 0, 0, r.x, r.y, r.width+1, r.height+1);
+ }
+ }`
+
+ return {description, properties, renderLayer}
+)();
+
+GradientRenderer = (()->
+ description =
+ name: "Gradient"
+
+ properties =
+ gradient: null
+
+ `function renderLayer (layer, view, rects) {
+ if(properties.gradient == null)
+ return;
+ var width = layer.width;
+ var height = layer.height;
var imgData = view.imageData.data;
+ var destBuffer = new Uint32Array(view.imageData.data.buffer)
var fb = layer.getBuffer();
var gamma = properties.gamma;
+ var lut = properties.gradient.lut
for(var i in rects) {
var r = rects[i];
var minX = r.x;
@@ -160,12 +199,17 @@ GammaRenderer = (()->
var offset = iy * width;
for(var ix=minX; ix<=maxX; ++ix) {
var fval = fb[offset + ix];
- var val = Math.pow((fval + 1.0) * 0.5, gamma) * 255.0;
- var i = (offset + ix) << 2;
- imgData[i] = val;
- imgData[++i] = val;
- imgData[++i] = val;
- imgData[++i] = 0xff;
+ var lookup = lut[
+ Math.round(
+ Math.min(511,
+ Math.max(0,
+ 256.0 * (1.0 + fval)
+ )
+ )
+ )
+ ];
+ var i = (offset + ix);
+ destBuffer[i] = lookup;
}
}
view.context.putImageData(view.imageData, 0, 0, r.x, r.y, r.width+1, r.height+1);
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit ee3dfef

Please sign in to comment.