How we can change shape of color brightness of below tutorial ?
1 Like
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
3 Likes
Thank you so much for your reply.
Much appriciated.
How we can decrease the middle white brightness?
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:
2 Likes
Thank you so much for your updated feedback!
Last issue is that my image get resized and set in canvas and due to that I guess cursor move slow.
here is my code
let img;
let logo;
let font, fontsize = 15;
let inst = 20;
function preload() {
img = loadImage("{{$albumFile[0]->image}}");
logo = loadImage("{!! asset('p5js/logo-1.png') !!}");
font = loadFont("{!! asset('myFont/Quicksand-LightItalic.otf') !!}");
}
function setup() {
createCanvas(850, 850);
pixelDensity(1);
img.loadPixels();
loadPixels();
textFont(font);
textSize(fontsize);
textAlign(CENTER, CENTER);
}
function draw() {
image(img, 850, 850);
img.resize(850, 850);
// white color cursor and blue color canvas.
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];
//console.log(img.pixels[loc]);
// Calculate an amount to change brightness based on proximity to the mouse
let maxdist = 150; //Hmz
let d = dist(x, y, mouseX, mouseY);
let adjustbrightness = (255 * (maxdist - d)) / maxdist;
r += adjustbrightness - 200;
// Constrain RGB to make sure they are within 0-255 color range
r = constrain(r, 80, 255); //
let pixloc = (y * width + x) * 4;
pixels[pixloc] = r;
pixels[pixloc + 1] = r;
pixels[pixloc + 2] = 280; // 185 150 140
pixels[pixloc + 3] = 255;
}
}
updatePixels();
tint(255, 127); // Display at half opacity
image(logo, 300, 300);
textAlign(RIGHT);
drawWords(width * 0.25);
// Align the text in the center
// and run drawWords() in the middle of the canvas
textAlign(CENTER);
drawWords(width * 0.5);
// Align the text to the left
// and run drawWords() in the right third of the canvas
textAlign(LEFT);
drawWords(width * 0.75);
}
function drawWords(x) {
fill(inst);
text('{{ $logged_in_user->name }}', x, 100);
fill(inst);
text('{{ $logged_in_user->name }}', x, 200);
fill(inst);
text('{{ $logged_in_user->name }}', x, 300);
fill(inst);
text('{{ $logged_in_user->name }}', x, 400);
fill(inst);
text('{{ $logged_in_user->name }}', x, 500);
fill(inst);
text('{{ $logged_in_user->name }}', x, 600);
fill(inst);
text('{{ $logged_in_user->name }}', x, 700);
}