Project Info
-
-
-
+ 
<%= module.description %>
\n\n<%= module.description %>
\n\nTo run this example locally, you will need an + * image file, and a running + * local server.
+ */ + +let img; +let w = 80; + +// It's possible to convolve the image with many different +// matrices to produce different effects. This is a high-pass +// filter; it accentuates the edges. +const matrix = [ [ -1, -1, -1 ], + [ -1, 9, -1 ], + [ -1, -1, -1 ] ]; + +function preload() { + img = loadImage('assets/moonwalk.jpg'); +} + +function setup() { + createCanvas(720, 400); + img.loadPixels(); + + // pixelDensity(1) for not scaling pixel density to display density + // for more information, check the reference of pixelDensity() + pixelDensity(1); +} + +function draw() { + // We're only going to process a portion of the image + // so let's set the whole image as the background first + background(img); + + // Calculate the small rectangle we will process + const xstart = constrain(mouseX - w/2, 0, img.width); + const ystart = constrain(mouseY - w/2, 0, img.height); + const xend = constrain(mouseX + w/2, 0, img.width); + const yend = constrain(mouseY + w/2, 0, img.height); + const matrixsize = 3; + + loadPixels(); + // Begin our loop for every pixel in the smaller image + for (let x = xstart; x < xend; x++) { + for (let y = ystart; y < yend; y++ ) { + let c = convolution(x, y, matrix, matrixsize, img); + + // retrieve the RGBA values from c and update pixels() + let loc = (x + y*img.width) * 4; + pixels[loc] = red(c); + pixels[loc + 1] = green(c); + pixels[loc + 2] = blue(c); + pixels[loc + 3] = alpha(c); + } + } + updatePixels(); +} + +function convolution(x, y, matrix, matrixsize, img) { + let rtotal = 0.0; + let gtotal = 0.0; + let btotal = 0.0; + const offset = Math.floor(matrixsize / 2); + for (let i = 0; i < matrixsize; i++){ + for (let j = 0; j < matrixsize; j++){ + + // What pixel are we testing + const xloc = (x + i - offset); + const yloc = (y + j - offset); + let loc = (xloc + img.width * yloc) * 4; + + // Make sure we haven't walked off our image, we could do better here + loc = constrain(loc, 0 , img.pixels.length - 1); + + // Calculate the convolution + // retrieve RGB values + rtotal += (img.pixels[loc]) * matrix[i][j]; + gtotal += (img.pixels[loc + 1]) * matrix[i][j]; + btotal += (img.pixels[loc + 2]) * matrix[i][j]; + } + } + // Make sure RGB is within range + rtotal = constrain(rtotal, 0, 255); + gtotal = constrain(gtotal, 0, 255); + btotal = constrain(btotal, 0, 255); + + // Return the resulting color + return color(rtotal, gtotal, btotal); +} \ No newline at end of file diff --git a/src/data/examples/ko/05_Image/10_Copy_Method.js b/src/data/examples/ko/05_Image/10_Copy_Method.js new file mode 100644 index 0000000000..8fc5ba179d --- /dev/null +++ b/src/data/examples/ko/05_Image/10_Copy_Method.js @@ -0,0 +1,20 @@ +/* + * @name Copy() method + * @frame 600,400 + * @description An example of how to simulate coloring image with the copy() method. + */ +let draft, ready; +function preload() { + ready = loadImage("assets/parrot-color.png"); + draft = loadImage("assets/parrot-bw.png"); +} +function setup() { + createCanvas(600, 400); + noCursor(); + cursor("assets/brush.png", 20, -10); + image(ready, 0, 0); + image(draft, 0, 0); +} +function mouseDragged() { + copy(ready, mouseX, mouseY, 20, 20, mouseX, mouseY, 20, 20); +} diff --git a/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js b/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js new file mode 100644 index 0000000000..2c0509d44b --- /dev/null +++ b/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js @@ -0,0 +1,93 @@ +/* + * @name Edge Detection + * @description A high-pass filter sharpens an image. This program analyzes every pixel in an image in relation to the neighboring pixels to sharpen the image. + *{{#i18n "complete-library-intro1"}}{{/i18n}}{{#i18n "complete-library-intro2"}}{{/i18n}}{{#i18n "complete-library-intro3"}}{{/i18n}}
+{{#i18n "complete-library-intro1"}}{{/i18n}} {{#i18n "complete-library-intro2"}}{{/i18n}}{{#i18n "complete-library-intro3"}}{{/i18n}}
{{#i18n "support-1"}}{{/i18n}}Processing Foundation{{#i18n "support-2"}}{{/i18n}} {{#i18n "support-3"}}{{/i18n}}{{#i18n "support-4"}}{{/i18n}}{{#i18n "support-5"}}{{/i18n}}
- + {{!-- --}} +{{#i18n "support-32"}}{{/i18n}}{{#i18n "support-33"}}{{/i18n}}
diff --git a/src/templates/pages/get-started/index.hbs b/src/templates/pages/get-started/index.hbs index 4a88fe379a..3f1ba168e6 100644 --- a/src/templates/pages/get-started/index.hbs +++ b/src/templates/pages/get-started/index.hbs @@ -123,6 +123,13 @@ function draw() { {{#i18n "download3"}}{{/i18n}} +
+ {{#i18n "download8"}}{{/i18n}}
+ {{#i18n "download9"}}{{/i18n}}
+ {{#i18n "download10"}}{{/i18n}}
+ {{#i18n "download11"}}{{/i18n}}
+
{{#i18n "download4"}}{{/i18n}}
<script src="../p5.min.js"></script>
{{#i18n "environment11"}}{{/i18n}} {{#i18n "environment12"}}{{/i18n}}
+ {{#i18n "environment14"}}{{/i18n}} {{#i18n "environment15"}}{{/i18n}}
+ {{#i18n "environment16"}}{{/i18n}}
{{#i18n "environment13"}}{{/i18n}}
{{#i18n "sketch_info"}}{{/i18n}}
+ {{!--{{#i18n "sketch_info"}}{{/i18n}}
--}} {{> footer}}
