I’m really enjoying Processing. I’m enjoying thinking about the end product too, basically, it feels possible, but I don’t think i’ll be able to create the closed system I wanted to. My database is on my server, my final piece is going to be on Processing, there will be no user data or profiles but i’m starting to think… that’s okay.

Part One!
A nod to the original Ginfographic idea, an attempt to become more spatially aware within Processing, procrastination of the real issue of flavour, the beat goes on.

Fizzy Gin and Lillet Punch

Gin Punch

Lemon-Gin Martini

I like it, though. Angus reminded me to stay on the route of flavour and not get too caught up with representing the ingredients as such, and i’m glad he did, but this was a really great exercise in handling the data, as it felt so huge – recipes with flavours and ingredients, getting these into objects was tricky, and took a good day to even get printing to the console.

In this sketch, I now have three classes – Recipe, Ingredient and Flavour. These are called by eachother in such confusing ways I can’t even comprehend looking at it now, I will just have to paste the code below.

class Recipe {
String name;
String url;
String jsonUrl;
int recipeLength;
Flavour flavours;
ArrayList ingredients;

Recipe(String JSONUrl, String recipeName, int recipeCountLength, String urlAd) {
jsonUrl = JSONUrl;
name = recipeName;
recipeLength = recipeCountLength;
url = urlAd;

void display() {

void ingredients() {

void flavours() {

void displayFlavours() {

void displayIngredients() {
for (Ingredient ingredient : ingredients) {

void saveImage() {
save("images/" + name + ".jpg");

void saveTasteImage() {
save("taste/" + name + ".jpg");

void addTitle() {
myFont = createFont("Arial", 12, true);
fill(149, 165, 166);
text(recipe.name, 10, 20);


class Flavour {
float bitter;
float salty;
float sour;
float sweet;
float umami;

Flavour(float recipeBitter, float recipeSalty, float recipeSour, float recipeSweet, float recipeUmami) {
bitter = recipeBitter;
salty = recipeSalty;
sour = recipeSour;
sweet = recipeSweet;
umami = recipeUmami;

void display() {
println("----- Flavours -----");
println("Bitter: " + bitter);
println("Salty: " + salty);
println("Sour: " + sour);
println("Sweet: " + sweet);
println("Umami: " + umami);

void highest() {
StringDict flavourInventory;
flavourInventory = new StringDict();
flavourInventory.set ("Bitter", str(bitter));
flavourInventory.set ("Salty", str(salty));
flavourInventory.set ("Sour", str(sour));
flavourInventory.set ("Sweet", str(sweet));
flavourInventory.set ("Umami", str(umami));

String highest = flavourInventory.valueArray()[0];

class Ingredient {
String name;
String quantity;
String unit;

Ingredient(String ingredName, String ingredQuantity, String ingredUnit) {
name = ingredName;
quantity = ingredQuantity;
unit = ingredUnit;

void display() {
println(quantity + " | " + unit + " | " + name);

The Classes pretty much represent the initial models, so that was great.

void getRecipe(int id) {

String[] url = new String[2];
url[0] = "http://ginfographic.chez.io/api/v1.0/recipes/";
url[1] = str(id);

String jsonUrl = join(url, "");

data = loadJSONObject(jsonUrl);
singleRecipe = data.getJSONObject("recipe");

String recipeName = singleRecipe.getString("name");
String recipeCountLengthString = singleRecipe.getString("length");
int recipeCountLength = int(recipeCountLengthString);
String urlAd = singleRecipe.getString("url");

recipe = new Recipe(jsonUrl, recipeName, recipeCountLength, urlAd);
// recipe.displayFlavours();

void getIngredients(String url) {
String urls[] = new String[2];
urls[0] = url;
urls[1] = "/ingredients/";

String ingredientUrl = join(urls, "");
ingredientData = loadJSONObject(ingredientUrl);

ArrayList allIngredients = new ArrayList();
JSONArray ingreds = ingredientData.getJSONArray("ingredients");

Ingredient[] myIngredients = new Ingredient[ingreds.size()];

for (int i = 0; i < ingreds.size(); i++) { JSONObject ingred = ingreds.getJSONObject(i); String ingredName = ingred.getString("name"); String ingredQuantity = ingred.getString("quantity"); String ingredUnit = ingred.getString("unit"); allIngredients.add(new Ingredient(ingredName, ingredQuantity, ingredUnit)); } recipe.ingredients = allIngredients; } void getFlavours(String url) { String urls[] = new String[2]; urls[0] = url; urls[1] = "/flavours/"; String flavourUrl = join(urls, ""); flavourData = loadJSONObject(flavourUrl); JSONArray flavs = flavourData.getJSONArray("flavours"); // println(flavs.size()); for (int x = 0; x < flavs.size(); x++) { JSONObject flav = flavs.getJSONObject(x); float recipeBitter = flav.getFloat("bitter"); float recipeSalty = flav.getFloat("salty"); float recipeSour = flav.getFloat("sour"); float recipeSweet = flav.getFloat("sweet"); float recipeUmami = flav.getFloat("umami"); flavours = new Flavour(recipeBitter, recipeSalty, recipeSour, recipeSweet, recipeUmami); } recipe.flavours = flavours; }

These functions retrieve the data. After this, I now have a Recipe object, and can call the ingredients and flavours within it - yay! It feels like such a relief to have this, as this is the main basis for my final application, now I have this working perfectly I can build on it. It feels like a little victory to have a working system, I was dreading the thought that I might have to hard code the data in, after all the time I spent hacking away at Yummly. It also gives me confidence that I can use a language other than Python, I feel transdisciplinary, maybe it's not a huge fluke that I am working in this field.

Still, I didn't have the spatial awareness thing down, but I could feed live ingredient quantity data into my application. I just needed to create a couple more classes in order to draw it,

class IngredientChart {
String name;
ArrayList ingredients;
int ingredientsCount;
float maxQuantity;
float minQuantity;
ArrayList withQuantityUnit;
ArrayList withQuantity;
ArrayList noQuantityUnit;

IngredientChart(Recipe recipe, ArrayList recipeIngredients) {
name = recipe.name;
ingredients = recipeIngredients;
ingredientsCount = ingredients.size();

void populate() {

ArrayList quants = new ArrayList();
withQuantityUnit = new ArrayList();
withQuantity = new ArrayList();
noQuantityUnit = new ArrayList();

for (Ingredient ingredient : ingredients) {

minQuantity = Collections.min(quants);
maxQuantity = Collections.max(quants);

Float quantity = float(ingredient.quantity);
String unit = ingredient.unit;

if ((quantity == 0) && (unit.equals("None"))) {
// println("No Quantity or Unit");
} else if ((quantity > 0) && (unit.equals("None"))) {
// println("Only Quantity Exists");
} else if (((quantity > 0) && (unit.equals("None") == false ))) {
// println("Quantity and Unit both exist");
} else {
println("who knows");


void print() {
println("Name: " + name);
println("Ingredients Count: " + ingredientsCount);
println("Minimum Quantity: " + minQuantity);
println("Maximum Quantity: " + maxQuantity);

class ChartItem {
int x;
int y;
float size;
String name;
Boolean itemUnit;
color colour;

ChartItem(float xPos, float yPos, float itemSize, String itemName, color itemColour, Boolean newItemUnit) {
x = int(xPos);
y = int(yPos);
size = itemSize;
name = itemName;
colour = itemColour;
itemUnit = newItemUnit;

void draw() {

if (itemUnit == true) {
rect(x, y, size, size);
} else {
ellipse(x, y, size, size);

myFont = createFont("Arial", 12, true);
text(name, x, y);


I needed to sort which data had a unit or a quantity, or both, or neither. Those with both were implemented with sizes to depict the proportion of that ingredient to others. Those with just the quantity represented multiple objects, such as 2 lemons or 3 blackberries, and those with neither represented a single entity, such as ice. It was important to segregate these for the benefit of the final representation. I looked at more conventional displays of ingredients within data visualisations as well as those more unconventional, such as Dave Griffith's petri dish recipes for Open Sauces.

This was very inspiring to me, as although the recipe is quite precise, it depicts the proportion of ingredients in a very visual and comprehendible way. Also, the recipe image depicts the process as opposed to the final outcome and as a recipe as a sum of its parts as opposed to the polished, end product we are so used to seeing. With cocktails and cooking in general I guess, unless you are doing molecular gastronomy, recipes can be sized up or down, it's a rather intuitive and 'common sense' process.

The problem with my code is that one bottle of wine takes up the same amount of space on the screen as one teaspoon of sugar, in order to go through all of the properties of each unit... that's going to be a lot of work. Angus was right, I need to focus on flavours, though this will definitely be making an appearance somewhere.