Ammar Hassonjee – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Ammar Hassonjee – Looking Outwards – 07

Video showing Aaron Koblin’s Flight Pattern visualization as a graphic animation.

The project above is called “Flight Patterns” by Aaron Koblin. It is a graphical visualization which uses a software to represent flight patterns and routes running across America through representational means of form variation and color. Koblin developed the project as part of a larger study called “Celestial Mechanics” in partnership with two other scientists at UCLA. According to Koblin’s website, the project leaders took FAA data of flight patterns and parsed it using an algorithm. The parsed data was then processed using another program and visually edited with software such as Maya and Adobe AfterEffects.

I like this projects interest in utilizing a data set like flight patterns and turning it into a very interesting and compelling visual graphic. I think the author’s original intent in creating the graphic was recognized as they wanted to study celestial data and represent it.

Ammar Hassonjee – Project 06 – Abstract Clock

sketch

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 06 - Abstract Clock
   */

function setup() {
    createCanvas(480, 480);
}

function draw() {
    background(0, 0, 30);
    // Time generation
    var h = hour();
    var m = minute();
    var s = second();
    var mappeds = map(s, 0, 59, 33, width - 33);
    var angle = 0;

    //Drawing the hour mountain that grows taller to represent the hour from 1 to 24
    stroke(0, 0, 60);
    strokeWeight(2);
    for (i = 1; i < 25; i++) {
        line(0, height - 15 * i, 480, height - 15 * i);
    }
    noStroke();
    fill(120);
    triangle(0, height, width / 4, (height - 15) - 15 * h, width / 2, height);

    // Drawing the minute stars
    var starx = 0;
    var stary = 0;
    var count = [];
    var arrayCount = 0;
    for (var i = 0; i < 60; i++) {
        count.push(i);
    }

    // For loop that generates 60 stars with minute star being highlighted
    for (let a = 0; a < 20; a += 2) {
        for (let i = 1; i < 7; i++) {
            if (arrayCount == m) {
                fill(255);
                ellipse(width / 2.3 + i * 40, a * 20 + 100, 20, 20);
            }
            else {
                fill(230, 233, 178);

            }
            if (i % 2 == 0 & arrayCount !== m) {
                ellipse(width / 2.3 + i * 40, a * 20 + 105, 10, 10);

              }
            else if (arrayCount !== m){
                ellipse(width / 2.3 + i * 40, a * 20 + 95, 10, 10);

              }
              arrayCount += 1;
                }
            }


    // Drawing the second shooting star at the top
    fill(240, 235, 190);
    var x = [mappeds, mappeds + 11, mappeds + 33, mappeds + 19, mappeds + 21, mappeds, mappeds - 21, mappeds - 19, mappeds - 33, mappeds - 11];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    beginShape();
    for (var i = 0; i < x.length; i++) {
        vertex(x[i], y[i]);
    }
    endShape();
    fill(190);
    // Drawing streaks that follow the star
    triangle(mappeds - 35, 45, mappeds - 30, 50, mappeds - 180, 53);
    triangle(mappeds - 35, 60, mappeds - 30, 65, mappeds - 180, 57);
}

My inspiration for this project came from my fondness for the stars and astronomy. I sought to represent my clock using elements of nature and the sky by using the mountain as an indicator for the hour. Then I used a series of small stars to indicate the minutes due to their repetitive nature, and then finally a shooting star to indicate seconds since its movement corresponds with time passing by.

Ammar Hassonjee – Looking Outwards 06

Picture of Gerhard Richter’s “4900 Colors: Version II” displayed in the Serpentine Gallery

The artwork above is a project by Gerhard Richter called “4900 Colors, Version II” that is comprised of 196 panels that are a 5 x 5 square. Richter used a computer program to designate a random color to each square from a list of 25 colors. The algorithm used was a simple random function that assigned a color at random from the list, but the artwork itself is a beautiful composition as it does not look as random. Richter’s purpose in this artwork was to illustrate how even when randomness is the primary generation factor, patterns can still emerge as the probability of having a pattern of colors is not as low. I admire this projects use of a simple code structure to generate a seemingly complex image through multiple iterations and then the way in which these iterations are represented together.

