Ammar Hassonjee – Looking Outwards 02

An Interactive Wall That Moves According to Hand Movement

An interesting example of generative art I found online is a project called “Breathing Wall II” built in 2014 by Behnaz Farahi, an architecture professor at USC.

According to Farahi’s website, the “Breathing Wall” installation is made out of wood, PVC, and fabric, and its directly controlled by an Arduino that interacts with a Leap Motion system and depth camera to capture hand movement. The hand motions and signals are processed using DC systems and algorithms and then projected on the wall as contour lines, as well as the changes in the wall surface and color.

What I like most about this project is its exploration of the relationship between movement and the material, light, and color of the physical system. This installation gives its users the power to interact and impact their environment by allowing them to use intuitive controls like swiping and tapping to directly disturb the form and color of the wall, which contributes to a sensational experience. In my opinion, this art that is adaptive and involves activity from the user is the most compelling form of art.

A user interacts with “Breathing Wall II”.
Contour lines can be seen projected on the background of the wall.

Behnaz Farahi is known for her exploration in computational design, specifically with the use of interactive and motion based installations. Her work aims to connect human experience with structure as the focus is on how intuitive human motions and movement can impact a system. In addition to wall like installations, she has also designed interactive clothing and ceilings, which can be found on her website.

Ammar Hassonjee – Project 01 – Face


// Ammar Hassonjee
// Section C
// Project-01

function setup() {
    createCanvas(600, 600);

function draw() {
  //Drawing my shirt
    if (mouseX < width / 2) {
    arc(300, 600, 500, 275, PI, 0);

    //Making the neck
    stroke('rgb(205, 161, 132)');
    fill('rgb(205, 161, 132)');
    quad(217, 470, 244, 400, 348, 400, 374, 470);
    ellipse(295, 470, 155, 60);

    //Forming the head
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    ellipse(300, 280, 250, 300);

    //Creating the Hair
    vertex(186, 215);
    vertex(198, 153);
    vertex(201, 161);
    vertex(242, 107);
    vertex(242, 127);
    vertex(313, 90);
    vertex(303, 111);
    vertex(377, 100);
    vertex(351, 117);
    vertex(427, 118);
    vertex(406, 140);
    vertex(452, 126);
    vertex(439, 157);
    vertex(461, 156);
    vertex(444, 185);
    vertex(454, 187);
    vertex(414, 215);

    //forming the ears
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    vertex(180, 258);
    vertex(161, 260);
    vertex(151, 267);
    vertex(165, 326);
    vertex(180, 326);

    vertex(419, 258);
    vertex(437, 260);
    vertex(447, 267);
    vertex(433, 326);
    vertex(326, 326);

    //creating the eyes
    ellipse(256, 266, 40, 30);
    ellipse(346, 266, 40, 30);

    fill('rgb(132, 100, 80)');
    if (mouseIsPressed) {
      fill('rgb(220, 5, 5)');
    ellipse(256, 266, 20, 20);
    ellipse(346, 266, 20, 20);

    ellipse(250, 263, 5, 5);
    ellipse(340, 263, 5, 5);

    //shaping the mouth
    stroke('rgb(229, 229, 229)');
    fill('rgb(229, 229, 229)');
    triangle(263, 377, 300, 388, 338, 377);

    // forming the nose
    stroke(132, 100, 80);
    line(300, 281, 314, 338);
    line(314, 338, 318, 345);
    line(318, 345, 304, 350);

    triangle(226, 239, 277, 241, 278, 235);
    triangle(324, 242, 324, 236, 375, 238);

My process for completing this portrait began with experimenting with the different functions of ps.j5 and learning how the variables controlled shapes like ellipses and curves. I then began to digitally sketch the kind of drawing I wanted and then used the same coordinates in other softwares to code accurate shapes.

Ammar Hassonjee – Looking Outwards – 01

A video showing the project, unofficially titled ‘Sensing Change’, examined up close and how it changes graphical data to match current weather conditions.

On 151 North Franklin street Chicago, a design firm named ESI Design recently led the development of a 95 ft long display attached to the side of a Loop Parking Garage that shows weather inspired graphics reflecting the current real time weather in Chicago, mimicking graphics such as downpours, fluffy clouds, and even falling snow. I personally love the simplicity and purpose of the graphics and how it corresponds with real time data to be something both aesthetic and useful. A missed opportunity in my opinion that the project had was perhaps finding a way to graphically represent upcoming weather in the next few hours in order to show weather predictions as to communicate even more data, but the creators made a wonderful decision to use a parking garage as the background of the canvas, a very public element, as the background so that the graphic is seen by many.

Image of facade with graphics changing, courtesy of ESI Design.

Although I couldn’t find any inspiration for this specific project or design idealogies from ESI Design, according to their website, the ESI Design studio’s main objective in all of their projects is to combine both digital and physical elements in order to create a truly transcendental experience for visitors. In this Loop Garage display, their hope is that natural ivy and foliage will grow over the canvas, leading to a beautiful harmony of both digital graphics and natural figures.