For this assignment, I've decided to expand on what I learned in the image processing section of the Unit 2 project by bringing the Fibonacci sequence into the image. I've always been fascinated with the Fibonacci sequence, and it's appearance in nature in the structure of repeating objects (nautilus shells, spiral galaxies, etc). I thought it would be interesting to find a way to visualize the sequence as an overlay to the image we've been manipulating. This turned out to be more complicated than I anticipated, as it was necessary to nest for loops and if statements pretty heavily, but the process was very rewarding!
For completeness, I've retained the original image processing from the Unit 2 Project here, but I've now added the entry showing the Fibonacci sequence overlaid on the original image (or a black background for easier viewing) as a series of 1 pixel-wide white vertical bars spaced according to the sequence. We know that the image is 150 pixels wide, so, we could place a vertical white bar at each column that corresponds to one of the numbers in the first 12 entries of the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144.
I found that the most straight forward approach to this problem was to set up a for loop over the entire original image as I had done in the Unit 2A questions. The trick this time was to have the index of that loop jump ahead by 4 instead of 1 with each iteration. This equates to looping over the individual pixels of the image instead of every value of the image array. Inside of that loop, I then keep track of which column I'm in with a column counter, and set up another loop, called pCount (or pixelCount) to run through the r, g, b, a values of the pixel that I'm currently in.
There is then an if statement that checks to see if the current column matches a number in the fibonacci sequence. If that is true, then the r, g, b values are set to white (255). If not, then set it to the original value of the image (or black). When the pixel counter hits 3, I know this is the alpha value and simply set that to 255, and then check to see if this last pixel was in fact in a column of the fibonacci sequence using a flag variable set to 0 or 1. If it was, I then reset the flag, and advance the fibonacci index to the next value and wait for the next column value that matches it. At the end of the row (colCount = 150), everything is reset to begin processing the next row of pixels.
We typically see the Fibonacci Sequence represented as a spiral, or the so-called "golden ratio" however it also works well to visualize it in this manner as a series of vertical lines spaced out according to the values of the sequence. I found that constraining the visualization this way provided a good starting point for breaking the problem down into parts using loops and conditionals and it was a great way to pull together a lot of the concepts covered so far in the course.
| Original | Fibonacci Overlay | BLUE-only version | Reverse-color version | semi-transparent version | add two images version |