ankithav@andrew.cmu.edu – Page 2 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Ankitha Vasudev – Looking Outwards – 07

Flight Patterns is a time-lapse animation made by Aaron Koblin, a digital media artist and entrepreneur, in 2011. This project displays American air-traffic patterns and densities over a 24-hour time period, by following the routes of around 140,000 American planes crossing the United States. I found this project interesting because of the way it visualizes this information. The artist uses a variety of color and patterns to illustrate a wide range of data including aircraft type, no-fly zones, weather patterns and alteration to routes.

As the animation reveals iterations of flight patterns during the cycle, the viewer experiences a changing, phantom geography of the country with airline hubs appearing as bright points of diffusion within a complex web.This project employs data visualization and processing, an open-source computer programming environment. FAA (Federal Aviation Administration) data was all parsed and plotted using Processing. Koblin’s use of aggregate data to reflect on life and our systems is a reflection on the relationship between humans and technology.

The paths of air traffic over North America visualized in color and form

Another version of Flight Patterns visualizing planes in monochrome

Ankitha Vasudev – Project 06 – Abstract Clock

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 06

//global variables 
var r = 148; // color of background
var g = 222;
var b = 255;
var r1 = 255; // color of starfish
var g1 = 130;
var b1 = 180;
var r2 = 120; // color of seaweed
var g2 = 200;
var b2 = 100;
var fishy = 200; //y position of fish 

var x = [50, 65, 70, 62, 65, 50, 35, 39, 30, 45];
var y = [365, 372, 375, 380, 395, 385, 395, 380, 375, 370];

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

function draw() { 

    // Current Time
    var H = hour();
    var M = minute();
    var S = second();

    // Changes background color based on 8-hour periods 
     if (H >= 0 & H <= 8) {
        background(r, g, b);
    } else if (H > 8 & H < 16) {
        background(r-50, g-50, b-20);
    } else if (H >= 16 & H <= 24) {
        background(r-150, g-150, b-50);
    }

    //position of fish according to seconds
    fishx1 = map(S, 0, 59, 0, width+110);
    fishx2 = map(M, 0, 59, width-20, -40);
    fishx3 = map(H, 0, 23, width-20, -30);

    //star color changes every second 
    //becomes lightest at the end of each minute
    r1 = map(S, 0, 59, 200, 255);
    g1 = map(S, 0, 59, 50, 200);
    b1 = map(S, 0, 59, 50, 200);
    
    //changes seaweed color every minute 
    r2 = map(M, 0, 59, 150, 0);
    b2 = map(M, 0, 59, 120, 0);

    //fish moving every second
    noStroke();
    fill(236, 185, 0);
    ellipse(fishx1-55, fishy, 90, 30);
    triangle(fishx1-95, fishy, fishx1-110, fishy-20, fishx1-110, fishy+20);

    //fish moving every minute
    fill(217, 180, 123);
    ellipse(fishx2+20, fishy-100, 40, 15);
    triangle(fishx2+30, fishy-100, fishx2+40, fishy-90, fishx2+40, fishy-110);

    //fish moving every hour
    fill(111, 72, 2);
    ellipse(fishx3, fishy+100, 50, 15);
    triangle(fishx3+20, fishy+100, fishx3+30, fishy+95, fishx3+30, fishy+105);

    //seaweed
    for (i = 0; i < width+5; i += 5) {
        fill(r2, g2, b2);
        triangle(i-5, height-30, i, height-60, i+15, height-30);
    }

   //sand 
    fill(240, 210, 142);
    rect(0, height-40, width, 50);

    //starfish
    fill(r1, g1, b1);
    beginShape();
    for (var i = 0; i < 10; i++) {
        vertex(x[i], y[i]);
    endShape();
}
    //text displaying time as reference 
    fill(100);
    text("Hour: " + H, 10, 20);
    text("Minute: " + M, 10, 35);
    text("Second: " + S, 10, 50);
}

For this project I wanted to create an animation that included changing positions and colors according to the time. Each fish moves at a different pace – one every second, one every minute and one every hour. The starfish changes color every second and camouflages with the sand by the of every minute. The seaweed changes color every minute and is the greenest at the end of every hour. The color of the sea varies at 8-hour intervals to show the time of the day(morning, afternoon or evening).

