Author: agusman@andrew.cmu.edu

agusman-Looking Outwards 01-A Thousand Faces

Studio: HERRUZO PIERCE STUDIO

Artist: Ana Herruzo, http://herruzo-pierce.com/
Date Completed: October 2013
Topic: Stage Production, Live Music, Projection Mapping, Audio-visualization

The Beats Antique “A Thousand Faces” Tour is a feat of stage production and complex projection mapping. Personally, I find the group Beats Antique quite gimmicky and hokey, with their borderline appropriation of South-Asian musical and visual culture and their quasi-hip “oriental” coffee shop aesthetic. Despite this, the group has managed to pull off some of the most fantastic live performances of the decade, along with the help of the renowned creative studio OBSCURA DIGITAL. Using CAD modeling, 3D software like Touch Designer, and projection mapping tools, Ana and Obscura map video footage and generative art from more than 100 artists onto an elaborate set.

I am blown away by the breadth and diversity in the applications of projection mapping she has explored, particularly within this project for Beats Antique. This project displayed a great degree of balance between showcasing the studio’s innovative production methods and tech while also showcasing unique artistic work. It’s quite “Creative Content/Ideas First” and less “Look At These Cool Flashing Lights”. I’m particularly excited about how this singular experience was such a seamless conglomerate of so many great minds and ideas.

Ana Herruzo is an architect, designer and programmer running her own practice HERRUZO-PIERCE Creative Studio in Los Angeles. Formerly, she was a partner of the ZULARK Design Collective working on publicly engaging architectural interventions. In 2011 following her partnership, she served as an Interactive Engineer at OBSCURA DIGITAL, where she directed the development of large-scale productions and shows all across the world for a number of reputable clients.

agusman-Project-01-Self-Portrait

sketch.js

/*
* Anna Gusman
* agusman@andrew.cmu.edu
* Section A
*
* This program draws a self portrait out of intersecting circles and lines.
*/
  // Constants
var color1;
var color2;

function setup() {
  createCanvas(770, 830); //sets the canvas size//
  color1 = color(230, 38, 42);
  color2 = color(251, 95, 41);
  background(239, 94, 8);
  angleMode(DEGREES);
}

function draw() {
  //var backgroundcolor = color(239, 94, 8);
  //uses a orange rectangle as the background//
  //fill(backgroundcolor);
  noStroke();
  setGradient(0, 0, 770, 830, color1, color2);
  //rect(0, 0, 770, 800);

  //largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(136 + 156,189 + 156,315,314);

  var a = color(255);
  stroke(a);
  noFill();
  arc(136 + 156,189 + 156,315,314, 44, 87);

  //hair tucked behind ear, second largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(315 + 142,124 + 142,282,282);

  var a = color(255);
	stroke(a);
  noFill();
  arc(315 + 142,124 + 142,282,282, 97, 168);

  //thirds largest circle//
  stroke(255, 255, 255, 30);
  noFill();
  ellipse(331 + 125,140 + 125,248,248);

  //fourth largest circle//
  stroke(255, 255, 255, 10);
  noFill();
  ellipse(351 + 107,158 + 107,212,212);

  //top of head, fifth largest circle//
  stroke(255, 255, 255, 20);
  noFill();
  ellipse(243 + 116,289 + 116,234,234);

  var a = color(255);
	stroke(a);
  noFill();
  arc(243 + 116,289 + 116,234,234, 250, 333);

  //sixth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(415 + 67,544 + 67,133,133);

  //eyebrow curve, seventh largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(277 + 51,350 + 54,91,96);

  //mouth curve, eigth largest circle//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(251 + 29,413 + 29,56,57);

  var a = color(255);
	stroke(a);
  noFill();
  arc(251 + 29,413 + 29, 56,57, 0, 70);

  //face curve, largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(281 + 192,180 + 225,384,453);

  //neck//
  var neck = color(255, 40);
  stroke(neck);
  line(439, 415.26, 439, 544.5);

  //right shoulder//
  var rightcollar = color(255, 40);
  stroke(rightcollar);
  line(439, 544, 481, 544);

  var rightshoulder = color(255, 200);
  stroke(rightshoulder);
  arc(415 + 67,544 + 67,133,133, 270, 0);

  //neck curve, second largest ellipse//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(120 + 133,355 + 133,209,267);

  var a = color(255);
	stroke(a);
  noFill();
  arc(120 + 133,355 + 133,209,267, 0, 90);

  //nose, curve is third largest ellipse//
  stroke(255, 255, 255, 40);
  ellipse(144 + 70,235 + 117,141,234);

  //nosecurve//
  var a = color(255);
	stroke(a);
  noFill();
  arc(144 + 70,235 + 117,141,234, 31, 60);

  //nosebase//
  stroke(255, 255, 255, 200);
  line(262, 437, 282, 437);

  //hair//
  var hairbase = color(255, 40)
  stroke(hairbase)
  line(647.78, 503, 286.35, 503);

  var sidehair = color(255, 200);
  stroke(sidehair);
  line(439, 406.71, 438.89, 504.29);

  var slanthair = color(255, 200);
  stroke(slanthair);
  line(463, 352, 547, 504);
  line(546.83, 504, 439.71, 504); //bottom of hair//

  //eye//
  stroke(255, 255, 255, 40);
  noFill();
  ellipse(292 + 24,366 + 24,47,47);
  var a = color(255);
	stroke(a);
  fill(255);
  //arc(292 + 24,366 + 24,47,47, 0, PI - QUARTER_PI, OPEN);

  //eyeliner//
  var diagonalline = color(255);
	stroke(diagonalline);
  line(301.36, 406.64, 344, 377);

  //ear//
  var c = color(255, 40);
  stroke(c)
  line(406, 410.26, 406, 451);

  stroke(255, 255, 255, 40);
  noFill();
  ellipse(406 + 14.5,395 + 15,28,28);

}

function setGradient(x, y, w, h, color1, color2) {

  noFill();

   //Left to right gradient
   for (var i = y; i <= y+h; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(color1, color2, inter);
      stroke(c);
      line(i, y, i, y+h);
  }
}

Using and familiarizing myself with the p5 library for this assignment was an absolute blast. Having very little experience with it, I expected to feel the complete opposite as I’d cowered in fear of programming for years. Instead, setting up this composition felt oddly and incredibly satisfying, from design to debugging.

I composed my portrait from a series of intersecting ellipses and lines. Where these objects overlap is where the features of my profile are formed. I drew arcs atop the objects to highlight the important and recognizable features. I also added a slight horizontal gradient to add a smidgeon of depth.

In hindsight, it would’ve been nice to figure out how to increase the opaqueness of the parts of the objects that form the features rather than redrawing separate arcs on top. I also wish that I iterated further to explore other color relationships. Looking forward, I’d like to make this sketch respond to mouse position, specifically to have the highlighted arc areas glide around the ellipses they are based on, deconstructing and reforming my profile.