Project 1: Brush (Algo Answers)

You can find the handout for this project here. Please read the handout before working on this algo assignment!

Indexing Into Your Canvas

In Lab 2: Pencils, you learned that canvas data can be stored as a vector of RGBA structs in row-major order. For such a canvas with width = 512 and height = 256, please answer the following:

Row, Col -> Index

Given that the first pixel (index 0) is at row 0, column 0, what is the index of the pixel at row 43 and column 242?



Index -> Row, Col

What is the row and column of the pixel at index 12345 in the vector?



Mask Coverage

All of your brushes in Project 1: Brush should be implemented using masks (see the Brush handout) which store a brush's opacity at certain point. As always, you should use a 1D vector to represent this 2D array of values.

This means that you will need to figure out what area of the canvas overlaps with the brush mask to iterate over in your drawing loop.

Answer the following questions for a linear brush with a brush radius :

Mask Size

What is the size of your mask vector in pixels? Consider the 2D space you need to cover and how many pixels that is in total.



The bottom-left pixel is rows down and columns left. The top-right pixel is rows up and columns right. The side length of the mask is thus .

Calculating Mask Opacity

What is the opacity value of the mask at index in the mask's 1D vector? Your answer should be in terms of and . Recall that the opacity value of the brush mask at the center point, 2D coordinates , is .



The i-th element of the mask is rows down and columns to the right, relative to the top-left pixel of the mask.

It is thus rows and columns away from the center pixel of the mask. Note the absolute value.

From this, we can use Pythagoras' theorem to get the pixel's distance from the center pixel of the mask. This can then be plugged into a linear falloff formula to obtain the mask's opacity:

However, because this formula can take us into negative values at , we must also impose a lower bound of .

If you got this question correct, you got an extra point on the algo assignment!

Finding Relative Coordinates

Suppose you click on a pixel at coordinates . Near there is another pixel , which falls within the brush's mask.

What is the index of pixel in the mask vector? Your answer should be in terms of , , , , and .



The top-left pixel of the mask has index and is located at coordinate .

Thus, the pixel can be considered to be rows down and columns to the right, relative to the top-left pixel of the mask.

From this, you can just use the same "row, col -> index" conversion as before:

Color Blending

In Project 1: Brush, you will blend the color of a brush with the color of canvas using the brush's mask. In that project, the canvas will be filled using our 4-channel RGBA struct, but for this exercise, assume that your image is grayscale and has only one channel, which we'll call intensity. Each pixel's intensity will be represented by a floating point value ranging from 0 (black) to 1 (white).

What is the value of the final intensity on the canvas, given the original color intensity of the canvas , the opacity of the mask at that point , the current brush's color intensity , and the current "alpha" value ?

As a sanity check, remember to consider the case when .



The fraction the brush contributes to the resulting color is , which can be thought of as its "effective opacity" at that part of the mask.

Using this as an interpolation weight, you can obtain the solution by linearly combining the brush's color, , with the canvas color, .


Submit your answers to these questions to the "Project 1: Brush (Algo)" assignment on Gradescope.