Ankitha Vasudev – Looking Outwards – 06

E-volver is a site specific work for the Research Labs of the LUMC (Lieden University Medical Centre) in Leiden. The software allows people to interact with the screen by tapping on it. Four images of random genetic patterns are displayed on the screen, and the person interacting with the software can touch the image that interests them the least. Voting out the least exciting animation, devalues those particular genes and also upgrades the genes of the three surviving animations. Thus, the selection process evolves a group of agents that generate the most intriguing animation.

A person interacts with E-volver by touching the least interesting of the four images

I found this project interesting due to the combination of art, genetics and the process of evolution. For this project the artists developed software that generates artificial pixel-sized agents. Each agent is made up of thirteen genes that determine how the agent will behave on the screen. The genes read the properties of their eight surrounding pixels and tell the agent what to do with the pixel on which it stands and to which pixel it should move to next. In this way, each of the agents leaves its individual traces on the screen. This project allows one to understand the process of evolution while providing an aesthetic experience.

Four random genetic patterns displayed by the software

Link to work: https://notnot.home.xs4all.nl/E-volverLUMC/E-volverLUMC.html

Ankitha Vasudev – Project 05 – Wallpaper

For this project I wanted to create a geometric pattern and was inspired by the designs on the antique wallpaper website. I experimented with various shapes, variables and colors before arriving at a final result. I particularly focused on creating quadrangles through diagonal lines.

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 05

//global variables 
var l = 25;
var diameter = 10;
var spacing = 50;

function setup() {
    createCanvas(400, 400); 
    noLoop();
}

function draw() { 
    background(210, 140, 190);
    //command to draw wallpaper 
    drawWallPaper();
}

function drawWallPaper() {

    //thin yellow lines
    stroke(255, 215, 50);
    strokeWeight(8);
    for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
      line(x-l, y+l, x+l, y-l);
      line(x+l, y+l, x-l, y-l);
      line(x-l, y+l, x+l, y-l);
      line(x+l, y+l, x-l, y-l);
    }
  }

    //thick blue diagonal lines
    stroke(130, 190, 230);
    strokeWeight(4);
    for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
         line(x-l, y+l, x+l, y-l);
         line(x+l, y+l, x-l, y-l);
         line(x-l, y+l, x+l, y-l);
         line(x+l, y+l, x-l, y-l);
    }
  }

    //inner squares 
    strokeWeight(2);
    stroke(255, 215, 50);
    fill(255, 70, 160);
       for (var x = 0; x<=width; x += spacing/2) {
        for (var y = 0; y <= height; y+=spacing) {
            rectMode(CENTER);
            rect(x, y, l/4, l/4);
     }
   }

    //circles
    strokeWeight(4);
    stroke(130, 190, 230);
    fill(220);
     for (var x = 0; x<=width; x += spacing) {
        for (var y = 0; y <= height; y+=spacing) {
            ellipse(x, y, diameter);
     }
   }
}

Ankitha Vasudev-Looking Outwards-05

Growth: Mysterious Gallery (1983) is a five-minute long animation sequence that was created by Yoichiro Kawaguchi – an artist who became popular for his unique style of art using computer graphics.

In this project, Kawaguchi created a self-organizing, procedural, modelling algorithm that could make many complex life forms. The inspiration for this project was natural and organic objects that exhibit repetitive patterns, such as shells, claws and spiraling plants. Kawaguchi wanted to create an algorithm to recreate these forms artistically.

I admire this artist and project because of how realistic it’s 3D animation is. Additionally, this technique was one of the first of its kind. Kawaguchi used two process related to image rendering to create this animation: ray tracing and metaballs. Ray tracing defined the color to be rendered in order to add depth to the 3D image. Metaballs were first used by Kawaguchi to represent organic looking, n-dimensional objects.

After this project, Kawaguchi continued to produce animated short films using 3D computer graphics. Some of his other notable works include Embryo(1988), Gigalopolis(1995) and Cytolon(2002).

Various clips from Growth: Mysterious Galaxy, 1983