Ammar Hassonjee – Project 05 – Wallpaper

Wallpaper Sketch

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 05 - Wallpaper
   */

function setup() {
    createCanvas(600, 600);
    background(0, 0 , 100);
}

function draw() {
    // First for loop that sets the y grid of elements
    for (var y = 0; y < 7; y++) {
        for (var x = 0; x < 7; x++) {
            //variables declared to alter shapes generated for wallpaper
            var ax = x * 100;
            var ay = y * 100;

            noStroke();
            // making sure the wallpaper is mirrored every other to create
            // continuous art effect
            if (x % 2 == 0) {
                // Making the quarter circle shapes
                fill(200);
                arc(ax, ay, 80, 80, radians(0), radians(90));
                arc(ax + 100, ay + 100, 80, 80, radians(180), radians(270));
                // Making triangle shape
                fill(255);
                triangle(ax + 90, ay + 10, ax + 25, ay + 60, ax + 35, ay + 70);
                // Making the circle shape
                fill(0);
                ellipse(ax + 30, ay + 65, 20, 20);
              }
            else {
                // Making the quarter circle shapes again but a different color
                fill(255, 245, 76);
                arc(ax + 100, ay, 80, 80, radians(90), radians(180));
                arc(ax, ay + 100, 80, 80, radians(270), radians(360));
                fill(0);
                triangle(ax + 10, ay + 10, ax + 75, ay + 60, ax + 65, ay + 70);
                // Making the circle shape but a different color
                fill(255);
                ellipse(ax + 70, ay + 65, 20, 20);
              }
            }
          }
}

My inspiration for this sketch came from trying to replicate a starry night. In my initial coding where I started to draw shapes and mirror them, I found that through alternating panel directions and by changing the colors of the same elements in each iteration of the loops, I could create an interesting drawing.

Ammar Hassonjee – Looking Outwards – 05

“Dear Fabricio” Computer Art

Image of the 3D generated graphic image “Dear Fabricio”

The graphic image above is a rendered image of a toddler and toy in an artificial landscape developed by CG and 3D artist Pedro Conti. The artist was inspired to make this image for his wife after she announced that she was pregnant, and its inspired by forms of the ultrasound of their child as well as a toy that they bought for their newborn child. The artist used software such as 3D Max, ZBrush, Maya, and Cinema3D in order to physically sculpt the figures from existing images.

I admire this works intricate level of detail and rendering that make it look both realistic and yet cartoon-like at the same time. I also love the sentimental intent behind this image. I think that the artist’s original artistic intent was manifested in this piece as he produced a realistic image that worked well with the message he wanted to convey to his audience.

Ammar Hassonjee – Project 02 – Variable Face

Variable Face – Baby

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 02 - Generative Face
   */


//Declaring different variables of the face that will change when mouse is pressed

var earSize = 70;
var headWidth = 300;
var headHeight = 300;
var mouth1 = headHeight;
var mouth2 = 0
var mouth3 = 3.14;
var hairLength = 40;
var hairColor = 0;
var shirtColor = 250;
var eyeS = 50;
var tear = 'tan';

function setup() {
    createCanvas(480, 640);
}

function draw() {
    background(200);
  // Creating the body
    noStroke();
    fill(shirtColor);
    arc(width / 2, height, 500, 450, PI, 0);

  // Strand of hair
    noStroke();
    fill(hairColor);
    triangle(width / 2 + 20, headHeight * .35, width / 2, hairLength, width / 2 - 20, headHeight * .35);

  // Drawing the head
    fill('tan');
    ellipse(width / 2, 255, headWidth, headHeight);

  // Drawing the ears
    ellipse(width - (headWidth + 1.1 * earSize), headHeight * .85, earSize, earSize * 1.4); // left

    ellipse(headWidth + 1.1 * earSize, headHeight * .85, earSize, earSize * 1.4); // right

    // Drawing a tear
    fill(tear);
    arc(width / 2 - headWidth / 6 - 10, headHeight * 2 / 3 + eyeS / 2, eyeS * .4, eyeS * .6, 1.04, 2.09);

  // Drawing the eyes
    fill('black');
    ellipse(width / 2 + headWidth / 6, headHeight * 2 / 3, eyeS, eyeS);
    fill(230);
    ellipse(width / 2 + headWidth / 6 - 10, headHeight * .63, eyeS * .2, eyeS * .2); // eye bubble

    fill('black');
    ellipse(width / 2 - headWidth / 6, headHeight * 2 / 3, eyeS, eyeS);
    fill(230);
    ellipse(width / 2 - headWidth / 6 - 10, headHeight * .63, eyeS * .2, eyeS * .2); // eye bubble

  // Drawing the nose
    fill(180, 160, 130);
    triangle(width / 2, 255, width / 2 + headWidth / 10, 275, width / 2 - headWidth / 10, 275);

  // Creating the mouth
    fill('grey');
    arc(width / 2, mouth1, 100, 50, mouth2, mouth3);


}

