To do steps two of the algorithm, we loop over all pixels in an image by creating a variable to represent each pixel, and then using the image method. The variable image was previously defined. Let's assume that the first step of the algorithm is already complete. We'll look at each line and see how the code works to convert an image to gray scale. Here's the JavaScript source code for the makeGray function. Let's look closely at this function makeGray. Recall that we're adding a button Make Grayscale, who's onclick event handler is the function makeGray. Let's look at translating this algorithm into code. We'll use that same idea of looping over pixels to create a gray scale version of an image in our interactive web page. Using the Duke learn to program environment, you wrote code to process all pixels in an image to change their color. And then set each of the RGB values to this average. And then for each pixel in the image, obtain the R and G and B values. Did you get these answers? Now we've done steps one and two, working an example by hand. Did you get 170, a gray that looks like this? If you'd like more practice by hand, try the gray scale algorithm on maroon, sky blue, and orange with these RGB values. That means the new gray scale pixel will have R and G and B values each of 85. Averaging these values means performing the operation (0 + 255 + 0), all divided by 3, which is 85. For green that's 0 red, 255 green, and 0 blue. To do any math on this green pixel, we need to know the RGB values. Working an example by hand with some sample pixels. One way to do this, is to average the RGB values and to set the new RGB values to this average. And we'd like for our gray scale image to retain variations in brightness of the original image, so it won't just be black and white. We know that what makes a color a shade of gray, is that each of the red, green, and blue values is equal to the others. The first four steps in writing a program are to devise an algorithm. The global variable set or assigned a value and upload and accessed or modified in makeGray to create the gray scale version of the image. We'll see that a global variable for an uploaded image can be accessed in the function upload, and also in the function makeGray. A global variable can be accessed in all functions, because it's defined outside of any of these, that's what makes it global. This will require a new programming concept, global variables. We'll need to access the uploaded image in this function makeGray. The button that we create will call a JavaScript function named makeGray, using the standard on click event handler. Extending a working web page continues what we did earlier with the prototype webpage before we introduced the HTML file input type. We'll fork it, and we'll add a button to create the grayscale webpage that takes an image, like the waterfall on the left, and converts it into a gray scale version as shown on the right. We'll start with a code pen webpage that already has functionality to upload an image. Let's look at creating a grayscale version of an image. We'll use these same concepts of modifying pixels to create interactive web pages that use this simple image library. You also saw how to modify all pixels of an image as part of creating a new image that was a green screen composite of two images. For example, you changed different parts of an image to create stripes, so that part of the image was red, part was blue, and more. In the foundational programming lessons, you modified pixels in an image. Let's look at changing a simple image programmatically using the same concepts you used in the previous module.
0 Comments
Leave a Reply. |