Kawaguchi explaining the idea behind his animations

Ankitha Vasudev – Project 04 – String Art

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 04

var r = 210;
var g = 220;
var b = 255;
var angle = 0;
var cx = 0;

function setup() {
    createCanvas(400, 300);
    background(0);
    angleMode(degrees);
}

//spiral eye 
function draw() {
    angle = angle+5;
    cx = cx+20;
    fill(0);
    push();
    translate(width/2,height/2-10);
    rotate(radians(angle));
    strokeWeight(0.5);
    stroke(r-200, g-150, b);
    line(cx, 0, 10, 10);
    pop();

//loop
for (var x = 0; x < width; x += 10) {

    //bottom right curves
   	strokeWeight(0.75);
    stroke(r+40, g+20, b);
    line(x, height-30, width-30, height-x);
    stroke(r-50, g-60, b);
   	line(x, height, width, height-x);

    //top left curves
    stroke(r+40, g+30, b);
    line(x, 20, 40, height - x);
    stroke(r-70, g-80, b);
    line(x, 0, 0, height - x);

    //top right curves
    stroke(r-20, g-10, b);
    line(width/2 + x, 0, width, x);
    stroke(r+40, g+20, b);
    line(width/2 + x, 0, width, x+50);

    //bottom left curves
    stroke(r-40, g-20, b);
    line(0, x+80, x, height);
    stroke(r+40, g+20, b);
    line(10, x, x, height);
}
}

For this project, I played around with looping and changing coordinates to obtain different patterns. I also wanted to create a dynamic element, which led to the idea of creating an abstract eye.

Ankitha Vasudev – Looking Outwards – 04

Sonic Playground is an outdoor sound installation that was created by Yuri Suzuki in 2018. This project was made for the High Museum of Art in Atlanta. It features 6 interactive, playful and colorful sculptures that modify and transmit sounds depending on where the participant is standing, listening or speaking. Using horns and pipes the computed acoustics travel from one end to the other in a playful way and by kneeling down or sitting between two pipes one can hear the that sounds are transported from different parts of the sculptures, which creates a fun and unique listening experience.

I find this project interesting because it made use of a software that I am learning now – Grasshopper (as a parametric plug-in for Rhino). The code that was written for this is a 3D raytracing tool that allows the user to select a sound source and send sound in a certain direction or towards a certain geometry, in this case the shape of the acoustic mirrors or the bells at the start and end of the pipes to see how the sound is reflected and what is the interaction with the object.

The pipes transfer sounds depending on where the person is situated

Ankitha Vasudev – Project 03- Dynamic Drawing

For this project I wanted to experiment with rotation and changes in color. I tried to create contrasting changes such as the sun color changing as its size decreases and the buildings rising and becoming brighter as the sky gets darker. The most challenging part was getting the rotation of the sun rays.

sketch

// Ankitha Vasudev
// Section B, 10:30 - 11:50
// ankithav@andrew.cmu.edu
// Assignment-03-b

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

function draw() {
	// Changes background color based on mouse position 
	background(0, 200 - mouseX, 500 - mouseY);
	noStroke();

    //Local variables
    var x = 700; //triangle x coordinate
    var y = 700; //triangle y coordinate 
    var circleW = 30; //sun width
    var circleH = 30; //sun height
    var bwidth = 50; //building width

    //rotating sun rays (triangles)
	push();
	translate(mouseX, mouseY);
	fill(255, 225, 0);
	rotate(mouseY);
	triangle(0, 0, -x/2, y, -x, y+200);
	triangle(0, 0, x/2, -y, x, -y-200);
	triangle(0, 0, x+50, y, y, x+50);
	triangle(0, 0, -x-50, -y, -y, -x-50);
    pop();

    //sun - circle changes size based on mouse position 
    if (mouseX < width/2) {
    circleW = width/2 - mouseX;
    circleH = width/2 - mouseX;
    } else { 
    circleH = 5
    circleW = 5;
    }
    
    //changes sun color and size
    fill(255, 225, mouseX);
    ellipse(mouseX, mouseY, circleW, circleH);

    //building heights based on mouse position 
    fill(mouseX);
    rect(200, 530, bwidth+10, (-mouseY/ 5));
    fill(220);
    rect(160, 570, bwidth-10, (-mouseY / 5));
    fill(150);
    rect(70, 600, bwidth, (-mouseY/5));
    fill(mouseX);
    rect(380, 620, bwidth, (-mouseY/5));
    fill(180);
    rect(355, 550, bwidth/2, (-mouseY/5));
    fill(mouseX);
    rect(20, 660, bwidth/3, (-mouseY/5));

    //green ground - stationary
    fill(0, 220, 70);
    ellipse(width/2, 870, 700, 700);
}