function mousePressed() {
    // when mouse is clicked, random values will generate, changing the facial features
    earSize = random(50, 100);
    hairLength = random(30, 200);
    hairColor = random(0, 100);
    headWidth = random(300, 350);
    headHeight = random(300, 350);
    shirtColor = random(210, 255);
    eyeS = random(30, 70);

    var x = round(random(0.5, 2.5));
    if (dist(mouseX, mouseY, width / 2, 275) < (headWidth / 10)) {
          mouth1 = headHeight * 1.1;
          mouth2 = 3.14;
          mouth3 = 0;
          tear = 'blue';
          
      }
    else {
          mouth1 = headHeight;
          mouth2 = 0;
          mouth3 = 3.14;
          tear = 'tan';
    }
}

My project was inspired by seeing how I apply the variables of face generation to the image of a baby. I also explored how making sure when the mouse was clicked in certain areas, it changed the variables of even more facial features.

Ammar Hassonjee – Project 04 – String Art

Project 04 – String Art

/* Ammar Hassonjee
   Section C
   ahassonj@andrew.cmu.edu
   Project 04 - String Art
   */

function setup() {
  createCanvas(300, 400);
  background(180);
}

function draw() {
    // For loop that allows for reiterations of the line
    // Loop runs 90 times to generate specific shapes
    for (i = 0; i < 90; i++) {
        // Multiple variables declared that are used in line function
        x1 = i * 10;
        y1 = -x1;
        x2 = width / 2 - x1;
        y2 = height / 2 - y1;
        y3 = 0;
        y3 += i * 5;
        y4 = height;
        y4 -= i * 5;

        // Alternating the color of lines to create an intersting composition
        if (i < 50) {
            stroke(0);
        }
        else {
            stroke(255);
        }
        strokeWeight(.5);

        // First pair of top triangles
        line(width / 2, height / 2, x1, y1);
        line(width / 2, height / 2, width - x1, height - y1);

        // Second pair of the side triangles
        line(width / 2, height / 2, width, y4);
        line(width / 2, height / 2, 0, y3);

        // Second series of variables declared to allow for curves to be developed
        stroke(255);
        a1 = width;
        a2 = 0;
        a3 = -100;
        a4 = 0;

        a1 -= i * 4;
        a3 += i * 1.2;
        a4 += i * 5;
        // Top left curve drawn
        line(a1, a2, a3, a4);

        b1 = width;
        b2 = height;
        b3 = width;
        b4 = -5;

        b1 -= i * 4;
        b3 += i * 3;
        b4 += i * 5;
        // Bottom right curve drawn
        line(b1, b2, b3, b4);


    }


}

My inspiration for this project started with testing what combinations of lines resulted from varying the parameters in a for loop. I found interesting patterns where lines clustered together represent shadows, and by alternating colors, I was able to make an interesting composition.

Ammar Hassonjee – Project 03 – Dynamic Drawing

Ammar Hassonjee – Dynamic Drawing

/* Ammar Hassonjee
    Section C
    ahassonj@andrew.cmu.edu
    Project 03 - Dynamic Drawing
*/

// Sky color variables
var sc1 = 255;
var sc2 = 255;
var sc3 = 255;
function setup() {
    createCanvas(480, 640);
}

