Skip to content

Commit 2af3662

Browse files
twilson90twilson90
committed
update
1 parent f38c7a8 commit 2af3662

8 files changed

+432
-428
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/dev
2+
/.idea

‎content.js

-369
This file was deleted.

‎edges2cats-sheet.png

404 KB
Loading

‎favicon.ico

1.66 KB
Binary file not shown.

‎index.html

+14-59
Large diffs are not rendered by default.

‎main.js

+369
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
console.log("ooh ello");
2+
3+
$(function(){
4+
var heditors = [];
5+
6+
var filters = [];
7+
var filtersDict = {};
8+
var perspectiveNubs = [175, 156, 496, 55, 161, 279, 504, 330];
9+
10+
function Filter(name, id, init, update) {
11+
this.id = id;
12+
this.name = name;
13+
this.update = update;
14+
this.sliders = [];
15+
this.nubs = [];
16+
init.call(this);
17+
18+
filters.push(this);
19+
filtersDict[id] = this;
20+
}
21+
22+
Filter.prototype.addNub = function(name, x, y) {
23+
this.nubs.push({ name: name, x: x, y: y });
24+
};
25+
26+
Filter.prototype.addSlider = function(name, label, min, max, value, step) {
27+
this.sliders.push({ name: name, label: label, min: min, max: max, value: value, step: step });
28+
};
29+
30+
function HEditor(editor, name){
31+
this.editor = editor;
32+
this.name = name;
33+
this.canvas = editor.view.ctx.canvas;
34+
this.$canvas = $(this.canvas);
35+
this.loading = Promise.resolve();
36+
this.$container = this.$canvas.parent();
37+
this.$container.addClass("heditor");
38+
39+
var $html = $('\
40+
<div class="extras">\
41+
<div class="preview">\
42+
<div class="placeholder" style="width:160px; height:160px"></div>\
43+
</div>\
44+
<div>\
45+
<div style="display:inline-block;">\
46+
<input class="input" type="file" name="pic" accept="image/*">\
47+
<button class="reset" type="button">Reset</button>\
48+
<button class="apply" type="button">Apply Image + Filters</button>\
49+
<button class="applySrc" type="button">Apply Filters To Source</button>\
50+
</div>\
51+
\
52+
<div class="fx_properties">\
53+
<div>Filter:</div>\
54+
<div><select class="filters"></select></div>\
55+
<div class="filterSettings"></div>\
56+
</div>\
57+
</div>\
58+
</div>\
59+
');
60+
61+
this.$preview = $html.find(".preview");
62+
this.$input = $html.find(".input");
63+
this.$applyButton = $html.find(".apply");
64+
this.$applySrcButton = $html.find(".applySrc");
65+
this.$resetButton = $html.find(".reset");
66+
this.$filters = $html.find(".filters");
67+
this.$filterSettings = $html.find(".filterSettings");
68+
69+
this.$container.after($html);
70+
71+
this.$nubsContainer = $("<div class='nubs'></div>");
72+
this.$preview.append(this.$nubsContainer);
73+
74+
try {
75+
this.fxCanvas = fx.canvas();
76+
} catch (e) {
77+
alert(e);
78+
return;
79+
}
80+
var $placeholder = $html.find(".placeholder");
81+
var style = $placeholder.attr('style');
82+
$html.find(".placeholder").replaceWith(this.fxCanvas);
83+
$(this.fxCanvas).attr("style", style);
84+
85+
this.$input.change(() => {
86+
var file = this.$input[0].files[0];
87+
if (!file)
88+
return;
89+
90+
var reader = new FileReader();
91+
reader.onload = (e) => {
92+
this.loadImage(e.target.result);
93+
};
94+
reader.readAsDataURL(file);
95+
});
96+
97+
this.$applyButton.click(() => {
98+
this.applyImage();
99+
})
100+
101+
this.$applySrcButton.click(() => {
102+
this.applyToSource();
103+
})
104+
105+
this.$resetButton.click(() => {
106+
this.reset();
107+
})
108+
109+
// Create the filter selector
110+
var html = '';
111+
for (var k in filters) {
112+
var filter = filters[k];
113+
html += '<option value="'+filter.id+'">' + filter.name + '</option>';
114+
}
115+
this.$filters.html(html);
116+
this.$filters.change(() => {
117+
this.setFilter(this.$filters.val());
118+
});
119+
120+
this.filter = filters[0];
121+
//this.loadImage(img64);
122+
//this.setImage()
123+
this.setFilter("brightnessContrast");
124+
125+
heditors.push(this);
126+
}
127+
128+
HEditor.prototype.setFilter = function(filterId) {
129+
this.loading.then(() => {
130+
if (this.$filters.val() != filterId) {
131+
this.$filters.val(filterId);
132+
}
133+
134+
var filter = filtersDict[filterId];
135+
this.filter = filter;
136+
this.filterSettings = {};
137+
this.$filterSettings.empty();
138+
139+
// Add a row for each slider
140+
filter.sliders.forEach((slider, i) => {
141+
var $sliderBlock = $('<div class="sliderBlock"><div>' + slider.label + ':</div><div class="slider"></div></div>');
142+
this.$filterSettings.append($sliderBlock);
143+
var $slider = $sliderBlock.find(".slider");
144+
var onchange = (event, ui) => {
145+
this.filterSettings[slider.name] = ui.value;
146+
this.updateFilter();
147+
};
148+
$slider.slider({
149+
slide: onchange,
150+
change: onchange,
151+
min: slider.min,
152+
max: slider.max,
153+
value: slider.value,
154+
step: slider.step
155+
});
156+
this.filterSettings[slider.name] = slider.value;
157+
});
158+
159+
this.$nubsContainer.empty();
160+
161+
filter.nubs.forEach((nub, i) => {
162+
var x = nub.x * this.$nubsContainer.width();
163+
var y = nub.y * this.$nubsContainer.height();
164+
var nub_pt = this.filterSettings[nub.name] = {x:x / this.canvasScale.x, y:y / this.canvasScale.y};
165+
var $nub = $('<div class="nub"></div>');
166+
this.$nubsContainer.append($nub);
167+
$nub.draggable({
168+
drag: (e, ui) => {
169+
//mouse_down = false;
170+
var offset = $(e.target.parentNode).offset();
171+
nub_pt.x = (ui.offset.left - offset.left) / this.canvasScale.x;
172+
nub_pt.y = (ui.offset.top - offset.top) / this.canvasScale.y;
173+
this.updateFilter();
174+
},
175+
containment: 'parent',
176+
scroll: false
177+
}).css({ left: x, top: y });
178+
179+
});
180+
181+
this.updateFilter();
182+
});
183+
}
184+
185+
HEditor.prototype.loadImage = function(src) {
186+
this.loading = new Promise((resolve, reject) => {
187+
var $img = $('<img>', {src: src, crossOrigin: "anonymous"});
188+
$img.load(() => {
189+
this.setImage($img[0]);
190+
resolve();
191+
});
192+
});
193+
}
194+
195+
HEditor.prototype.updateFilter = function() {
196+
this.canvasScale = { x: $(this.fxCanvas).width() / this.fxCanvas.width, y: $(this.fxCanvas).height() / this.fxCanvas.height };
197+
this.filter.update.call(this.filterSettings, this.fxCanvas, this.texture);
198+
}
199+
200+
HEditor.prototype.setImage = function(image){
201+
this.image = image;
202+
this.texture = this.fxCanvas.texture(image);
203+
this.updateFilter();
204+
}
205+
206+
HEditor.prototype.applyImage = function(){
207+
this.fxCanvas.update();
208+
this.editor.buffer.drawImage(this.fxCanvas,
209+
0, 0, this.fxCanvas.width, this.fxCanvas.height,
210+
0, 0, 256, 256
211+
);
212+
}
213+
214+
HEditor.prototype.applyToSource = function(){
215+
this.texture = this.fxCanvas.texture(this.fxCanvas);
216+
this.fxCanvas.update();
217+
this.setFilter("brightnessContrast");
218+
}
219+
220+
HEditor.prototype.reset = function(){
221+
this.texture = this.fxCanvas.texture(this.image);
222+
this.fxCanvas.update();
223+
this.setFilter("brightnessContrast");
224+
}
225+
226+
//-------------------------------------------------
227+
228+
new Filter('Brightness / Contrast', 'brightnessContrast', function() {
229+
this.addSlider('brightness', 'Brightness', -1, 1, 0, 0.01);
230+
this.addSlider('contrast', 'Contrast', -1, 1, 0, 0.01);
231+
}, function(canvas, texture) {
232+
canvas.draw(texture).brightnessContrast(this.brightness,this.contrast).update();
233+
});
234+
new Filter('Hue / Saturation', 'hueSaturation', function() {
235+
this.addSlider('hue', 'Hue', -1, 1, 0, 0.01);
236+
this.addSlider('saturation', 'Saturation', -1, 1, 0, 0.01);
237+
}, function(canvas, texture) {
238+
canvas.draw(texture).hueSaturation(this.hue, this.saturation).update();
239+
});
240+
new Filter('Vibrance', 'vibrance', function() {
241+
this.addSlider('amount', 'Amount', -1, 1, 0.5, 0.01);
242+
}, function(canvas, texture) {
243+
canvas.draw(texture).vibrance(this.amount).update();
244+
});
245+
new Filter('Denoise', 'denoise', function() {
246+
this.addSlider('exponent', 'Exponent', 0, 50, 20, 1);
247+
}, function(canvas, texture) {
248+
canvas.draw(texture).denoise(this.exponent).update();
249+
});
250+
new Filter('Unsharp Mask', 'unsharpMask', function() {
251+
this.addSlider('radius', 'Radius', 0, 200, 20, 1);
252+
this.addSlider('strength', 'Strength', 0, 5, 2, 0.01);
253+
}, function(canvas, texture) {
254+
canvas.draw(texture).unsharpMask(this.radius, this.strength).update();
255+
});
256+
new Filter('Noise', 'noise', function() {
257+
this.addSlider('amount', 'Amount', 0, 1, 0.5, 0.01);
258+
}, function(canvas, texture) {
259+
canvas.draw(texture).noise(this.amount).update();
260+
});
261+
new Filter('Sepia', 'sepia', function() {
262+
this.addSlider('amount', 'Amount', 0, 1, 1, 0.01);
263+
}, function(canvas, texture) {
264+
canvas.draw(texture).sepia(this.amount).update();
265+
});
266+
new Filter('Vignette', 'vignette', function() {
267+
this.addSlider('size', 'Size', 0, 1, 0.5, 0.01);
268+
this.addSlider('amount', 'Amount', 0, 1, 0.5, 0.01);
269+
}, function(canvas, texture) {
270+
canvas.draw(texture).vignette(this.size, this.amount).update();
271+
});
272+
273+
new Filter('Zoom Blur', 'zoomBlur', function() {
274+
this.addNub('center', 0.5, 0.5);
275+
this.addSlider('strength', 'Strength', 0, 1, 0.3, 0.01);
276+
}, function(canvas, texture) {
277+
canvas.draw(texture).zoomBlur(this.center.x, this.center.y, this.strength).update();
278+
});
279+
new Filter('Triangle Blur', 'triangleBlur', function() {
280+
this.addSlider('radius', 'Radius', 0, 200, 50, 1);
281+
}, function(canvas, texture) {
282+
canvas.draw(texture).triangleBlur(this.radius).update();
283+
});
284+
new Filter('Tilt Shift', 'tiltShift', function() {
285+
this.addNub('start', 0.15, 0.75);
286+
this.addNub('end', 0.75, 0.6);
287+
this.addSlider('blurRadius', 'Blur Radius', 0, 50, 15, 1);
288+
this.addSlider('gradientRadius', 'Gradient Radius', 0, 400, 200, 1);
289+
}, function(canvas, texture) {
290+
canvas.draw(texture).tiltShift(this.start.x, this.start.y, this.end.x, this.end.y, this.blurRadius, this.gradientRadius).update();
291+
});
292+
new Filter('Lens Blur', 'lensBlur', function() {
293+
this.addSlider('radius', 'Radius', 0, 50, 10, 1);
294+
this.addSlider('brightness', 'Brightness', -1, 1, 0.75, 0.01);
295+
this.addSlider('angle', 'Angle', -Math.PI, Math.PI, 0, 0.01);
296+
}, function(canvas, texture) {
297+
canvas.draw(texture).lensBlur(this.radius, this.brightness, this.angle).update();
298+
});
299+
300+
new Filter('Swirl', 'swirl', function() {
301+
this.addNub('center', 0.5, 0.5);
302+
this.addSlider('angle', 'Angle', -25, 25, 3, 0.1);
303+
this.addSlider('radius', 'Radius', 0, 600, 200, 1);
304+
}, function(canvas, texture) {
305+
canvas.draw(texture).swirl(this.center.x, this.center.y, this.radius, this.angle).update();
306+
});
307+
new Filter('Bulge / Pinch', 'bulgePinch', function() {
308+
this.addNub('center', 0.5, 0.5);
309+
this.addSlider('strength', 'Strength', -1, 1, 0.5, 0.01);
310+
this.addSlider('radius', 'Radius', 0, 600, 200, 1);
311+
}, function(canvas, texture) {
312+
canvas.draw(texture).bulgePinch(this.center.x, this.center.y, this.radius, this.strength).update();
313+
});
314+
/*new Filter('Perspective', 'perspective', function() {
315+
var w = 640, h = 425;
316+
this.addNub('a', perspectiveNubs[0] / w, perspectiveNubs[1] / h);
317+
this.addNub('b', perspectiveNubs[2] / w, perspectiveNubs[3] / h);
318+
this.addNub('c', perspectiveNubs[4] / w, perspectiveNubs[5] / h);
319+
this.addNub('d', perspectiveNubs[6] / w, perspectiveNubs[7] / h);
320+
}, function(canvas, texture) {
321+
var before = perspectiveNubs;
322+
var after = [this.a.x, this.a.y, this.b.x, this.b.y, this.c.x, this.c.y, this.d.x, this.d.y];
323+
canvas.draw(texture).perspective([before], [after]).update();
324+
});*/
325+
326+
new Filter('Ink', 'ink', function() {
327+
this.addSlider('strength', 'Strength', 0, 1, 0.25, 0.01);
328+
}, function(canvas, texture) {
329+
canvas.draw(texture).ink(this.strength).update();
330+
});
331+
new Filter('Edge Work', 'edgeWork', function() {
332+
this.addSlider('radius', 'Radius', 0, 200, 10, 1);
333+
}, function(canvas, texture) {
334+
canvas.draw(texture).edgeWork(this.radius).update();
335+
});
336+
new Filter('Hexagonal Pixelate', 'hexagonalPixelate', function() {
337+
this.addNub('center', 0.5, 0.5);
338+
this.addSlider('scale', 'Scale', 10, 100, 20, 1);
339+
}, function(canvas, texture) {
340+
canvas.draw(texture).hexagonalPixelate(this.center.x, this.center.y, this.scale).update();
341+
});
342+
new Filter('Dot Screen', 'dotScreen', function() {
343+
this.addNub('center', 0.5, 0.5);
344+
this.addSlider('angle', 'Angle', 0, Math.PI / 2, 1.1, 0.01);
345+
this.addSlider('size', 'Size', 3, 20, 3, 0.01);
346+
}, function(canvas, texture) {
347+
canvas.draw(texture).dotScreen(this.center.x, this.center.y, this.angle, this.size).update();
348+
});
349+
new Filter('Color Halftone', 'colorHalftone', function() {
350+
this.addNub('center', 0.5, 0.5);
351+
this.addSlider('angle', 'Angle', 0, Math.PI / 2, 0.25, 0.01);
352+
this.addSlider('size', 'Size', 3, 20, 4, 0.01);
353+
}, function(canvas, texture) {
354+
canvas.draw(texture).colorHalftone(this.center.x, this.center.y, this.angle, this.size).update();
355+
});
356+
357+
//hog-mod 1.0.0
358+
var $title = $("body>div>div>a").first();
359+
$title.html("Image-to-Image Demo<br>(hog-mod-1.0.0)");
360+
$author = $title.parent().next().next();
361+
$author.html($author.html()+'<br><span style="font-style:italic;text-align:center;">Improved by </span><span style="font-style:italic;text-align:center;"><a href="http://www.cookdandbombd.co.uk/forums/index.php?action=profile;u=9816">hedgehog90</a></span> — <span style="font-family:Georgia, serif;font-style:italic;"><span>March 7<sup style="font-size:10px;margin-left:1px;margin-right:-6px;">th</sup>, 2017</span></span>');
362+
$author.css({"line-height":"30px"});
363+
364+
var heditors = [];
365+
for (var k in editors) {
366+
new HEditor(editors[k], k);
367+
}
368+
369+
});

‎edges2cats-sheet.jpg renamed to ‎old/edges2cats-sheet.jpg

File renamed without changes.

0 commit comments

Comments
 (0)