Ankitha Vasudev – Looking Outwards – 03

The Voxman Music Building at the University of Iowa was designed by LMN Architects in 2016. The architects used parametric modeling to explore the intersections of multiple theatrical disciplines. The concert hall features a suspended “theatroacoustic” system, unifying acoustics and lighting. I find this building inspirational because generative modeling was used to design and build the structure. The ceiling is assembled out of 946 unique, folded-aluminium modules that were digitally fabricated from modules digitally designed and fabricated from the architects’ parametric model.

Using a series of generative-design scripts, the designers first protoyped and then created a unique architectural feature and used those same scripts to describe to the builder the geometry and construction sequence needed to fabricate and install the ceiling.

The builder then took the digital information computed by LMN’s generative algorithms directly to the fabrication floor, assuring absolute fidelity to the design the architects created, and manufacturing the system with computer-controlled accuracy.

Hence, without generative modeling, the design and construction of this building would have been impossible.

A video by LMN Architects explaining the design of the Voxman Music Building

Ankitha Vasudev – Project 02 – Variable Face

sketch

// Ankitha Vasudev
// Section B 
// ankithav@andrew.cmu.edu
// Project-02-Variable Face

//global variables
var faceWidth = 200; 
var faceHeight = 150;
var earH = 50;
var earW = 40;
var eyeW = 20;
var eyeH = 30;
var eyeColor = 0;
var r = 255;
var g = 217;
var b = 255;
var cheekw = 20;
var cheekh = 20;


function setup() {
    createCanvas(640, 480);
    background(167, 220, 200);
}

function draw() {

    //background
    noStroke();
    fill(r, g, b);
    rect(0, 0, 640, 480);
    fill(167, 220, 200);
    rect(20, 20, 600, 440);

    //ears
    noStroke();
    fill(110, 59, 0);
    ellipse(237, 240, earW, earH);
    ellipse(402, 240, earW, earH);

    //face
    fill(110, 59, 0);
    ellipse(width / 2, 220, faceWidth - 50, faceHeight);
    ellipse(width / 2, 300, faceWidth, faceHeight);
    fill(229, 222, 180);
    ellipse(width / 2, 220, faceWidth - 80, faceHeight - 30);
    ellipse(width / 2, 300, faceWidth - 30, faceHeight - 30);

    //eyes
    stroke(255);
    strokeWeight(12);
    fill(eyeColor);
    ellipse(295, 240, eyeW, eyeH);
    ellipse(345, 240, eyeW, eyeH);

    //mouth
    noFill();
    stroke(255, 160, 255);
    strokeWeight(4);
    beginShape();
    curveVertex(280, 300);
    curveVertex(300, 320);
    curveVertex(340, 320);
    curveVertex(360, 300);
    endShape();

    //cheeks
    noStroke();
    fill(255, 180, 255);
    ellipse(265, 300, cheekw, cheekh);
    ellipse(375, 300, cheekw, cheekh);
}

function mousePressed(){
    faceWidth = random(200, 230); 
    faceHeight = random(150, 180);
    earH = random(30, 100);
    eyeW = random(20, 40);
    eyeH = random(35, 60);
    eyeColor = random(0, 200);
    r = random(190, 250);
    g = random(190, 250);
    b = random(230, 255);
    cheekw = random(20, 40);
    cheekh = random(20, 40);
}

I wanted to make something that was fun and creative. I used the face shape and features of a monkey for this project. It was interesting to play around with different variables that allowed me to change the colors and shapes in the program.