| Current File : /home/jeshor13/11bsouth.com/ColorBlindClothesHelper/sketch.js |
var vid; // to hold video element
var img;
var targetColor1 = [255, 0, 0, 0];
var targetColor2 = [255, 0, 0, 0];
var targetColor3 = [255, 0, 0, 0];
var skipPixels = 2;
var threshold = 25;
var mode = 0;
var pic1
var pic2
function preload() {
pic1 = loadImage("assets/hsl_top.JPG");
pic2 = loadImage("assets/wheel_relationships.png");
}
function setup() {
createCanvas(640, 480);
vid = createCapture(VIDEO); // access webcam
devicePixelScaling(false); //retinal display thing?
vid.size(width, height);
vid.hide(); // we will paint our own video
img = createImage(width, height);
}
function draw() {
background(0);
vid.loadPixels();
var sumX = 0;
var sumY = 0;
var counter = 0;
var targetR1 = targetColor1[0];
var targetG1 = targetColor1[1];
var targetB1 = targetColor1[2];
var targetR2 = targetColor2[0];
var targetG2 = targetColor2[1];
var targetB2 = targetColor2[2];
var targetR3 = targetColor3[0];
var targetG3 = targetColor3[1];
var targetB3 = targetColor3[2];
for (var y = 0; y < vid.height; y = y + skipPixels) {
for (var x = 0; x < vid.width; x = x + skipPixels) {
//get the color of the current pixel
if (mode === 0 || mode == 1) {
var thisColor1 = vid.get(x, y);
var r1 = thisColor1[0];
var g1 = thisColor1[1];
var b1 = thisColor1[2];
//use pythagorean formula to find distance between this pixel and color you are chasing
var closeInColor1 = sqrt(pow(r1 - targetR1, 2) + pow(g1 - targetG1, 2) + pow(b1 - targetB1, 2));
if (closeInColor1 < threshold && mode == 1) {
//sum up and count all the qualifying positions for averaging at the end
sumX = sumX + x;
sumY = sumY + y;
counter++;
img.set(x, y, [targetR1, targetG1, targetB1, 255]); //debug turn qualifying pixesl red
} else {
img.set(x, y, [r1, g1, b1, 255]); //leave it the natural color
}
}
if (mode == 2) {
var thisColor2 = vid.get(x, y);
var r2 = thisColor2[0];
var g2 = thisColor2[1];
var b2 = thisColor2[2];
var closeInColor2 = sqrt(pow(r2 - targetR2, 2) + pow(g2 - targetG2, 2) + pow(b2 - targetB2, 2));
if (closeInColor2 < threshold && mode == 2) {
//sum up and count all the qualifying positions for averaging at the end
sumX = sumX + x;
sumY = sumY + y;
counter++;
img.set(x, y, [targetR2, targetG2, targetB2, 255]); //debug turn qualifying pixesl green
} else {
img.set(x, y, [r2, g2, b2, 255]); //leave it the natural color
}
}
if (mode == 3) {
var thisColor3 = vid.get(x, y);
var r3 = thisColor3[0];
var g3 = thisColor3[1];
var b3 = thisColor3[2];
var closeInColor3 = sqrt(pow(r3 - targetR3, 2) + pow(g3 - targetG3, 2) + pow(b3 - targetB3, 2));
if (closeInColor3 < threshold && mode == 3) {
// //sum up and count all the qualifying positions for averaging at the end
// sumX = sumX + x;
// sumY = sumY + y;
// counter++;
img.set(x, y, [targetR3, targetG3, targetB3, 255]); //debug turn qualifying pixesl blue
} else {
img.set(x, y, [r3, g3, b3, 255]); //leave it the natural color
}
}
}
}
img.updatePixels();
image(img, 0, 0);
if (mode === 0) {
textSize(36)
stroke("white")
strokeWeight(2)
fill("black")
text("Welcome to Colortown!", 20, 40)
text("Click an article of clothing", 20, 100)
text("to grab it's color", 20, 140)
}
if (mode == 1) {
textSize(18)
stroke("white")
strokeWeight(2)
fill("black")
text("Welcome to Colortown!", 20, 40)
text("1st Color: R: " + targetColor1[0] + " G: " + targetColor1[1] + " B: " + targetColor1[2], 20, 100)
}
if (mode == 2) {
textSize(18)
stroke("white")
strokeWeight(2)
fill("black")
text("Welcome to Colortown!", 20, 40)
text("1st Color: R: " + targetColor1[0] + " G: " + targetColor1[1] + " B: " + targetColor1[2], 20, 100)
text("2nd Color: R: " + targetColor2[0] + " G: " + targetColor2[1] + " B: " + targetColor2[2], 20, 140)
}
// if (mode == 3) {
// textSize(18)
// stroke("white")
// strokeWeight(2)
// fill("black")
// text("Welcome to Colortown!", 20, 40)
// text("1st Color: R:" + targetColor1[0] + " G:" + targetColor1[1] + " B:" + targetColor1[2], 20, 100)
// text("2nd Color: R:" + targetColor2[0] + " G:" + targetColor2[1] + " B:" + targetColor2[2], 20, 140)
// text("3rd Color: R:" + targetColor3[0] + " G:" + targetColor3[1] + " B:" + targetColor3[2], 20, 180)
// }
if (mode == 3) {
textSize(18)
stroke("white")
strokeWeight(2)
fill("black")
text("Welcome to Colortown!", 20, 40)
text("Click to Restart", 20, 60)
text("1st Color: R: " + targetColor1[0] + " G: " + targetColor1[1] + " B: " + targetColor1[2], 20, 100)
text("Hue: " + (rgb2hsv(targetColor1[0], targetColor1[1], targetColor1[2]).h), 20, 120)
fill(targetColor1[0], targetColor1[1], targetColor1[2]);
rect(20, 130, 100, 20)
fill("black")
text("2nd Color: R: " + targetColor2[0] + " G: " + targetColor2[1] + " B: " + targetColor2[2], 20, 180)
text("Hue: " + (rgb2hsv(targetColor2[0], targetColor2[1], targetColor2[2]).h), 20, 200)
fill(targetColor2[0], targetColor2[1], targetColor2[2]);
rect(20, 210, 100, 20)
fill("black")
text("3rd Color: R: " + targetColor3[0] + " G: " + targetColor3[1] + " B: " + targetColor3[2], 20, 260)
text("Hue: " + (rgb2hsv(targetColor3[0], targetColor3[1], targetColor3[2]).h), 20, 280)
fill(targetColor3[0], targetColor3[1], targetColor3[2]);
rect(20, 290, 100, 20)
image(pic1, 300, 60, pic1.width - 80, pic1.height - 60, 0, 0, 0, 0);
image(pic2, [sx = 20], [sy = 330], [sWidth = img.width - 40], [sHeight = img.height - 340], [dx = 0], [dy = 0], [dWidth = 300], [dHeight = 120])
}
}
function mousePressed() {
//pick new color to chase
mode++
if (mode == 1) {
targetColor1 = vid.get(mouseX, mouseY);
println(mode + "Target R" + targetColor1[0] + " G" + targetColor1[1] + " B" + targetColor1[2]);
}
if (mode == 2) {
targetColor2 = vid.get(mouseX, mouseY);
println(mode + "Target R" + targetColor2[0] + " G" + targetColor2[1] + " B" + targetColor2[2]);
}
if (mode == 3) {
targetColor3 = vid.get(mouseX, mouseY);
println(mode + "Target R" + targetColor3[0] + " G" + targetColor3[1] + " B" + targetColor3[2]);
}
if (mode == 4) {
mode = 0
}
}
function keyTyped() {
if (key == 't') {
threshold--;
} else if (key == 'T') {
threshold++;
}
print(threshold);
}
function rgb2hsv() {
var rr, gg, bb,
r = arguments[0] / 255,
g = arguments[1] / 255,
b = arguments[2] / 255,
h, s,
v = Math.max(r, g, b),
diff = v - Math.min(r, g, b),
diffc = function(c) {
return (v - c) / 6 / diff + 1 / 2;
};
if (diff === 0) {
h = s = 0;
} else {
s = diff / v;
rr = diffc(r);
gg = diffc(g);
bb = diffc(b);
if (r === v) {
h = bb - gg;
} else if (g === v) {
h = (1 / 3) + rr - bb;
} else if (b === v) {
h = (2 / 3) + gg - rr;
}
if (h < 0) {
h += 1;
} else if (h > 1) {
h -= 1;
}
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
v: Math.round(v * 100)
};
}