When I switched each HSB values
What happens when I switch hue, saturation and brightness?
It's a creative coding work made with the 'Processing'.
This is an image manipulation example. I wondered 'What happens when I switch hue, saturation and brightness value each other?'.
This code does not display any images on the screen but generates image file.
The 'Processing' code example.
Please feel free to use this example code under the terms of the GPL. To see other works based on my code is my pleasure. And my honor.
/**
* Tabbly.
* swich hue, saturation and brightness of image
* @author @deconbatch
* @version 0.1
* Processing 3.2.1
* 2019.02.21
*/
/**
* main
*/
void setup() {
size(1080, 1080);
colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
smooth();
noLoop();
noStroke();
}
void draw() {
background(0.0, 0.0, 90.0, 100.0);
int caseWidth = 50;
int gapWidth = 20;
int baseCanvas = (width - caseWidth * 2 - gapWidth) / 2;
float baseHue = random(360.0);
ImageLoader imgLoader = new ImageLoader(baseCanvas);
// detect image mode and set parameters
ReturnBase rb = imgLoader.detectMode();
float baseBri = rb.baseBri;
float baseSat = rb.baseSat;
// draw 4 images with different color
for (int imgCnt = 0; imgCnt < 4; ++imgCnt) {
baseHue += 90.0;
PImage img = imgLoader.load();
// set image position and put the undercoat
pushMatrix();
blendMode(BLEND);
translate(
caseWidth + (img.width + gapWidth) * (imgCnt % 2) - 5,
caseWidth + (img.height + gapWidth) * round(imgCnt / 4.0) - 5
);
fill(baseHue % 360.0, 100.0, 20.0, 100.0);
rect(0.0, 0.0, img.width + 10.0, img.height + 10.0);
popMatrix();
// draw 5 times
for (int printCnt = 0; printCnt < 5; ++printCnt) {
img.loadPixels();
for (int pixIndex = 0; pixIndex < img.pixels.length; ++pixIndex) {
color c = img.pixels[pixIndex];
img.pixels[pixIndex] = color(
(brightness(c) * 3.6 + baseHue) % 360.0,
((hue(c) / 3.6 + baseSat) % 100.0),
((saturation(c) + baseBri) % 100.0),
25.0
);
}
pushMatrix();
blendMode(SCREEN);
translate(
caseWidth + (img.width + gapWidth) * (imgCnt % 2),
caseWidth + (img.height + gapWidth) * round(imgCnt / 4.0)
);
img.updatePixels();
image(img, 0.0, 0.0);
popMatrix();
}
}
saveFrame("frames/####.png");
exit();
}
/**
* ImageLoader : load and resize image
*/
public class ImageLoader {
PImage imgInit;
String imgPass;
ImageLoader(int baseCanvas) {
if (args == null) {
// you can use your photo in ./data/your_image.jpg
imgPass = "your_image.jpg";
} else {
// args[0] must be image path
imgPass = args[0];
}
imgInit = loadImage(imgPass);
float rateSize = baseCanvas * 1.0 / max(imgInit.width, imgInit.height);
imgInit.resize(floor(imgInit.width * rateSize), floor(imgInit.height * rateSize));
println(int(imgInit.width)); // Image width
println(int(imgInit.height)); // Image height
}
/**
* load : return loaded image
*/
public PImage load() {
return imgInit;
}
/**
* detectMode : detect image mode and return base value of brightness and saturation.
* does it work? maybe.
*/
public ReturnBase detectMode() {
/* bunpu */
int[] briAry = new int[101];
int[] satAry = new int[101];
for (int i = 0; i < 101; ++i) {
briAry[i] = 0;
satAry[i] = 0;
}
imgInit.loadPixels();
for (int pixIndex = 0; pixIndex < imgInit.pixels.length; ++pixIndex) {
color c = imgInit.pixels[pixIndex];
++briAry[floor(brightness(c))];
if (floor(brightness(c)) < 1.0) {
++satAry[0]; // no color
} else {
++satAry[floor(saturation(c))];
}
}
int cntMin = floor(imgInit.pixels.length * 0.02);
int[] briCnt = new int[3];
int[] satCnt = new int[3];
for (int i = 0; i < 3; ++i) {
briCnt[i] = 0;
satCnt[i] = 0;
}
for (int i = 0; i < 101; ++i) {
int cntIdx = 0;
if (i > 75) {
cntIdx = 2;
} else if (i > 60) {
cntIdx = 1;
}
briCnt[cntIdx] += briAry[i];
}
for (int i = 0; i < 101; ++i) {
int cntIdx = 0;
if (i > 40) {
cntIdx = 2;
} else if (i > 20) {
cntIdx = 1;
}
satCnt[cntIdx] += satAry[i];
}
float briSum = 0;
float satSum = 0;
float briWgt = 0;
float satWgt = 0;
for (int i = 0; i < 3; ++i) {
briSum += briCnt[i];
briWgt += i * briCnt[i];
satSum += satCnt[i];
satWgt += i * i * satCnt[i];
}
int briIndex = round(constrain(briWgt / briSum, 0.0, 2.4));
int satIndex = round(constrain(satWgt / satSum, 0.0, 2.4));
String mode[][] = new String[3][3];
mode[0][0] = "Dark";
mode[1][0] = "Grayish";
mode[2][0] = "Pale";
mode[0][1] = "Deep";
mode[1][1] = "Dull";
mode[2][1] = "Soft";
mode[0][2] = "Strong";
mode[1][2] = "Vivid";
mode[2][2] = "Light";
println(imgPass, mode[briIndex][satIndex]);
float baseBri[] = new float[3];
float baseSat[] = new float[3];
baseBri[0] = 30.0;
baseBri[1] = 67.0;
baseBri[2] = 82.0;
baseSat[0] = 10.0;
baseSat[1] = 30.0;
baseSat[2] = 70.0;
ReturnBase rb = new ReturnBase(baseBri[briIndex], baseSat[satIndex]);
return rb;
}
}
/**
* ReturnBase : class for return 2 value
*/
public class ReturnBase {
public float baseBri, baseSat;
ReturnBase(float bri, float sat) {
baseBri = bri;
baseSat = sat;
}
}
/*
Copyright (C) 2019- deconbatch
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>
*/
deconbatch
To make something is my pleasure. Having fun in endless trial-and-error. Now, I'm loving creative coding and showing some example code in my blog. Mainly creating Processing code examples.