function draw() {
    // Making sure the sky color changes from day to night as the mouse moves down
    background(mouseY * .5, 6 + mouseY * .18, 60 + mouseY * .12);
    if (mouseY > height) {
        background(242, 117, 134);
  }

  // Changing the color of the stars to make sure they fade at dawn
    noStroke();
    sc2 = 255 - mouseY * .4;
    sc3 = 255 - mouseY * .3;
    if (mouseY > height / 2) {
        sc1 = 242;
        sc2 = 117;
        sc3 = 134;
  }

  // Creating the star pattern using nested for loop
    fill(sc1, sc2, sc3);
    for (let a = 1; a < 7; a++) {
        for (let i = 1; i < 51; i++) {
            if (i % 2 === 0) {
                ellipse(i * 30 - 15, 70 * a, 10, 10);
                }
            else {
                ellipse(i * 30 - 15, 70 * a - 30, 10, 10);
              }
            }
  }

  // Drawing the mountains
    var p = 0;
    fill(96, 90, 114);
    for(let i = 0; i < 23; i++) {
        if (i % 2 === 0) {
            triangle(p - 30, 640, p + 45, 500 + (mouseX * .1), p + 90, 640);
          }
        else {
            triangle(p - 30, 640, p + 45, 460 + (mouseX * .1), p + 90, 640);
          }
          p += 45;
        }

    // Creating the shooting star
    push();
    // Making the star translate back and forth across the image plane
    translate(mouseX, height / 3);
    rotate(radians(170));
    // Streaks for the star
    fill(220);
    triangle(384, 145, 387, 160, 665, 92);
    triangle(665, 86, 384, 127, 383, 138);
    // Shooting star drawing
    fill('yellow');
    beginShape();
    vertex(339, 86);
    vertex(353, 112);
    vertex(379, 116);
    vertex(359, 138);
    vertex(364, 166);
    vertex(339, 153);
    vertex(314, 166);
    vertex(319, 138);
    vertex(299, 116);
    vertex(326, 112);
    endShape();
    pop();

  }

My inspiration for this assignment stemmed from my love of nature and landscape. I’ve always liked the scene of a shooting star in a starry sky, so I thought it would be a great dynamic drawing opportunity to have a star move across the screen while the sky color changes.

Ammar Hassonjee – Looking Outwards 04

A Real Time Climate Sound Controller

Photograph of Adrien Kaeser operating his climate sound controlling machine taken from Creative Applications Net.

A researcher from ECAL named Adrien Kaeser recently invented a custom sound controller he named “Weather Thingy” in January, 2018 that interprets real-time climate data to adjust the parameters on musical instruments such as a piano. His device is comprised of parts such as a weather station that collects climate data and a controller to the station that translates the weather related data into a data type that can be understood by electronic instruments called midi data.

The artist’s purpose was for anyone engaging the project to be able to listen and feel the real time effects of the weather through their sense of sound based on the compositions the instruments are playing. I admire this project’s goal to take two forms of data that are not commonly related to each other, yet find a way to program an input and conversion of one dataset of weather data to another in sound data. The project allows us to feel the weather using a sense we don’t typically use for that purpose in our sense of hearing.

Video showing the project operating and a visual of all its components.

Ammar Hassonjee – Looking Outwards 03

Computer Aided Knitting by MIT CSAIL

Pictures of various knit garments using computational techniques.

The CSAIL lab at MIT recently completed a new project that develops systems for streamlining the process of automating knit garments. One of the systems developed is called “InverseKnit” in which photographs of knitted patterns are analyzed using a program to create instructions for robots to fabricate clothing.

According to the CSAIL website, researchers first started by creating a dataset of knitting instructions/patterns and then programmed a network to interpret these images into rules that can be used to fabricate clothing items such as a sock.

Video showing how the machine operates.

What I admire about this project is its goal to revolutionize an age old process of knitting and apply algorithims in order to streamline this process we’ve been using for thouasands of years to make clothes. The real world application of this project is incredible as it can potentially reduce the manufacturing cost of clothes by so much. I think the algorithms used are image based processors that use the knitting image patterns as inputs and then analyze the geometry in the patterns. The original intent of the project was acheived as the creators sought to craft a simple and straightforward knitting machine that fabricates with accuracy, and they accomplished that.