Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

initial

  • Loading branch information...
commit 18b9112ba8f3f6753aaf462667a8c6e33083ccbd 1 parent 917176f
@mrflix authored
View
145 1_edge_detection/1_edge_detection.tmproj
@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+ <key>currentDocument</key>
+ <string>js/Kernel.js</string>
+ <key>documents</key>
+ <array>
+ <dict>
+ <key>name</key>
+ <string>css</string>
+ <key>regexFolderFilter</key>
+ <string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
+ <key>sourceDirectory</key>
+ <string>css</string>
+ </dict>
+ <dict>
+ <key>name</key>
+ <string>img</string>
+ <key>regexFolderFilter</key>
+ <string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
+ <key>sourceDirectory</key>
+ <string>img</string>
+ </dict>
+ <dict>
+ <key>filename</key>
+ <string>index.html</string>
+ <key>lastUsed</key>
+ <date>2012-10-16T12:21:10Z</date>
+ </dict>
+ <dict>
+ <key>expanded</key>
+ <true/>
+ <key>name</key>
+ <string>js</string>
+ <key>regexFolderFilter</key>
+ <string>!.*/(\.[^/]*|CVS|_darcs|_MTN|\{arch\}|blib|.*~\.nib|.*\.(framework|app|pbproj|pbxproj|xcode(proj)?|bundle))$</string>
+ <key>sourceDirectory</key>
+ <string>js</string>
+ </dict>
+ </array>
+ <key>fileHierarchyDrawerWidth</key>
+ <integer>200</integer>
+ <key>metaData</key>
+ <dict>
+ <key>index.html</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>38</integer>
+ <key>line</key>
+ <integer>14</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>4</integer>
+ </dict>
+ <key>js/Kernel.js</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>4</integer>
+ <key>line</key>
+ <integer>12</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>0</integer>
+ </dict>
+ <key>js/application.js</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>0</integer>
+ <key>line</key>
+ <integer>0</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>0</integer>
+ </dict>
+ <key>js/render.js</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>0</integer>
+ <key>line</key>
+ <integer>0</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>0</integer>
+ </dict>
+ <key>js/ui.js</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>0</integer>
+ <key>line</key>
+ <integer>0</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>0</integer>
+ </dict>
+ <key>js/utilities.js</key>
+ <dict>
+ <key>caret</key>
+ <dict>
+ <key>column</key>
+ <integer>6</integer>
+ <key>line</key>
+ <integer>153</integer>
+ </dict>
+ <key>firstVisibleColumn</key>
+ <integer>0</integer>
+ <key>firstVisibleLine</key>
+ <integer>144</integer>
+ </dict>
+ </dict>
+ <key>openDocuments</key>
+ <array>
+ <string>index.html</string>
+ <string>js/Kernel.js</string>
+ <string>js/application.js</string>
+ <string>js/render.js</string>
+ <string>js/ui.js</string>
+ <string>js/utilities.js</string>
+ </array>
+ <key>showFileHierarchyDrawer</key>
+ <true/>
+ <key>windowFrame</key>
+ <string>{{203, 4}, {1067, 387}}</string>
+</dict>
+</plist>
View
51 1_edge_detection/css/style.css
@@ -0,0 +1,51 @@
+html {
+ min-height: 100%;
+ font: 13px/21px "Helvetica Neue", Helvetica, Arial, sans-serif;
+ color: #373737;
+ line-height: 1.625;
+ font-weight: 300;
+ background: #fff;
+}
+body {
+ margin: 0;
+ /* get rid of the anoying text selection - this is a webapp - no webpage */
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+#controls {
+ width: 100%;
+ padding: 13px 0 12px;
+ color: white;
+ background: #3d3d3d;
+ border-top: 1px solid rgba(0,0,0,.55);
+ border-bottom: 1px solid rgba(0,0,0,.55);
+ text-shadow: 0 1px black;
+ box-shadow:
+ 0 1px rgba(255,255,255,.13) inset,
+ 0 -1px rgba(255,255,255,.13) inset,
+ 0 1px rgba(0, 0, 0, 0.13),
+ 0 2px rgba(0, 0, 0, 0.05);
+ position: fixed;
+}
+label { margin-left: 21px; padding-right: 5px; vertical-align: top; }
+input { line-height: 21px; }
+input[type=range] { vertical-align: middle; }
+canvas { vertical-align: bottom; }
+#holder { padding: 62px 13px 13px; }
+#statusBar {
+ bottom: 0;
+ width: 100%;
+ position: fixed;
+ z-index: 1;
+ background: white;
+}
+ #statusBar div {
+ padding: 5px 21px;
+ color: black;
+ background: rgba(255,0,0,.34);
+ border-top: 1px solid red;
+ display: block;
+ }
View
32 1_edge_detection/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Edge Detection</title>
+ <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+<div id="controls">
+ <label for="file">File</label>
+ <select id="file">
+ <option value="360411_pixelio.png">360411_pixelio.png</option>
+ <option value="jet.png">jet.png</option>
+ </select>
+ <label for="technic">Technic</label>
+ <select id="technic">
+ <option value="360411_pixelio.png">360411_pixelio.png</option>
+ <option value="jet.png">jet.png</option>
+ </select>
+</div>
+<div id="statusBar"></div>
+<div id="holder">
+ <canvas id="render">Sorry, your browser doesn't support the technology used in this Demo. Please use an up-to-date browser.</canvas>
+</div>
+
+<!-- self-written JavaScript starts here -->
+<script type="text/javascript" src="js/utilities.js"></script>
+<script type="text/javascript" src="js/render.js"></script>
+<script type="text/javascript" src="js/application.js"></script>
+<script type="text/javascript" src="js/ui.js"></script>
+</body>
+</html>
View
15 1_edge_detection/js/Kernel.js
@@ -0,0 +1,15 @@
+/*
+ Kernel
+ ======
+
+ a kernel is used to
+*/
+function Kernel(kernel){
+ this.kernel = kernel;
+}
+
+Kernel.prototype = {
+ process : function(data){
+
+ }
+};
View
0  1_edge_detection/js/application.js
No changes.
View
0  1_edge_detection/js/render.js
No changes.
View
0  1_edge_detection/js/ui.js
No changes.
View
163 1_edge_detection/js/utilities.js
@@ -0,0 +1,163 @@
+//
+// canvasFilters utilities
+//
+// by Felix Niklas @mrflix Oct 2011
+//
+
+var utilities = {
+ threshold: 128,
+ histogram: [],
+ counter: 0,
+ //
+ // Median
+ // ------
+ //
+ // returns the median of a section of the histogram
+ //
+ median: function(start, stop){
+ var p = 0;
+ var x = 0;
+
+ // start and stop might be floats
+ start = parseInt(start, 10);
+ stop = parseInt(stop, 10);
+
+ for(var j = start; j <= stop; j++){
+ var value = this.histogram[j];
+ p += value;
+ x += j*value;
+ }
+
+ // exceptions
+ if( p === 0 ) {
+ return start === 0 ? stop : start;
+ }
+
+ return x/p;
+ },
+ //
+ // Iso Data Algorithm
+ // ==================
+ //
+ // starts with a default threshold to determine a good threshold
+ // by spliting up the histogram in two equal weighted areas
+ //
+ // this function is recursive - it calls itself until the perfect threshold is found
+ //
+ isoDataAlgorithm: function(t){
+ // default to 128 if no t is given
+ if( t === undefined ){
+ this.counter = 0;
+ t = 128;
+ }
+
+ var m1 = this.median(0, t-1);
+ var m2 = this.median(t, 255);
+
+ // calculate new threshold
+ tk = ( m1 + m2 ) / 2;
+
+ if( this.counter > 100 ){
+ window.alert("Error 101: too much recursion.");
+ return false;
+ }
+
+ if( t === tk ){
+ this.threshold = Math.round( tk );
+ } else {
+ this.counter ++;
+ this.isoDataAlgorithm(tk);
+ }
+ },
+ //
+ // Calculate Histogram
+ // ==================
+ //
+ // creates a (non-normalised) histogram by adding up
+ // the occurence of every gray shade.
+ //
+ calculateHistogram: function(graytones){
+ this.histogram = [];
+
+ // set histogram initially to 0
+ for(var i=0; i<256; i++){
+ this.histogram[i] = 0;
+ }
+
+ for(var i=0, l=graytones.length; i<l; i++){
+ var value = graytones[i];
+ this.histogram[value] += 1;
+ }
+ },
+ //
+ // Grayscale
+ // ---------
+ //
+ // reduces the input image data to an array of gray shades.
+ //
+ grayscale: function(imgData){
+ var gray = [];
+
+ for(var i=0, n=0, l=imgData.length; i<l; i+=4, n++){
+ var r = imgData[i],
+ g = imgData[i+1],
+ b = imgData[i+2];
+
+ // weighted grayscale algorithm
+ gray[n] = Math.round(r * 0.3 + g * 0.59 + b * 0.11);
+ }
+ return gray;
+ },
+ //
+ // binarizer
+ // ---------
+ //
+ binarize: function(imgData){
+ var gray = [];
+ var binarizedData = [];
+
+ // grayscale
+ gray = this.grayscale(imgData);
+
+ // calculate the histogram
+ this.calculateHistogram(gray);
+
+ // calculate the threshold
+ this.isoDataAlgorithm();
+
+ for(var i = 0, l = gray.length; i<l; i++){
+ binarizedData[i] = gray[i] < this.threshold ? 1 : 0;
+ }
+
+ // pack the array into a 2-dimensional array for easier x,y control
+ return this.dimensionise(binarizedData);
+ },
+ //
+ // dimensionise
+ // ------------
+ //
+ // split the array up into a 2-dimensional array (with image-width and height as boundarys)
+ //
+ dimensionise: function(imageData){
+ var dimensional = [];
+ for(var y=0, i=0; y<image.height; y++){
+ dimensional[y] = [];
+ for(var x=0; x<image.width; x++, i++){
+ dimensional[y][x] = imageData[i];
+ }
+ }
+ return dimensional;
+ },
+ //
+ // list helper
+ // ===========
+ //
+ inList: function(list, array){
+ for(var i = 0; i<list.length; i++){
+ if(list[i][0] === array[0] && list[i][1] === array[1]){
+ return true;
+ }
+ }
+ return false;
+ },
+};
Please sign in to comment.
Something went wrong with that request. Please try again.