このプログラムは、各ピクセルからマウスまでの距離を計算することにより、画像の一部の明るさを調整します。
brightness pixels distance
Image Color
View Source Code
/*
* @name Brightness
* @arialabel Astronaut rendered in black and white is covered with a black screen. The user’s mouse acts as a flashlight and parts of the image are illuminated as the user’s mouse travels over
* @description This program adjusts the brightness of a part of the image by calculating the distance of each pixel to the mouse.
* <br><br><span class="small"><em>This example is ported from the <a href="https://processing.org/examples/brightness.html">Brightness example</a>
* on the Processing website</em></span>
*/
// This program adjusts the brightness
// of a part of the image by
// calculating the distance of
// each pixel to the mouse.
let img;
// preload() runs once, before setup()
// loadImage() needs to occur here instead of setup()
// preload() makes sure image is loaded before anything else occurs
function preload() {
// load the original image
// img = loadImage('assets/rover_wide.jpg');
img = loadImage('../../../../p5js-website-legacy-examples/assets/rover_wide.jpg');
}
// setup() runs after preload, once()
function setup() {
// createCanvas(710, 400);
createCanvas(windowWidth, windowHeight);
pixelDensity(1);
frameRate(30);
}
function draw() {
image(img, 0, 0);
// Only need to load the pixels[] array once, because we're only
// manipulating pixels[] inside draw(), not drawing shapes.
loadPixels();
// We must also call loadPixels() on the PImage since we are going to read its pixels.
img.loadPixels();
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];
// g = img.pixels[loc+1];
// b = img.pixels[loc+2];
// Calculate an amount to change brightness based on proximity to the mouse
// The closer the pixel is to the mouse, the lower the value of "distance"
let maxdist = 50; //dist(0,0,width,height);
let d = dist(x, y, mouseX, mouseY);
let adjustbrightness = (255 * (maxdist - d)) / maxdist;
r += adjustbrightness;
// g += adjustbrightness;
// b += adjustbrightness;
// Constrain RGB to make sure they are within 0-255 color range
r = constrain(r, 0, 255);
// g = constrain(g, 0, 255);
// b = constrain(b, 0, 255);
// Make a new color and set pixel in the window
let pixloc = (y * width + x) * 4;
pixels[pixloc] = r;
pixels[pixloc + 1] = r;
pixels[pixloc + 2] = r;
pixels[pixloc + 3] = 255; // Always have to set alpha
}
}
updatePixels();
}
License
Source code is available on GitHub p5.js website legacy.
All examples are licensed under CC BY-NC-SA 4.0.