Again, we declare and initialize newG to be 255, and then do tGreen to 255 and that changes the second pixel from blue to cyan. We start by going inside the body of the loop and executing the statements there again. Or as a programmer would say, you are ready to do the next iteration of the loop. Now you are going to do the steps in the for loop again with the next piece of data. In the case of this loop, that means updating the pixel variable to the next pixel in the image like this. Whenever you reach the end of the for loop's body, you go back to the top of the loop and move to the next piece of data. Now, the next thing in the code is the closed curly braces. Since newG is 255, this will set the pixels' green value, 255, changing its color from magenta to white. Next, you are going to do tGreen to newG. If you look at the numerical data for this pixel, you will see that its green value is 0, so newG will be initialized to 255. The first statement declares a variable called newG and initializes it to 255- pixel.getGreen. Now we go inside the body of the loop and begin executing statements there. These are not separate data, but we write them here so that they're clear as we manipulate the pixel, since they don't show up directly in the conceptual colored squares picture. The pixel has e and y coordinate and red, green and blue component values. This box on the right let's you peak inside of the pixels numerical data. Why does this matter? In a moment, we are going to change the color of the pixel and the change will show up in the image, since var pixel is the actual pixel inside that image. It is also important to note that we are referring to an existing pixel inside of the image. Notice that the arrow is pointing at one particular pixel. So we will start with the pixel variable referring to the first pixel in the image. The second part says that we're going to do a loop over each pixel in the image. So we are going to create a box for that variable. The first part of the for loop creates a new variable named pixel. Img's arrow refers to the image as a whole. We've drawn a light blue box around the image and made the area arrow in img's box match this color, to help make it clear what the arrow is referring to once we start drawing other arrows. We are assuming that the variable img was previously declared and initialized to refer to this two by two image. Here, we are about to begin execution of the for loop. Now, that you have the basics of the for loop syntax let's look at the semantics. The body of the loop is the set of statements that should be repeated for each piece of data. Finally, you have the body of the loop inside of curly braces. values method inside of simple image gives back all of its pixels, to access each one in turn within the loop body via the variable pixel. Then, you have the expression that evaluates to the data you want to iterate over. Which says that you are about to say what pieces of data to iterate over. In this case of this loop, each piece of data will be a pixel. Setting its value to the next piece of data. The loop will automatically update this variable each time it repeats. Here var pixel, which makes a new variable to refer to the current item. The first part of this information is the variable repetition. Next, you have information about how to do the repetition inside of the parenthesis. First, we have the keyword, for, which says you're providing a for loop. Let's start by breaking down the syntax of this loop. Although the steps inside of it are not the ones for green screen algorithm, you still have a few things left alone before you can do that. You can see an example of a for loop here. Which will repeat some steps for each pixel. So how do you write repetition down in Java Script? You use a loop, in this case you would use a for loop. As you program more you'll find that most algorithms you write have some form of repetition. Repeating steps is incredibly common in algorithms. One of those pieces is repeating some steps of the algorithm. Now that you've seen some of the basics of JavaScript and have seen the Duke Learner Program environment, you still have a few pieces to learn in order to be able to implement the green screen algorithm.
0 Comments
Leave a Reply. |