initial javascript version
Sascha Nitsch
parent
90e65cacd6
commit
e3b55ac4fa
|
|
@ -3,3 +3,7 @@ build
|
|||
.project
|
||||
.settings/
|
||||
c++/html
|
||||
inbrowser/.tscache
|
||||
inbrowser/jsdoc
|
||||
inbrowser/node_modules
|
||||
inbrowser/tmp
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
module.exports = function(grunt) {
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
ts: {
|
||||
default: {
|
||||
src: ['ts/**/*.ts'],
|
||||
outDir: 'tmp/',
|
||||
options: {
|
||||
module: 'none',
|
||||
sourceMap: false,
|
||||
target: 'es5',
|
||||
rootDir: 'ts/'
|
||||
}
|
||||
},
|
||||
},
|
||||
concat: {
|
||||
js: {
|
||||
src: ['tmp/**/*.js'],
|
||||
dest: 'tmp/bootstrap.out'
|
||||
},
|
||||
dist: {
|
||||
src: ['html/index.html'],
|
||||
dest: 'webroot/index.html',
|
||||
},
|
||||
options: {
|
||||
process: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
jsbootstrapts: {
|
||||
files: ['ts/**/*.ts'],
|
||||
tasks: ['ts', 'concat']
|
||||
},
|
||||
html: {
|
||||
files: ['html/*'],
|
||||
tasks: ['concat']
|
||||
},
|
||||
lessdefault: {
|
||||
files: ['less/*.less'],
|
||||
tasks: ['less:default', 'concat']
|
||||
},
|
||||
},
|
||||
less: {
|
||||
default: {
|
||||
options: {
|
||||
"strictImports": true,
|
||||
"compress": true
|
||||
},
|
||||
files: {
|
||||
"tmp/default.css": "less/main.less",
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-less');
|
||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
||||
grunt.loadNpmTasks("grunt-ts");
|
||||
|
||||
// Default task(s).
|
||||
grunt.registerTask('default', ['less', 'ts', 'concat', 'watch']);
|
||||
grunt.registerTask('release', ['less', 'ts', 'concat']);
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Path Animator Tool</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style type="text/css">
|
||||
<%= grunt.file.read('tmp/default.css') %>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>1. Source image</h2>
|
||||
<div id="drop-area">
|
||||
<form>
|
||||
<p>Select image with the file dialog or by dragging and dropping an image onto the dashed region.</p>
|
||||
<input type="file" id="fileElem" accept="image/*" />
|
||||
<label class="button" for="fileElem">Select an image</label>
|
||||
</form>
|
||||
<div id="gallery"></div>
|
||||
</div>
|
||||
<h2>2. Configure algorithm</h2>
|
||||
<div id="algorithm">
|
||||
<form>
|
||||
<div><label for="algorithm">Select the algorithm to use:</label>
|
||||
<select name="algorithm" id="alsel">
|
||||
<option value="distancepath" selected="selected">Distance Path</option>
|
||||
<option value="noise">Noise</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="distancepath">
|
||||
<h3>Distance path</h3>
|
||||
<div><label for="weightpath">Weight of path</label> <input type="text" name="weightpath" value="1"/></div>
|
||||
<div><label for="weightblock">Weight of block</label> <input type="text" name="weightblock" value="1000"/></div>
|
||||
<div><label for="threshold">Treshold for traversable pixel</label> <input type="text" name="treshold" value="210"/></div>
|
||||
<div><label for="maxdistance">Maximum distance value</label> <input type="text" name="maxdistance" value="3000000"/></div>
|
||||
<div><label for="startpoints">List of starting points Format:<br />x1,y1 x2,y2 ...</label> <input type="text" name="startpoints" value="0,0"/></div>
|
||||
</div>
|
||||
<div id="noise" class="hidden">
|
||||
<h3>Noise</h3>
|
||||
Nothing to configure.
|
||||
</div>
|
||||
<p>
|
||||
<button id="run" class="button hidden">run</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<h2>3. Output image</h2>
|
||||
<div id="output">
|
||||
</div>
|
||||
<p><button id="save" class="button hidden">Save image</button></p>
|
||||
<canvas id="outputcanvas" class="hidden"></canvas>
|
||||
<canvas id="inputcanvas" class="hidden"></canvas>
|
||||
<script type="text/javascript">
|
||||
<%= grunt.file.read('tmp/bootstrap.out') %>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
body {
|
||||
background:#000;
|
||||
color:f9f9f9;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
#algorithm {
|
||||
label {
|
||||
width:250px;
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
.running:before {
|
||||
display:inline-block;
|
||||
content: ' ';
|
||||
border-radius: 50%;
|
||||
border: .5rem solid rgba(0,0,0,0.25);
|
||||
border-top-color: #fff;
|
||||
animation: spin 1s infinite linear;
|
||||
width:16px;
|
||||
height:16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#drop-area {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 20px;
|
||||
max-width:480px;
|
||||
width: 50%;
|
||||
font-family: sans-serif;
|
||||
margin: 10px 0;
|
||||
padding: 20px;
|
||||
&.highlight {
|
||||
border-color: purple;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
color:#000;
|
||||
background: #ccc;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
&:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
#fileElem {
|
||||
display: none;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"name": "pathanimation",
|
||||
"version": "1.0.0",
|
||||
"description": "Javascript version of the Path Animation tool",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "GrumpyDeveloper https://contentnation.net/grumpydevelop",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "^1.4.1",
|
||||
"grunt-contrib-less": "^3.0.0",
|
||||
"grunt-contrib-watch": "^1.1.0",
|
||||
"grunt-ts": "^6.0.0-beta.22",
|
||||
"grunt-contrib-concat": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
/// <reference path="PAImage.ts" />
|
||||
/// <reference path="PathAnimator.ts" />
|
||||
|
||||
/**
|
||||
* Functionality to handle browser io
|
||||
*/
|
||||
class BrowserHandler {
|
||||
/**
|
||||
* Drop area for file uploads
|
||||
*/
|
||||
private dropArea: HTMLElement;
|
||||
/**
|
||||
* Main instace of application
|
||||
*/
|
||||
private instance: PathAnimator;
|
||||
/**
|
||||
* Indicator flag if the drop area is highlighted
|
||||
*/
|
||||
private isHighlighted: boolean;
|
||||
/**
|
||||
* Algrothm selection dropdown element
|
||||
*/
|
||||
private algorithmElem: HTMLSelectElement;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor(instance: PathAnimator) {
|
||||
this.instance = instance;
|
||||
this.isHighlighted = false;
|
||||
this.dropArea = document.getElementById('drop-area');
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
this.dropArea.addEventListener(eventName, this.preventDefaults, false);
|
||||
});
|
||||
this.dropArea.addEventListener('dragover', this.dragOver.bind(this), false)
|
||||
this.dropArea.addEventListener('drop', this.dragDrop.bind(this), false)
|
||||
this.algorithmElem = <HTMLSelectElement>document.getElementById("alsel");
|
||||
this.algorithmElem.addEventListener("change", this.algorithmChanged.bind(this));
|
||||
this.algorithmChanged();
|
||||
document.getElementById("fileElem").addEventListener("change", this.handleSourceFile.bind(this));
|
||||
document.getElementById("run").addEventListener("click", this.run.bind(this));
|
||||
document.getElementById("save").addEventListener("click", this.save.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent default action for given event
|
||||
* @param e incoming event
|
||||
*/
|
||||
preventDefaults (e: Event) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
/**
|
||||
* Event when something is dragged over out drag/drop area
|
||||
*/
|
||||
dragOver() {
|
||||
if (!this.isHighlighted) {
|
||||
this.dropArea.classList.add("highlight");
|
||||
this.isHighlighted = true;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Something was droppen on our drag/drop area
|
||||
* @param e Incoming event
|
||||
*/
|
||||
dragDrop(e: DragEvent) {
|
||||
let dt = e.dataTransfer
|
||||
let files = dt.files
|
||||
this.setSourceFile(files);
|
||||
if (this.isHighlighted) {
|
||||
this.dropArea.classList.remove("highlight");
|
||||
this.isHighlighted = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A file was selected via upload file button
|
||||
* @param e: Incoming event
|
||||
*/
|
||||
handleSourceFile(e: Event) {
|
||||
var fs = <HTMLInputElement>e.target;
|
||||
this.setSourceFile(fs.files);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the source file and trigger processing with given file list. Only the first file will be used
|
||||
* @param fileList the file list generated by the browser on drop or file selection
|
||||
*/
|
||||
setSourceFile(fileList: FileList) {
|
||||
// we only support one image
|
||||
if (fileList.length > 0) {
|
||||
var file = fileList.item(0);
|
||||
this.processFile(file);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process (load) given file, calls fileLoaded when read
|
||||
* @param file file to process
|
||||
*/
|
||||
processFile(file: File) {
|
||||
let reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.addEventListener("loadend", this.fileLoaded.bind(this));
|
||||
}
|
||||
|
||||
/**
|
||||
* The file loading from processFile has been finished.
|
||||
* fileParsed will be called after image was rendered
|
||||
* @param e progress event (normally file loaded)
|
||||
*/
|
||||
fileLoaded(e:ProgressEvent) {
|
||||
if (e.type === "loadend") { // sanity check
|
||||
var reader = <FileReader>e.target;
|
||||
let img = <HTMLImageElement>document.createElement('img');
|
||||
img.src = <string>reader.result;
|
||||
img.addEventListener("load", this.fileParsed.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The image data from file is ready.
|
||||
* The canvas is filled with the image and the pixel data is extracted
|
||||
* and set for the main processing instance.
|
||||
* @param e incoming event
|
||||
*/
|
||||
fileParsed(e: Event) {
|
||||
var img = <HTMLImageElement>e.target;
|
||||
const canvas = <HTMLCanvasElement>document.getElementById("inputcanvas");
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
const rgba = ctx.getImageData(0, 0, img.width, img.height).data;
|
||||
var image = new PAImage(img.width, img.height, 4);
|
||||
image.setPixels(rgba);
|
||||
this.instance.setInputImage(image);
|
||||
document.getElementById("run").classList.remove("hidden");
|
||||
}
|
||||
|
||||
/**
|
||||
* The algrothm select dropdown was changed.
|
||||
* Show and hide algrothm specific inputs
|
||||
*/
|
||||
algorithmChanged() {
|
||||
var div = document.getElementById("algorithm").getElementsByTagName("div");
|
||||
for (var i = 0; i < div.length; ++i) {
|
||||
if (div[i].hasAttribute("id")) {
|
||||
if (div[i].getAttribute("id") === this.algorithmElem.value) {
|
||||
div[i].classList.remove("hidden");
|
||||
} else {
|
||||
div[i].classList.add("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* The run button was pressed.
|
||||
* The algorithm specific setting are collected and an async timeout call is triggered to run the PathAnimator run function
|
||||
* @param e incoming Event
|
||||
*/
|
||||
run(e: Event) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
// collect algorithm param
|
||||
var config = {
|
||||
algorithm: this.algorithmElem.value
|
||||
}
|
||||
var div = document.getElementById(this.algorithmElem.value);
|
||||
var fields = div.getElementsByTagName("input");
|
||||
for (var i = 0; i < fields.length; ++i) {
|
||||
config[fields[i].getAttribute("name")] = fields[i].value;
|
||||
}
|
||||
document.getElementById("output").classList.add("running");
|
||||
document.getElementById("run").classList.add("hidden");
|
||||
document.getElementById("save").classList.add("hidden");
|
||||
window.setTimeout(this.instance.run.bind(this.instance, config), 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear logging output
|
||||
*/
|
||||
clearOutput() {
|
||||
document.getElementById("output").innerHTML = "";
|
||||
}
|
||||
|
||||
/**
|
||||
* Append message to logging output
|
||||
* @param data string to display
|
||||
*/
|
||||
appendOutput(data: string) {
|
||||
var p = document.createElement("p");
|
||||
p.innerText = data;
|
||||
document.getElementById("output").append(p);
|
||||
}
|
||||
|
||||
/**
|
||||
* Replace old logging output by new data
|
||||
* @param data new string to display
|
||||
*/
|
||||
replaceOutput(data: string) {
|
||||
this.clearOutput();
|
||||
this.appendOutput(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Processing has completed
|
||||
* Show buttons and hide running animation
|
||||
*/
|
||||
completed() {
|
||||
document.getElementById("output").classList.remove("running");
|
||||
document.getElementById("run").classList.remove("hidden");
|
||||
document.getElementById("save").classList.remove("hidden");
|
||||
}
|
||||
|
||||
/**
|
||||
* Show output of the algorithm
|
||||
* The Canvas is filled with the output of the algorithm.
|
||||
* Preprocessing is needed, the algorithm exports RGB data, the canvas wants RGBA.
|
||||
* @param image image to show
|
||||
*/
|
||||
showOutput(image: PAImage) {
|
||||
var output = <HTMLCanvasElement>document.getElementById("outputcanvas");
|
||||
output.classList.remove("hidden");
|
||||
var width = image.getWidth();
|
||||
var height = image.getHeight();
|
||||
output.width = width;
|
||||
output.height = height;
|
||||
var end = width* height * 3;
|
||||
const ctx = output.getContext('2d');
|
||||
var outCanvas = ctx.getImageData(0,0, width, height);
|
||||
const outCanvasPixel = outCanvas.data;
|
||||
var imagePixel = image.getPixels8();
|
||||
var offsetCanvas = 0;
|
||||
var offsetImage = 0;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = 255;
|
||||
}
|
||||
ctx.putImageData(outCanvas, 0, 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* User has clicked the save button
|
||||
* Trigger download
|
||||
* @param e incoming Event
|
||||
*/
|
||||
save(e: Event) {
|
||||
var output = <HTMLCanvasElement>document.getElementById("outputcanvas");
|
||||
var dataURL = output.toDataURL("image/png");
|
||||
var a = document.createElement('a');
|
||||
a.href = dataURL;
|
||||
a.download = "output.png";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
/**
|
||||
* Wrapper for pixel data of an image
|
||||
*/
|
||||
class PAImage {
|
||||
/**
|
||||
* Constructor
|
||||
* @param width width in pixel
|
||||
* @param height height in pixel
|
||||
* @param channels number of channels
|
||||
*/
|
||||
constructor(width:number, height:number, channels: number) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.channels = channels;
|
||||
}
|
||||
|
||||
/**
|
||||
* Allocate memory for image data
|
||||
*/
|
||||
allocateMemory() {
|
||||
this.pixels = new Uint8ClampedArray(this.width * this. height * this.channels);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set pixel data
|
||||
* @param pixels pixel data
|
||||
*/
|
||||
setPixels(pixels : Uint8ClampedArray) {
|
||||
this.pixels = pixels;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get pixel data
|
||||
* @return pixel data
|
||||
*/
|
||||
getPixels8() : Uint8ClampedArray {
|
||||
return this.pixels;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get width of image
|
||||
* @return width of image
|
||||
*/
|
||||
getWidth() : number {
|
||||
return this.width;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get height of image
|
||||
* @return height of image
|
||||
*/
|
||||
getHeight() : number {
|
||||
return this.height;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get number of channels
|
||||
* @return number of channels
|
||||
*/
|
||||
getNumChannels() : number {
|
||||
return this.channels;
|
||||
}
|
||||
|
||||
/**
|
||||
* Image width
|
||||
*/
|
||||
private width: number;
|
||||
/**
|
||||
* Image height
|
||||
*/
|
||||
private height: number;
|
||||
/**
|
||||
* Number of channels
|
||||
*/
|
||||
private channels: number;
|
||||
/**
|
||||
* Image data as RGBA 8 bit per channel
|
||||
*/
|
||||
private pixels: Uint8ClampedArray;
|
||||
};
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
/// <reference path="BrowserHandler.ts" />
|
||||
/// <reference path="window.ts" />
|
||||
/// <reference path="PAImage.ts" />
|
||||
/// <reference path="algorithm/DistancePath.ts" />
|
||||
/// <reference path="algorithm/Noise.ts" />
|
||||
|
||||
/**
|
||||
* Main application class
|
||||
*/
|
||||
class PathAnimator {
|
||||
/**
|
||||
* Browser abstraction instance
|
||||
*/
|
||||
private inputHandler:BrowserHandler;
|
||||
/**
|
||||
* Input image
|
||||
*/
|
||||
private input: PAImage;
|
||||
/**
|
||||
* Output image
|
||||
*/
|
||||
private output: PAImage;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
this.inputHandler = new BrowserHandler(this);
|
||||
this.input = null;
|
||||
this.output = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set input image
|
||||
* @param image image to set as input
|
||||
*/
|
||||
setInputImage(image: PAImage) {
|
||||
this.input = image;
|
||||
}
|
||||
|
||||
/**
|
||||
* Actual run function that triggerse the processing.
|
||||
* @param config the algorithm specific config options
|
||||
*/
|
||||
run(config: Object) {
|
||||
var algorithmName = config['algorithm'];
|
||||
var algorithm: Algorithm = null;
|
||||
switch(algorithmName) {
|
||||
case 'distancepath':
|
||||
algorithm = new DistancePath(config);
|
||||
break;
|
||||
case 'noise':
|
||||
algorithm = new Noise();
|
||||
break;
|
||||
}
|
||||
if (algorithm) {
|
||||
this.inputHandler.clearOutput();
|
||||
this.output = new PAImage(this.input.getWidth(), this.input.getHeight(), 3);
|
||||
this.output.allocateMemory();
|
||||
algorithm.setCallback(this);
|
||||
algorithm.setInput(this.input);
|
||||
algorithm.setOutput(this.output);
|
||||
algorithm.run();
|
||||
this.inputHandler.completed();
|
||||
this.inputHandler.showOutput(this.output);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* We got a message from out algorithm, display it
|
||||
* @param message Message to show
|
||||
* @param append True if message should be appended, false if previous should be cleared
|
||||
*/
|
||||
messageCallback(message: string, append: boolean) {
|
||||
if (append) {
|
||||
this.inputHandler.appendOutput(message);
|
||||
} else {
|
||||
this.inputHandler.replaceOutput(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
/// <reference path="../PathAnimator.ts" />
|
||||
/// <reference path="../PAImage.ts" />
|
||||
|
||||
/**
|
||||
* Base class for the algorithms
|
||||
*/
|
||||
class Algorithm {
|
||||
/**
|
||||
* Main instance
|
||||
*/
|
||||
protected callback: PathAnimator;
|
||||
/**
|
||||
* Input image
|
||||
*/
|
||||
protected input: PAImage;
|
||||
/**
|
||||
* Output image
|
||||
*/
|
||||
protected output: PAImage;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*/
|
||||
constructor() {
|
||||
this.callback = null;
|
||||
this.output = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the callback instance
|
||||
* @param callback The main PathAnimator instance
|
||||
*/
|
||||
setCallback(callback: PathAnimator) {
|
||||
this.callback = callback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the input image
|
||||
* @param image Input image
|
||||
*/
|
||||
setInput(image: PAImage) {
|
||||
this.input = image;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the output image
|
||||
* @param image Output image
|
||||
*/
|
||||
setOutput(image: PAImage) {
|
||||
this.output = image;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dummy run function, must be overloaded
|
||||
*/
|
||||
run() {
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
/// <reference path="Algorithm.ts" />
|
||||
/**
|
||||
* Distance Path algorithm implementation
|
||||
*/
|
||||
class DistancePath extends Algorithm {
|
||||
/**
|
||||
* Pixels updated by last iteration. Value = x<<16 + y
|
||||
*/
|
||||
private last: number[];
|
||||
/**
|
||||
* Pixels updated by current iteration. Value = x<<16 + y
|
||||
*/
|
||||
private next: number[];
|
||||
/**
|
||||
* Weight of a block (Pixel with value 0)
|
||||
*/
|
||||
private weightBlock: number;
|
||||
/**
|
||||
* Weight of a path (Pixel with value 255)
|
||||
*/
|
||||
private weightPath: number;
|
||||
/**
|
||||
* Treshold value when a pixel becomes a path (0...255)
|
||||
*/
|
||||
private treshold: number;
|
||||
/**
|
||||
* Maximum distance before path becomes no longer traversable
|
||||
*/
|
||||
private maxDistance: number;
|
||||
/**
|
||||
* Input pixel data (RGBA)
|
||||
*/
|
||||
private inRAW: Uint8ClampedArray;
|
||||
/**
|
||||
* Temporary distance map
|
||||
*/
|
||||
private outRAW: number[];
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param config Parameters from UI
|
||||
*/
|
||||
constructor(config: Object) {
|
||||
super();
|
||||
this.last = [];
|
||||
this.next = [];
|
||||
this.weightBlock = parseFloat(config['weightblock']);
|
||||
this.weightPath = parseFloat(config['weightpath']);
|
||||
this.treshold = parseInt(config['treshold'], 10);
|
||||
this.maxDistance = parseFloat(config['maxdistance']);
|
||||
// start pixel
|
||||
var start = config['startpoints'].split(" ");
|
||||
for (var i = 0; i < start.length; ++i) {
|
||||
var pos = start[i].split(",");
|
||||
this.last.push((parseInt(pos[0]) << 16) + parseInt(pos[1]));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process a single pixel.
|
||||
* @param x X-coordinate
|
||||
* @param y Y-coordinate
|
||||
* @param lastValue Last value of the pixel that triggered (re)calculation
|
||||
* @param width image width
|
||||
*/
|
||||
processPixel(x: number, y: number, lastValue: number, width: number) {
|
||||
var offset = (y * width + x);
|
||||
var inOffset = offset * 4;
|
||||
var avg = (this.inRAW[inOffset] + this.inRAW[inOffset + 1] + this.inRAW[inOffset + 2]) / 765;
|
||||
var newValue = lastValue + (1 - avg) * (this.weightBlock - this.weightPath) + this.weightPath;
|
||||
if (newValue > this.maxDistance) newValue = this.maxDistance;
|
||||
if (newValue < this.outRAW[offset]) {
|
||||
this.next.push((x << 16) + y);
|
||||
this.outRAW[offset] = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Run the algorithm
|
||||
*/
|
||||
run() {
|
||||
var width = this.input.getWidth();
|
||||
var height = this.input.getHeight();
|
||||
this.inRAW = this.input.getPixels8();
|
||||
var end = width * height;
|
||||
// allocate output storage and set to m_maxDistance
|
||||
this.outRAW = new Array<number>(width * height);
|
||||
for (var i = 0; i < end; i++) this.outRAW[i] = this.maxDistance;
|
||||
// set start pixels to distance of 0
|
||||
this.last.forEach((coordinate) => {
|
||||
var x = coordinate >> 16;
|
||||
var y = coordinate & 0xFFFF;
|
||||
this.outRAW[(width * y + x)] = 0;
|
||||
});
|
||||
|
||||
var outPixels = this.output.getPixels8();
|
||||
var iteration = 0;
|
||||
do {
|
||||
// process pixel from last time
|
||||
for (var i = 0; i < this.last.length; ++i) {
|
||||
var coordinate = this.last[i];
|
||||
var x = coordinate >> 16;
|
||||
var y = coordinate & 0xFFFF;
|
||||
var lastValue = this.outRAW[y * width + x];
|
||||
if (y > 0) { // process row on top
|
||||
if (x > 0) this.processPixel(x - 1, y - 1, lastValue, width);
|
||||
this.processPixel(x, y - 1, lastValue, width);
|
||||
if (x < (width - 1)) this.processPixel(x + 1, y - 1, lastValue, width);
|
||||
}
|
||||
if (x > 0) this.processPixel(x - 1, y, lastValue, width);
|
||||
if (x < (width - 1)) this.processPixel(x + 1, y, lastValue, width);
|
||||
if (y < (height - 1)) { // process row on bottom
|
||||
if (x > 0) this.processPixel(x - 1, y + 1, lastValue, width);
|
||||
this.processPixel(x, y + 1, lastValue, width);
|
||||
if (x < (width - 1)) this.processPixel(x + 1, y + 1, lastValue, width);
|
||||
}
|
||||
}
|
||||
++iteration;
|
||||
// clear out old list
|
||||
this.last = this.next;
|
||||
this.next = [];
|
||||
if (iteration % 1000 == 0) {
|
||||
this.callback.messageCallback("iteration: " + iteration, false);
|
||||
}
|
||||
if (iteration > 10000) break;
|
||||
} while (this.last.length > 0);
|
||||
// find max value
|
||||
var max = 0;
|
||||
var threshold = this.treshold * 3; // multiply by 3 here saves many division from sum to average in the loops below
|
||||
|
||||
// could be optimized, but it is only run once for every pixel
|
||||
for (var i = 0; i < end; ++i) {
|
||||
var offset = i * 4;
|
||||
var sum = (this.inRAW[offset] + this.inRAW[offset + 1] + this.inRAW[offset + 2]);
|
||||
// only update max if it is larger than previous, but still smaller than our max distance and larger as the threshhold (visible path cheat)
|
||||
if (this.outRAW[i] > max && this.outRAW[i] < this.maxDistance && (sum > threshold)) max = this.outRAW[i];
|
||||
}
|
||||
this.callback.messageCallback("took " + iteration + " iterations max value: " + max, false);
|
||||
max = 65535.0 / max; // results in 0 ... 65535 range
|
||||
// write result to output
|
||||
var inOffset = 0;
|
||||
var outOffset = 0;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
var sum = (this.inRAW[inOffset++] + this.inRAW[inOffset++] + this.inRAW[inOffset++]);
|
||||
++inOffset;
|
||||
if (sum > threshold) {
|
||||
var value = this.outRAW[i] * max;
|
||||
outPixels[outOffset++] = value >> 8; // red = distance high byte
|
||||
outPixels[outOffset++] = value & 0xFF; // green = distance low byte
|
||||
outPixels[outOffset++] = 255; // blue= a pathable pixel
|
||||
} else {
|
||||
outPixels[outOffset++] = 0;
|
||||
outPixels[outOffset++] = 0;
|
||||
outPixels[outOffset++] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/// <reference path="Algorithm.ts" />
|
||||
|
||||
/**
|
||||
* Demo algorithm that fills image with noise
|
||||
*/
|
||||
class Noise extends Algorithm {
|
||||
/**
|
||||
* Run the algorithm
|
||||
*/
|
||||
run() {
|
||||
var width = this.output.getWidth();
|
||||
var height = this.output.getHeight();
|
||||
var pixels = this.output.getPixels8();
|
||||
var end = width * height * 3;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
pixels[i] = Math.random()*255;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/// <reference path="PathAnimator.ts" />
|
||||
/**
|
||||
* Main entry function
|
||||
*/
|
||||
|
||||
/// create our class as soon as the document is loaded
|
||||
document.addEventListener("readystatechange", function(event: Event) {
|
||||
if (!window.pa) {
|
||||
window.pa = new PathAnimator();
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
/// <reference path="PathAnimator.ts" />
|
||||
|
||||
/**
|
||||
* extend Window to make our global instance available (for debugging purposes)
|
||||
*/
|
||||
interface Window {
|
||||
/**
|
||||
* our instance
|
||||
*/
|
||||
pa: PathAnimator;
|
||||
}
|
||||
|
|
@ -0,0 +1,462 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Path Animator Tool</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<style type="text/css">
|
||||
body{background:#000;color:f9f9f9;padding:10px}#algorithm label{width:250px;display:inline-block}.hidden{display:none !important}.running:before{display:inline-block;content:' ';border-radius:50%;border:.5rem solid rgba(0,0,0,0.25);border-top-color:#fff;animation:spin 1s infinite linear;width:16px;height:16px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}#drop-area{border:2px dashed #ccc;border-radius:20px;max-width:480px;width:50%;font-family:sans-serif;margin:10px 0;padding:20px}#drop-area.highlight{border-color:purple}.button{display:inline-block;padding:10px;color:#000;background:#ccc;cursor:pointer;border-radius:5px;border:1px solid #ccc}.button:hover{background:#ddd}#fileElem{display:none}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>1. Source image</h2>
|
||||
<div id="drop-area">
|
||||
<form>
|
||||
<p>Select image with the file dialog or by dragging and dropping an image onto the dashed region.</p>
|
||||
<input type="file" id="fileElem" accept="image/*" />
|
||||
<label class="button" for="fileElem">Select an image</label>
|
||||
</form>
|
||||
<div id="gallery"></div>
|
||||
</div>
|
||||
<h2>2. Configure algorithm</h2>
|
||||
<div id="algorithm">
|
||||
<form>
|
||||
<div><label for="algorithm">Select the algorithm to use:</label>
|
||||
<select name="algorithm" id="alsel">
|
||||
<option value="distancepath" selected="selected">Distance Path</option>
|
||||
<option value="noise">Noise</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="distancepath">
|
||||
<h3>Distance path</h3>
|
||||
<div><label for="weightpath">Weight of path</label> <input type="text" name="weightpath" value="1"/></div>
|
||||
<div><label for="weightblock">Weight of block</label> <input type="text" name="weightblock" value="1000"/></div>
|
||||
<div><label for="threshold">Treshold for traversable pixel</label> <input type="text" name="treshold" value="210"/></div>
|
||||
<div><label for="maxdistance">Maximum distance value</label> <input type="text" name="maxdistance" value="3000000"/></div>
|
||||
<div><label for="startpoints">List of starting points Format:<br />x1,y1 x2,y2 ...</label> <input type="text" name="startpoints" value="0,0"/></div>
|
||||
</div>
|
||||
<div id="noise" class="hidden">
|
||||
<h3>Noise</h3>
|
||||
Nothing to configure.
|
||||
</div>
|
||||
<p>
|
||||
<button id="run" class="button hidden">run</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<h2>3. Output image</h2>
|
||||
<div id="output">
|
||||
</div>
|
||||
<p><button id="save" class="button hidden">Save image</button></p>
|
||||
<canvas id="outputcanvas" class="hidden"></canvas>
|
||||
<canvas id="inputcanvas" class="hidden"></canvas>
|
||||
<script type="text/javascript">
|
||||
var Algorithm = (function () {
|
||||
function Algorithm() {
|
||||
this.callback = null;
|
||||
this.output = null;
|
||||
}
|
||||
Algorithm.prototype.setCallback = function (callback) {
|
||||
this.callback = callback;
|
||||
};
|
||||
Algorithm.prototype.setInput = function (image) {
|
||||
this.input = image;
|
||||
};
|
||||
Algorithm.prototype.setOutput = function (image) {
|
||||
this.output = image;
|
||||
};
|
||||
Algorithm.prototype.run = function () {
|
||||
};
|
||||
return Algorithm;
|
||||
}());
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var DistancePath = (function (_super) {
|
||||
__extends(DistancePath, _super);
|
||||
function DistancePath(config) {
|
||||
var _this = _super.call(this) || this;
|
||||
_this.last = [];
|
||||
_this.next = [];
|
||||
_this.weightBlock = parseFloat(config['weightblock']);
|
||||
_this.weightPath = parseFloat(config['weightpath']);
|
||||
_this.treshold = parseInt(config['treshold'], 10);
|
||||
_this.maxDistance = parseFloat(config['maxdistance']);
|
||||
var start = config['startpoints'].split(" ");
|
||||
for (var i = 0; i < start.length; ++i) {
|
||||
var pos = start[i].split(",");
|
||||
_this.last.push((parseInt(pos[0]) << 16) + parseInt(pos[1]));
|
||||
}
|
||||
return _this;
|
||||
}
|
||||
DistancePath.prototype.processPixel = function (x, y, lastValue, width) {
|
||||
var offset = (y * width + x);
|
||||
var inOffset = offset * 4;
|
||||
var avg = (this.inRAW[inOffset] + this.inRAW[inOffset + 1] + this.inRAW[inOffset + 2]) / 765;
|
||||
var newValue = lastValue + (1 - avg) * (this.weightBlock - this.weightPath) + this.weightPath;
|
||||
if (newValue > this.maxDistance)
|
||||
newValue = this.maxDistance;
|
||||
if (newValue < this.outRAW[offset]) {
|
||||
this.next.push((x << 16) + y);
|
||||
this.outRAW[offset] = newValue;
|
||||
}
|
||||
};
|
||||
DistancePath.prototype.run = function () {
|
||||
var _this = this;
|
||||
var width = this.input.getWidth();
|
||||
var height = this.input.getHeight();
|
||||
this.inRAW = this.input.getPixels8();
|
||||
var end = width * height;
|
||||
this.outRAW = new Array(width * height);
|
||||
for (var i = 0; i < end; i++)
|
||||
this.outRAW[i] = this.maxDistance;
|
||||
this.last.forEach(function (coordinate) {
|
||||
var x = coordinate >> 16;
|
||||
var y = coordinate & 0xFFFF;
|
||||
_this.outRAW[(width * y + x)] = 0;
|
||||
});
|
||||
var outPixels = this.output.getPixels8();
|
||||
var iteration = 0;
|
||||
do {
|
||||
for (var i = 0; i < this.last.length; ++i) {
|
||||
var coordinate = this.last[i];
|
||||
var x = coordinate >> 16;
|
||||
var y = coordinate & 0xFFFF;
|
||||
var lastValue = this.outRAW[y * width + x];
|
||||
if (y > 0) {
|
||||
if (x > 0)
|
||||
this.processPixel(x - 1, y - 1, lastValue, width);
|
||||
this.processPixel(x, y - 1, lastValue, width);
|
||||
if (x < (width - 1))
|
||||
this.processPixel(x + 1, y - 1, lastValue, width);
|
||||
}
|
||||
if (x > 0)
|
||||
this.processPixel(x - 1, y, lastValue, width);
|
||||
if (x < (width - 1))
|
||||
this.processPixel(x + 1, y, lastValue, width);
|
||||
if (y < (height - 1)) {
|
||||
if (x > 0)
|
||||
this.processPixel(x - 1, y + 1, lastValue, width);
|
||||
this.processPixel(x, y + 1, lastValue, width);
|
||||
if (x < (width - 1))
|
||||
this.processPixel(x + 1, y + 1, lastValue, width);
|
||||
}
|
||||
}
|
||||
++iteration;
|
||||
this.last = this.next;
|
||||
this.next = [];
|
||||
if (iteration % 1000 == 0) {
|
||||
this.callback.messageCallback("iteration: " + iteration, false);
|
||||
}
|
||||
if (iteration > 10000)
|
||||
break;
|
||||
} while (this.last.length > 0);
|
||||
var max = 0;
|
||||
var threshold = this.treshold * 3;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
var offset = i * 4;
|
||||
var sum = (this.inRAW[offset] + this.inRAW[offset + 1] + this.inRAW[offset + 2]);
|
||||
if (this.outRAW[i] > max && this.outRAW[i] < this.maxDistance && (sum > threshold))
|
||||
max = this.outRAW[i];
|
||||
}
|
||||
this.callback.messageCallback("took " + iteration + " iterations max value: " + max, false);
|
||||
max = 65535.0 / max;
|
||||
var inOffset = 0;
|
||||
var outOffset = 0;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
var sum = (this.inRAW[inOffset++] + this.inRAW[inOffset++] + this.inRAW[inOffset++]);
|
||||
++inOffset;
|
||||
if (sum > threshold) {
|
||||
var value = this.outRAW[i] * max;
|
||||
outPixels[outOffset++] = value >> 8;
|
||||
outPixels[outOffset++] = value & 0xFF;
|
||||
outPixels[outOffset++] = 255;
|
||||
}
|
||||
else {
|
||||
outPixels[outOffset++] = 0;
|
||||
outPixels[outOffset++] = 0;
|
||||
outPixels[outOffset++] = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
return DistancePath;
|
||||
}(Algorithm));
|
||||
|
||||
var __extends = (this && this.__extends) || (function () {
|
||||
var extendStatics = function (d, b) {
|
||||
extendStatics = Object.setPrototypeOf ||
|
||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
||||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
|
||||
return extendStatics(d, b);
|
||||
};
|
||||
return function (d, b) {
|
||||
if (typeof b !== "function" && b !== null)
|
||||
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
|
||||
extendStatics(d, b);
|
||||
function __() { this.constructor = d; }
|
||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
||||
};
|
||||
})();
|
||||
var Noise = (function (_super) {
|
||||
__extends(Noise, _super);
|
||||
function Noise() {
|
||||
return _super !== null && _super.apply(this, arguments) || this;
|
||||
}
|
||||
Noise.prototype.run = function () {
|
||||
var width = this.output.getWidth();
|
||||
var height = this.output.getHeight();
|
||||
var pixels = this.output.getPixels8();
|
||||
var end = width * height * 3;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
pixels[i] = Math.random() * 255;
|
||||
}
|
||||
};
|
||||
return Noise;
|
||||
}(Algorithm));
|
||||
|
||||
var BrowserHandler = (function () {
|
||||
function BrowserHandler(instance) {
|
||||
var _this = this;
|
||||
this.instance = instance;
|
||||
this.isHighlighted = false;
|
||||
this.dropArea = document.getElementById('drop-area');
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(function (eventName) {
|
||||
_this.dropArea.addEventListener(eventName, _this.preventDefaults, false);
|
||||
});
|
||||
this.dropArea.addEventListener('dragover', this.dragOver.bind(this), false);
|
||||
this.dropArea.addEventListener('drop', this.dragDrop.bind(this), false);
|
||||
this.algorithmElem = document.getElementById("alsel");
|
||||
this.algorithmElem.addEventListener("change", this.algorithmChanged.bind(this));
|
||||
this.algorithmChanged();
|
||||
document.getElementById("fileElem").addEventListener("change", this.handleSourceFile.bind(this));
|
||||
document.getElementById("run").addEventListener("click", this.run.bind(this));
|
||||
document.getElementById("save").addEventListener("click", this.save.bind(this));
|
||||
}
|
||||
BrowserHandler.prototype.preventDefaults = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
BrowserHandler.prototype.dragOver = function () {
|
||||
if (!this.isHighlighted) {
|
||||
this.dropArea.classList.add("highlight");
|
||||
this.isHighlighted = true;
|
||||
}
|
||||
};
|
||||
BrowserHandler.prototype.dragDrop = function (e) {
|
||||
var dt = e.dataTransfer;
|
||||
var files = dt.files;
|
||||
this.setSourceFile(files);
|
||||
if (this.isHighlighted) {
|
||||
this.dropArea.classList.remove("highlight");
|
||||
this.isHighlighted = false;
|
||||
}
|
||||
};
|
||||
BrowserHandler.prototype.handleSourceFile = function (e) {
|
||||
var fs = e.target;
|
||||
this.setSourceFile(fs.files);
|
||||
};
|
||||
BrowserHandler.prototype.setSourceFile = function (fileList) {
|
||||
if (fileList.length > 0) {
|
||||
var file = fileList.item(0);
|
||||
this.processFile(file);
|
||||
}
|
||||
};
|
||||
BrowserHandler.prototype.processFile = function (file) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.addEventListener("loadend", this.fileLoaded.bind(this));
|
||||
};
|
||||
BrowserHandler.prototype.fileLoaded = function (e) {
|
||||
if (e.type === "loadend") {
|
||||
var reader = e.target;
|
||||
var img = document.createElement('img');
|
||||
img.src = reader.result;
|
||||
img.addEventListener("load", this.fileParsed.bind(this));
|
||||
}
|
||||
};
|
||||
BrowserHandler.prototype.fileParsed = function (e) {
|
||||
var img = e.target;
|
||||
var canvas = document.getElementById("inputcanvas");
|
||||
var ctx = canvas.getContext('2d');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
var rgba = ctx.getImageData(0, 0, img.width, img.height).data;
|
||||
var image = new PAImage(img.width, img.height, 4);
|
||||
image.setPixels(rgba);
|
||||
this.instance.setInputImage(image);
|
||||
document.getElementById("run").classList.remove("hidden");
|
||||
};
|
||||
BrowserHandler.prototype.algorithmChanged = function () {
|
||||
var div = document.getElementById("algorithm").getElementsByTagName("div");
|
||||
for (var i = 0; i < div.length; ++i) {
|
||||
if (div[i].hasAttribute("id")) {
|
||||
if (div[i].getAttribute("id") === this.algorithmElem.value) {
|
||||
div[i].classList.remove("hidden");
|
||||
}
|
||||
else {
|
||||
div[i].classList.add("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
BrowserHandler.prototype.run = function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var config = {
|
||||
algorithm: this.algorithmElem.value
|
||||
};
|
||||
var div = document.getElementById(this.algorithmElem.value);
|
||||
var fields = div.getElementsByTagName("input");
|
||||
for (var i = 0; i < fields.length; ++i) {
|
||||
config[fields[i].getAttribute("name")] = fields[i].value;
|
||||
}
|
||||
document.getElementById("output").classList.add("running");
|
||||
document.getElementById("run").classList.add("hidden");
|
||||
document.getElementById("save").classList.add("hidden");
|
||||
window.setTimeout(this.instance.run.bind(this.instance, config), 10);
|
||||
};
|
||||
BrowserHandler.prototype.clearOutput = function () {
|
||||
document.getElementById("output").innerHTML = "";
|
||||
};
|
||||
BrowserHandler.prototype.appendOutput = function (data) {
|
||||
var p = document.createElement("p");
|
||||
p.innerText = data;
|
||||
document.getElementById("output").append(p);
|
||||
};
|
||||
BrowserHandler.prototype.replaceOutput = function (data) {
|
||||
this.clearOutput();
|
||||
this.appendOutput(data);
|
||||
};
|
||||
BrowserHandler.prototype.completed = function () {
|
||||
document.getElementById("output").classList.remove("running");
|
||||
document.getElementById("run").classList.remove("hidden");
|
||||
document.getElementById("save").classList.remove("hidden");
|
||||
};
|
||||
BrowserHandler.prototype.showOutput = function (image) {
|
||||
var output = document.getElementById("outputcanvas");
|
||||
output.classList.remove("hidden");
|
||||
var width = image.getWidth();
|
||||
var height = image.getHeight();
|
||||
output.width = width;
|
||||
output.height = height;
|
||||
var end = width * height * 3;
|
||||
var ctx = output.getContext('2d');
|
||||
var outCanvas = ctx.getImageData(0, 0, width, height);
|
||||
var outCanvasPixel = outCanvas.data;
|
||||
var imagePixel = image.getPixels8();
|
||||
var offsetCanvas = 0;
|
||||
var offsetImage = 0;
|
||||
for (var i = 0; i < end; ++i) {
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = imagePixel[offsetImage++];
|
||||
outCanvasPixel[offsetCanvas++] = 255;
|
||||
}
|
||||
ctx.putImageData(outCanvas, 0, 0);
|
||||
};
|
||||
BrowserHandler.prototype.save = function (e) {
|
||||
var output = document.getElementById("outputcanvas");
|
||||
var dataURL = output.toDataURL("image/png");
|
||||
var a = document.createElement('a');
|
||||
a.href = dataURL;
|
||||
a.download = "output.png";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
};
|
||||
return BrowserHandler;
|
||||
}());
|
||||
|
||||
document.addEventListener("readystatechange", function (event) {
|
||||
if (!window.pa) {
|
||||
window.pa = new PathAnimator();
|
||||
}
|
||||
});
|
||||
|
||||
var PAImage = (function () {
|
||||
function PAImage(width, height, channels) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.channels = channels;
|
||||
}
|
||||
PAImage.prototype.allocateMemory = function () {
|
||||
this.pixels = new Uint8ClampedArray(this.width * this.height * this.channels);
|
||||
};
|
||||
PAImage.prototype.setPixels = function (pixels) {
|
||||
this.pixels = pixels;
|
||||
};
|
||||
PAImage.prototype.getPixels8 = function () {
|
||||
return this.pixels;
|
||||
};
|
||||
PAImage.prototype.getWidth = function () {
|
||||
return this.width;
|
||||
};
|
||||
PAImage.prototype.getHeight = function () {
|
||||
return this.height;
|
||||
};
|
||||
PAImage.prototype.getNumChannels = function () {
|
||||
return this.channels;
|
||||
};
|
||||
return PAImage;
|
||||
}());
|
||||
;
|
||||
|
||||
var PathAnimator = (function () {
|
||||
function PathAnimator() {
|
||||
this.inputHandler = new BrowserHandler(this);
|
||||
this.input = null;
|
||||
this.output = null;
|
||||
}
|
||||
PathAnimator.prototype.setInputImage = function (image) {
|
||||
this.input = image;
|
||||
};
|
||||
PathAnimator.prototype.run = function (config) {
|
||||
var algorithmName = config['algorithm'];
|
||||
var algorithm = null;
|
||||
switch (algorithmName) {
|
||||
case 'distancepath':
|
||||
algorithm = new DistancePath(config);
|
||||
break;
|
||||
case 'noise':
|
||||
algorithm = new Noise();
|
||||
break;
|
||||
}
|
||||
if (algorithm) {
|
||||
this.inputHandler.clearOutput();
|
||||
this.output = new PAImage(this.input.getWidth(), this.input.getHeight(), 3);
|
||||
this.output.allocateMemory();
|
||||
algorithm.setCallback(this);
|
||||
algorithm.setInput(this.input);
|
||||
algorithm.setOutput(this.output);
|
||||
algorithm.run();
|
||||
this.inputHandler.completed();
|
||||
this.inputHandler.showOutput(this.output);
|
||||
}
|
||||
};
|
||||
PathAnimator.prototype.messageCallback = function (message, append) {
|
||||
if (append) {
|
||||
this.inputHandler.appendOutput(message);
|
||||
}
|
||||
else {
|
||||
this.inputHandler.replaceOutput(message);
|
||||
}
|
||||
};
|
||||
return PathAnimator;
|
||||
}());
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue