Change shape of color brightness

#1

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

https://p5js.org/examples/color-brightness.html

1 Like
#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

2 Likes
#3

Thank you so much for your reply.
Much appriciated.
How we can decrease the middle white brightness?

#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:
image

Here how the curve looks between 0 and 1:
image

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);

image
image

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

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

The result: