How we can change shape of color brightness of below tutorial ?

# Change shape of color brightness

**jb4x**#2

Hi,

It is just a matter of changing the formulas you are using in the adjustBrightness function.

For example with the following code, you will get a square shape:

```
let img;
function preload() {
img = loadImage('assets/moonwalk.jpg');
}
function setup() {
createCanvas(720, 200);
pixelDensity(1);
img.loadPixels();
loadPixels();
}
function draw() {
for (let x = 0; x < img.width; x++) {
for (let y = 0; y < img.height; y++) {
// Calculate the 1D location from a 2D grid
let loc = (x + y * img.width) * 4;
// Get the R,G,B values from image
let r, g, b;
r = img.pixels[loc];
// Calculate an amount to change brightness based on proximity to the mouse
let maxdist = 50;
let dx = abs(mouseX - x);
let dy = abs(mouseY - y);
let adjustbrightness = (255 * min((maxdist - dx), maxdist - dy)) / maxdist;
r += adjustbrightness;
// Constrain RGB to make sure they are within 0-255 color range
r = constrain(r, 0, 255);
// Make a new color and set pixel in the window
//color c = color(r, g, b);
let pixloc = (y * width + x) * 4;
pixels[pixloc] = r;
pixels[pixloc + 1] = r;
pixels[pixloc + 2] = r;
pixels[pixloc + 3] = 255;
}
}
updatePixels();
}
```

It can not be always obvious to create shapes with math formulas though… If you really want to use custom shapes then I advise you to go have a look at the mask method: https://p5js.org/examples/image-alpha-mask.html

**hamzakhan**#3

Thank you so much for your reply.

Much appriciated.

How we can decrease the middle white brightness?

**jb4x**#4

Hi,

Before moving onto your question, I just want to point out that my answer was not completely correct for a square shape. The code should actually be like this:

```
let adjustbrightness = 255 * max(min(maxdist - dx, maxdist - dy), 0) / maxdist;
```

Now, if you want to decrease the overall brightness of the square, you simply need to decrease the amount of brightness you want to add.

This part: `max(min(maxdist - dx, maxdist - dy), 0) / maxdist`

is within the range [0;1]. By multiplying it by 255 we are scaling the values between 0 and 255. So in order to decrease the effect, you can multiply by a lower value:

```
let adjustbrightness = 50 * max(min(maxdist - dx, maxdist - dy), 0) / maxdist;
```

Or you can also increase the value to re-enforce the effect:

```
let adjustbrightness = 400 * max(min(maxdist - dx, maxdist - dy), 0) / maxdist;
```

Those transformations are called linear transformations as the mapping between the range [0;1] and the final range ([0;400] in the previous example) can be done with a straight line.

Now you can play with the shape of that mapping curve to get more control over the result that you want.

Let’s say that you want the center really bright, then get slowly darker as you go away and sundenly go completely dark. In this case you can use a power function with power between 0 and 1 like so:

```
let adjustbrightness = 150 * pow(max(min(maxdist - dx, maxdist - dy), 0) / maxdist, 0.1);
```

You can see how it looks like a full square now:

Here how the curve looks between 0 and 1:

You can also create the opposite effect with power over 1 (5 for example):

```
let adjustbrightness = 255 * pow(max(min(maxdist - dx, maxdist - dy), 0) / maxdist, 5);
```

Now it is up to you to be crazy. Here a last example with this curve:

```
let adjustbrightness = 255 * 0.5 * sin(5 * max(min(maxdist - dx, maxdist - dy), 0) / maxdist * PI / 2) + 0.5;
```

The result: