Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Renderer buttons

  • Loading branch information...
commit 7b94c64b9bfc2089b655fe820f76835ea8a18007 1 parent f2978b8
@trethaller authored
View
4 index.html
@@ -14,8 +14,8 @@
<div>
<div class="document-view">
</div>
- <div id="tools">
- </div>
+ <div id="tools"></div>
+ <div id="renderers"></div>
<div><pre id="status-bar"></pre></div>
</div>
View
28 js/app.coffee
@@ -6,10 +6,12 @@ class Document
Editor = {
brush: null
tiling: true
- renderer: GammaRenderer
+ #renderer: GammaRenderer
+ renderer: NormalRenderer
targetValue: 1.0
}
+Renderers = [GammaRenderer, NormalRenderer]
Tools = [RoundBrush, Picker]
Editor.tool = RoundBrush.createTool(Editor)
@@ -56,8 +58,9 @@ class DocumentView
e.preventDefault()
if e.which is 1
self.drawing = true
- Editor.tool.beginDraw()
- self.onDraw(getCanvasCoords(e))
+ coords = getCanvasCoords(e)
+ Editor.tool.beginDraw(coords)
+ self.onDraw(coords)
if e.which is 2
self.panning = true
@@ -66,7 +69,7 @@ class DocumentView
$container.mouseup (e)->
if e.which is 1
- Editor.tool.endDraw()
+ Editor.tool.endDraw(getCanvasCoords(e))
self.drawing = false
if e.which is 2
@@ -148,6 +151,8 @@ getPenPressure = () ->
status = (txt)->
$('#status-bar').text(txt)
+view = null
+
createToolsUI = ($container)->
$container.empty()
Tools.forEach (b)->
@@ -158,6 +163,18 @@ createToolsUI = ($container)->
status("Active brush set to #{name}")
$container.append($btn)
+createRenderersUI = ($container)->
+ $container.empty()
+ Renderers.forEach (r)->
+ name = r.description.name
+ $btn = $('<button/>').attr({'class':'btn'}).text(name)
+ $btn.click (e)->
+ Editor.renderer = r
+ view.reRender()
+ view.rePaint()
+ status("Renderer set to #{name}")
+ $container.append($btn)
+
$(document).ready ()->
doc = new Document(512, 512)
fillLayer doc.layer, (x,y)->
@@ -167,7 +184,8 @@ $(document).ready ()->
(Math.round(y*40) % 2) * 0.1
createToolsUI($('#tools'))
+ createRenderersUI($('#renderers'))
view = new DocumentView($('.document-view'), doc)
- view.rePaint()
view.reRender()
+ view.rePaint()
View
41 js/app.js
@@ -1,5 +1,5 @@
// Generated by CoffeeScript 1.6.3
-var Document, DocumentView, Editor, Tools, createToolsUI, getPenPressure, status;
+var Document, DocumentView, Editor, Renderers, Tools, createRenderersUI, createToolsUI, getPenPressure, status, view;
Document = (function() {
function Document(width, height) {
@@ -15,10 +15,12 @@ Document = (function() {
Editor = {
brush: null,
tiling: true,
- renderer: GammaRenderer,
+ renderer: NormalRenderer,
targetValue: 1.0
};
+Renderers = [GammaRenderer, NormalRenderer];
+
Tools = [RoundBrush, Picker];
Editor.tool = RoundBrush.createTool(Editor);
@@ -78,11 +80,13 @@ DocumentView = (function() {
};
local = {};
$container.mousedown(function(e) {
+ var coords;
e.preventDefault();
if (e.which === 1) {
self.drawing = true;
- Editor.tool.beginDraw();
- self.onDraw(getCanvasCoords(e));
+ coords = getCanvasCoords(e);
+ Editor.tool.beginDraw(coords);
+ self.onDraw(coords);
}
if (e.which === 2) {
self.panning = true;
@@ -92,7 +96,7 @@ DocumentView = (function() {
});
$container.mouseup(function(e) {
if (e.which === 1) {
- Editor.tool.endDraw();
+ Editor.tool.endDraw(getCanvasCoords(e));
self.drawing = false;
}
if (e.which === 2) {
@@ -191,6 +195,8 @@ status = function(txt) {
return $('#status-bar').text(txt);
};
+view = null;
+
createToolsUI = function($container) {
$container.empty();
return Tools.forEach(function(b) {
@@ -207,8 +213,26 @@ createToolsUI = function($container) {
});
};
+createRenderersUI = function($container) {
+ $container.empty();
+ return Renderers.forEach(function(r) {
+ var $btn, name;
+ name = r.description.name;
+ $btn = $('<button/>').attr({
+ 'class': 'btn'
+ }).text(name);
+ $btn.click(function(e) {
+ Editor.renderer = r;
+ view.reRender();
+ view.rePaint();
+ return status("Renderer set to " + name);
+ });
+ return $container.append($btn);
+ });
+};
+
$(document).ready(function() {
- var doc, view;
+ var doc;
doc = new Document(512, 512);
fillLayer(doc.layer, function(x, y) {
x += 1.0;
@@ -216,7 +240,8 @@ $(document).ready(function() {
return (Math.round(x * 40) % 2) * 0.1 - (Math.round(y * 40) % 2) * 0.1;
});
createToolsUI($('#tools'));
+ createRenderersUI($('#renderers'));
view = new DocumentView($('.document-view'), doc);
- view.rePaint();
- return view.reRender();
+ view.reRender();
+ return view.rePaint();
});
View
12 js/core.coffee
@@ -135,6 +135,9 @@ Bezier =
return new Vec2 f3(pts[0].x, pts[1].x, pts[2].x, t), f3(pts[0].y, pts[1].y, pts[2].y, t)
GammaRenderer = (()->
+ description =
+ name: "Height map"
+
properties =
gamma: 1.0
@@ -166,12 +169,15 @@ GammaRenderer = (()->
}
}`
- return {properties, renderLayer}
+ return {description, properties, renderLayer}
)();
NormalRenderer = (()->
+ description =
+ name: "Normal map"
+
properties =
- gain: 2.0
+ gain: 4.0
sample = (res, x, y)->
return "var #{res} = fb[ ((#{y} + height) % height) * width + ((#{x} + width) % width) ];\n"
@@ -211,7 +217,7 @@ NormalRenderer = (()->
renderLayer = eval(str);
- return {properties, renderLayer}
+ return {description, properties, renderLayer}
)();
`
View
14 js/core.js
@@ -228,7 +228,10 @@ Bezier = {
};
GammaRenderer = (function() {
- var properties;
+ var description, properties;
+ description = {
+ name: "Height map"
+ };
properties = {
gamma: 1.0
};
@@ -260,15 +263,19 @@ GammaRenderer = (function() {
}
};
return {
+ description: description,
properties: properties,
renderLayer: renderLayer
};
})();
NormalRenderer = (function() {
- var properties, renderLayer, sample, str;
+ var description, properties, renderLayer, sample, str;
+ description = {
+ name: "Normal map"
+ };
properties = {
- gain: 2.0
+ gain: 4.0
};
sample = function(res, x, y) {
return "var " + res + " = fb[ ((" + y + " + height) % height) * width + ((" + x + " + width) % width) ];\n";
@@ -276,6 +283,7 @@ NormalRenderer = (function() {
str = "(function renderLayer (layer, view, rects) { var width = layer.width; var height = layer.height; var imgData = view.imageData.data; var fb = layer.getBuffer(); var dz = 1.0 / (properties.gain); 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) { for(var ix=minX; ix<=maxX; ++ix) { " + sample('sx1', 'ix-1', 'iy') + sample('sx2', 'ix+1', 'iy') + sample('sy1', 'ix', 'iy-1') + sample('sy2', 'ix', 'iy+1') + " var dx = sx2 - sx1; var dy = sy2 - sy1; var fac = 128.0 / Math.sqrt(dx*dx + dy*dy + dz*dz); var i = (iy * width + ix) << 2; imgData[i] = dx * fac + 127.0; imgData[++i] = dy * fac + 127.0; imgData[++i] = dz * fac + 127.0; imgData[++i] = 0xff; } } view.context.putImageData(view.imageData, 0, 0, r.x, r.y, r.width+1, r.height+1); } })";
renderLayer = eval(str);
return {
+ description: description,
properties: properties,
renderLayer: renderLayer
};
View
10 js/tools.coffee
@@ -31,11 +31,11 @@ class StepBrush
@lastpos = pos
return rect
- beginDraw: () ->
+ beginDraw: (pos) ->
@drawing = true
@accumulator = 0
@nsteps = 0
- endDraw: () ->
+ endDraw: (pos) ->
@lastpos = null
@drawing = false
console.log("#{@nsteps} steps drawn")
@@ -55,8 +55,8 @@ Picker = (()->
properties: {}
createTool: (env)->
- beginDraw: ()->;
- endDraw: ()->;
+ beginDraw: (pos)->;
+ endDraw: (pos)->;
move: ()->;
draw: (layer, pos, intensity) ->
env.targetValue = layer.getAt(pos)
@@ -75,7 +75,7 @@ RoundBrush = (()->
hardness:
name: "Hardness"
- value: 1.0
+ value: 0.0
range: [0.0, 10.0]
size:
View
10 js/tools.js
@@ -45,13 +45,13 @@ StepBrush = (function() {
return rect;
};
- StepBrush.prototype.beginDraw = function() {
+ StepBrush.prototype.beginDraw = function(pos) {
this.drawing = true;
this.accumulator = 0;
return this.nsteps = 0;
};
- StepBrush.prototype.endDraw = function() {
+ StepBrush.prototype.endDraw = function(pos) {
this.lastpos = null;
this.drawing = false;
return console.log("" + this.nsteps + " steps drawn");
@@ -76,8 +76,8 @@ Picker = (function() {
properties: {},
createTool: function(env) {
return {
- beginDraw: function() {},
- endDraw: function() {},
+ beginDraw: function(pos) {},
+ endDraw: function(pos) {},
move: function() {},
draw: function(layer, pos, intensity) {
env.targetValue = layer.getAt(pos);
@@ -101,7 +101,7 @@ RoundBrush = (function() {
},
hardness: {
name: "Hardness",
- value: 1.0,
+ value: 0.0,
range: [0.0, 10.0]
},
size: {
Please sign in to comment.
Something went wrong with that request. Please try again.