bio photo

Email

Concept

colorFood is a face scanning app that finds ethnic food near you.

Team

Jamal Combs and Osama Sehgol

Background

We talked about building this app to shed light on stereotypes built around race, food and culture. Food defines who we are, from a cultural standpoint the taste and smell of food can take us places. Healthwise, it is said we are what we eat (or what our food eats). There’s rich people food and food that is stereotypically eaten by less well off people. There are of course jokes about food, most notably Dave Chappelle’s “Black People & Chicken”

Build

When we talked about the interaction of the app we talked about different ways skin color and food are related. An example - would you feel fine if somebody asked you about a nice chinese restaurant just because you’re chinese (not even from China). Or what’s in a Burrito if you’re Hispanic? We felt building an app that takes a shot at that question is worthwhile.

Code

We picked out our facial skin color’s RGB value, put it in a vector and put a threshold around it. The app

var capture;
var targetColor = [255,255,255];
var osama, jamal, url;

function setup() {
  jamal = createVector(141, 118, 127);
  osama = createVector(137, 113, 200);
  capture = createCapture(VIDEO);
  cnv = createCanvas(640, 480);
  capture.size(640, 480);
  capture.hide();

  //if statement to run getYelpData();
}
In draw()

capture.loadPixels();
  var sampling = false;
  var sumPosition = createVector(0, 0);
  if(capture.pixels.length > 0) { // don't forget this!
  
    if(mousePressed &&
        mouseX > 0 && mouseX < width &&
        mouseY > 0 && mouseY < height) {
      targetColor = capture.get(mouseX, mouseY);
      sampling = true;
    }
  
    var w = capture.width, h = capture.height;
    var i = 0;
    var pixels = capture.pixels;

    var total = 0;
    for(var y = 0; y < h; y++) {
      for(var x = 0; x < w; x++) {
        var diff =
          Math.abs(pixels[i+0] - targetColor[0]) +
          Math.abs(pixels[i+1] - targetColor[1]) + 
          Math.abs(pixels[i+2] - targetColor[2]);
        var outputValue = 0;

         pixels[i++] = outputValue; // set red
        pixels[i++] = outputValue; // set green
        pixels[i++] = outputValue; // set blue
        i++;

          image(capture, 0, 0, 640, 480);
  
		  noStroke();
		  fill(targetColor);
		  rect(20, 20, 40, 40);

Then check the threshold and make a call to action:

function mousePressed() {
  
  var colorVector = createVector(targetColor[0], targetColor[1], targetColor[2]);
  
   if (abs(osama.x - colorVector.x) < 70 && abs(osama.y - colorVector.y) < 70 && abs(osama.z -  colorVector.z) < 70) {
    window.location = 'https://www.yelp.com/search?find_desc=indian+food&find_loc=Manhattan%2C+NY&ns=1'
    console.log(targetColor);
   }
  
   if(abs(jamal.x - colorVector.x) < 70 && abs(jamal.y - colorVector.y) < 70 && abs(jamal.z - colorVector.z) < 70) {
      window.location = 'https://www.yelp.com/search?find_desc=soul+food&find_loc=Manhattan%2C+NY&ns=1'
    console.log(targetColor);
   } 

}