#javascript-processing-example-topic-image-edgedetection.htm / htm
<!DOCTYPE html> <html><head> <script src="javascript-processing-example-processing.js"></script> <script src="javascript-processing-example-init.js"></script> <link rel="stylesheet" href="javascript-processing-example-style.css"> </head><body><h1><a href="http://ejohn.org/blog/processingjs/">Processing.js</a></h1> <h2>EdgeDetection</h2> <p>Exposing areas of contrast within an image by processing it through a high-pass filter.</p> <p><a href="http://processing.org/learning/topics/edgedetection.html"><b>Original Processing.org Example:</b> EdgeDetection</a><br> <script type="application/processing"> float[][] kernel = { { -1, -1, -1 }, { -1, 9, -1 }, { -1, -1, -1 } }; size(200, 200); PImage img = loadImage("house.jpg"); // Load the original image image(img, 0, 0); // Displays the image from point (0,0) img.loadPixels(); // Create an opaque image of the same size as the original PImage edgeImg = createImage(img.width, img.height, RGB); // Loop through every pixel in the image. for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges for (int x = 1; x < img.width-1; x++) { // Skip left and right edges float sum = 0; // Kernel sum for this pixel for (int ky = -1; ky <= 1; ky++) { for (int kx = -1; kx <= 1; kx++) { // Calculate the adjacent pixel for this kernel point int pos = (y + ky)*width + (x + kx); // Image is grayscale, red/green/blue are identical float val = red(img.pixels[pos]); // Multiply adjacent pixels based on the kernel values sum += kernel[ky+1][kx+1] * val; } } // For this pixel in the new image, set the gray value // based on the sum from the kernel edgeImg.pixels[y*img.width + x] = color(sum); } } // State that there are changes to edgeImg.pixels[] edgeImg.updatePixels(); image(edgeImg, 100, 0); // Draw the new image </script><canvas width="200" height="200"></canvas></p> <div style="overflow: hidden; height: 0px; width: 0px;"><img src="javascript-processing-example-house.jpg" id="house.jpg"></div> <pre><b>// All Examples Written by <a href="http://reas.com/">Casey Reas</a> and <a href="http://benfry.com/">Ben Fry</a> // unless otherwise stated.</b> float[][] kernel = { { -1, -1, -1 }, { -1, 9, -1 }, { -1, -1, -1 } }; size(200, 200); PImage img = loadImage("house.jpg"); // Load the original image image(img, 0, 0); // Displays the image from point (0,0) img.loadPixels(); // Create an opaque image of the same size as the original PImage edgeImg = createImage(img.width, img.height, RGB); // Loop through every pixel in the image. for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges for (int x = 1; x < img.width-1; x++) { // Skip left and right edges float sum = 0; // Kernel sum for this pixel for (int ky = -1; ky <= 1; ky++) { for (int kx = -1; kx <= 1; kx++) { // Calculate the adjacent pixel for this kernel point int pos = (y + ky)*width + (x + kx); // Image is grayscale, red/green/blue are identical float val = red(img.pixels[pos]); // Multiply adjacent pixels based on the kernel values sum += kernel[ky+1][kx+1] * val; } } // For this pixel in the new image, set the gray value // based on the sum from the kernel edgeImg.pixels[y*img.width + x] = color(sum); } } // State that there are changes to edgeImg.pixels[] edgeImg.updatePixels(); image(edgeImg, 100, 0); // Draw the new image</pre> </body></html>
(C) Æliens 20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
