Author: harivardhan

Project 11: Winter Scroll

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-11

var snowForeground = []; // array of snow particles in the foreground
var snowBackground = []; // array of snow particles in the background
var snowAmountForeground = 500;
var snowAmountBackground = 750;
var snowSize = 3;
var snowLayers = 3;

function setup() {
    createCanvas(500, 300);

    for (i = 0; i < snowAmountForeground; i++) {
        snowForeground[i] = new Object();
        snowForeground[i].x = random(width);
        snowForeground[i].y = random(height);
        snowForeground[i].dy = random(0.25, 1);
        snowForeground[i].c = color(random(200, 255));
    }

    for (i = 0; i < snowAmountBackground; i++) {
        snowBackground[i] = new Object();
        snowBackground[i].x = random(width);
        snowBackground[i].y = random(height);
        snowBackground[i].dy = random(0.25, 1);
        snowBackground[i].c = color(random(200, 255));
    }
}

// update position and draw each of 100 rectangles
function draw() {
    // background sky gradient
    for (var i = 0; i < height; i++) {
        // 
        var c1 = color(0, 20, 52);
        var c2 = color(0, 71, 126);
        // 
        var gradient = map(i, 0, height, 0, 1);
        var c = lerpColor(c1, c2, gradient);
        stroke(c);
        line(0, i, width, i);
    }

    // snow falling in the background
    noStroke();
    for (i = 0; i < snowAmountBackground; i++) {
        drawSnowBackground(snowBackground[i]);
        updateSnowBackground(snowBackground[i]);
    }

    // layers of winter forest
    forest();

    // snow falling in the foreground
    noStroke();
    for (i = 0; i < snowAmountForeground; i++) {
        drawSnowForeground(snowForeground[i]);
        updateSnowForeground(snowForeground[i]);
    }
}

function forest() {
    foliage0 = 0.06;
    foliage1 = 0.04;
    foliage2 = 0.02;
    foliage3 = 0.01;
    foliageSpeed0 = 0.001;
    foliageSpeed1 = 0.002;
    foliageSpeed2 = 0.003;
    foliageSpeed3 = 0.004;

    stroke(163, 196, 217);
    beginShape();
    for (var i = 0; i < width; i++) {
        var t0 = (i * foliage0) + (millis() * foliageSpeed0);
        var y0 = map(noise(t0), 0, 1, 200, 5);
        line(i, y0, i, height);
    }
    endShape();

    stroke(117, 163, 191);
    beginShape();
    for (var i = 0; i < width; i++) {
        var t1 = (i * foliage1) + (millis() * foliageSpeed1);
        var y1 = map(noise(t1), 0, 1, 250, 6);
        line(i, y1, i, height);
    }
    endShape();

    stroke(70, 113, 140);
    beginShape();
    for (var i = 0; i < width; i++) {
        var t2 = (i * foliage2) + (millis() * foliageSpeed2);
        var y2 = map(noise(t2), 0, 1, 275, 7);
        line(i, y2, i, height);
    }
    endShape();

    stroke(30, 51, 64);
    beginShape();
    for (var i = 0; i < width; i++) {
        var t3 = (i * foliage3) + (millis() * foliageSpeed2);
        var y3 = map(noise(t3), 0, 1, 300, 8);
        line(i, y3, i, height);
    }
    endShape();
}

function drawSnowForeground(s) {
    fill(s.c);
    circle(s.x, s.y, 2);
}

function updateSnowForeground(s) {
        s.y += s.dy;
        if (s.y > height) {
        s.y = 0;
        }
        else if (s.y < 0) {
            s.y = height;       
        }
}

function drawSnowBackground(s) {
    fill(s.c);
    circle(s.x, s.y, random(0.5,1.5));
}

function updateSnowBackground(s) {
        s.y += s.dy;
        if (s.y > height) {
        s.y = 0;
        }
        else if (s.y < 0) {
            s.y = height;       
        }
}

Train’s window
Credits: https://www.journeyb.com/2019/10/journeybasket-short-history-indian-railways-book-photos.html

LO 11: ImageNet Roulette: An Experiment in Classification, by Kate Crawford and Trevor Paglen

Kate Crawford (left) and Trevor Paglen (right), as classified by ImageNet Roulette Courtesy of the artist

ImageNet Roulette is a classification tool created by artist Trevor Paglen and AI researcher Kate Crawford as a provocation design to help us realise the way in which humans are classified in machine learning systems. This tool regularly returns racist, misogynistic, and cruel results which is because of the dataset it derives from ImageNet’s ‘Person’ category, which is an offset of face recognition experiments.

The ImageNet dataset is largely used for object recognition such as finding out apples and oranges when an image is uploaded. One of the subsets of ImageNet is the person category which are classified and labelled in terms of race, gender, age, and character. These labels used to tech the AI were supplied by lab staff and crowdsourced workers who introduced their conscious and unconscious opinions and biases into the algorithm.

Shortly after the ImageNet Roulette went viral, the ImageNet team announced plans to remove over 600,000 images featured in its people category. On the 27th of September 2019, the ImageNet Roulette has been taken off the internet after proving its point on how things can go wrong and remains as a physical art installation at the Fondazione Prada Osservertario in Milan.

Project 09: Portrait

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-09

// global variable to store the preloaded image
var img;

function preload() {
    img = loadImage('https://i.imgur.com/8WPELuP.jpg');
}

/* 
Reference from lecture-20's random bouncing particles.
The bouncing particles will draw the image by accessing
the pixel colors it traverses.
Additionally, the mouseY position will control the alpha
of the pixel color and the mouse click will reset the background
to different grey color, also using the mouseY position
for the user to play with the abstract representation.
*/

// number of particles
var np = 100;  

function particleStep() {
    this.age++;
    this.x += this.dx;
    this.y += this.dy;
    if (this.x > width) { // bounce off right wall
        this.x = width - (this.x - width);
        this.dx = -this.dx;
    } else if (this.x < 0) { // bounce off left wall
        this.x = -this.x;
        this.dx = -this.dx;       
    }
    if (this.y > height) { // bounce off bottom
        this.y = height - (this.y - height);
        this.dy = -this.dy;
    } else if (this.y < 0) { // bounce off top
        this.y = -this.y;
        this.dy = -this.dy;
    }
}


function particleDraw() {
    this.clr = img.get(this.x, this.y);
    stroke(this.clr[0], this.clr[1], this.clr[2], mouseY);
    point(this.x, this.y);
}


function makeParticle(px, py, pdx, pdy) {
    p = {x: px, y: py,
         dx: pdx, dy: pdy,
         age: 0,
         stepFunction: particleStep,
         drawFunction: particleDraw
        }
    return p;
}


var particles = [];


function setup() {
    createCanvas(img.width, img.height);
    background(mouseY);
    for (var i = 0; i < np; i++) {
        var p = makeParticle(600, 600,
                             random(-10, 10), 
                             random(-10, 10));
        particles.push(p);
    }
    frameRate(15);
}


function draw() {
    strokeWeight(random(5));
    for (var i = 0; i < np; i++) { 
        var p = particles[i];
        p.stepFunction();
        p.drawFunction();
    }
}

// mouse press will refresh the background to re-draw
function mousePressed() {
  background(mouseY);
}

LO 09: Superfeel at Cinekid Festival 2014 ,  Molmol Kuo

SuperFeel from Molmol on Vimeo.

Molmol Kuo is a Taiwanese artist and educator based in Brooklyn, NY and a partner at YesYesNo LLC. Her background in documentary and experimental film, reflects in many of her interactive technology works which has strong sense of narrative potential. Her strength lies in electronic research and development, rather than the software. She uses rapid prototyping as a tool for storytelling. Molmol works with the mentor program at the Tisch School of the Arts for recent New York University graduates who are international students and in their early careers as artists. Apart from all of this, she volunteers for the Sanctuary for Families in New York to advocate for victims of violence and sex trafficking, and she works with survivors of gender-based violence to rebuild their lives beyond trauma.

SuperFeel is a project that utilizes interactive installation and wearable sensor technology. This project takes small forces from the hands of participants and scales them up, creating a stage where air, wind, fog, vibration can affect a crowd. The wearable device responds to the user’s muscle and body gestures to make the installation playable. At the same time installation also consists of flying objects to represent the forces generated in response to the sensory inputs and make the user suggestively feel the superpower.  

LO 08: Space in the Mind of a Machine, Eyeo 2019 – Refik Anadol

Refik Anadol is a media artist born in Istanbul, Turkey and holds a master of fine arts degree from UCLA’s Department of Design Media Arts, master of fine arts from Istanbul Bilgi University in Visual Communication Design and a bachelors of arts degree in photography and video. Currently situated in Los Angeles, he works in the field of site-specific public art, leveraging data, live audio, and video to produce interactive information visualization. His key works explore the spatial relationship between architecture and media arts with machine intelligence.

The most interesting part is how he visualizes various datasets with relationship to visual and spatial storytelling. I can relate his method of inquiry to critical regionalism or place-making reflecting the memory or history of that context. His final project named WDCH Dreams was the best of all as the presentation format was incremental and progressive.

WDCH DREAMS – Process from Refik Anadol on Vimeo.

His presentation for the Eyeo Festival, 2019 begins with his motivation to computational design followed by his capstone project for master of fine arts degree at UCLA. On a larger context, the presentation can be divided into before AI and after. The key feature of the presentation was incorporating his experience with various clients and people he met during this journey through storytelling, which involves the audience into his works.

Eyeo 2019 – Refik Anadol from Eyeo Festival on Vimeo.

LO 07: The codex Atlanticus: Decoding Leonardo Da Vinci for the world by The Visual Agency, Italy

Codex-Atlanticus.it – A new light on Leonardo da Vinci's greatest work from The Visual Agency on Vimeo.

The codex Atlanticus is a digital collection of drawings and texts by Leonardo da Vinci which is a part of the original collection at Biblioteca Ambrosiana in Milan. The creators of this digital archive have utilized data for storytelling and visualize information through various filters with which the user can unravel information of a particular document, beyond what is specified in it. The most interesting part is how the interface works and interacts with the user through visualized data. One would be more informed of the archival material going through this digital interface.

Links:

https://thevisualagency.com/works/decoding-leonardo-da-vinci-for-the-world/

LO 06: Design 3-1. Data 4, 5, 6, 6, 6 by Hiroshi Kawano – 1964

Design 3-1. Data 4, 5, 6, 6, 6

Hiroshi Kawano was a Japanese philosopher who approached the field of digital art through philosophy. His generative artwork is based out of Mondrian using probabilistic methods of computation. In one of his works titled – Design 3-1. Data 4, 5, 6, 6, 6; also known as 2nd order color Markov chain, Kawano used a Japanese OKITAC 5090A computer which generated black and white print over which Kawano applied colors by hand. One thing that is interesting in works are the mutability of the Mondrian paintings through coding and randomizing the interrelationship of patterns. On the other hand, this makes me wonder about deterministic and indeterministic approaches.

Center for Art and Media Karlsruhe, Photo: Tom Hahn

Project 06: Clock

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(450, 300);
}

function draw() {
    var s = map(second(), 0, 60, 0 , width); //runs from left to right
    var m = map(minute(), 0, 60, 0 , width); //runs from left to right
    var h = map(hour(), 0, 24, height , 0); //runs from bottom to top
    var cR;
    var cG;
    var cB;
    // color caliberation for the background w.r.t. hour
    if (hour() > 0 & hour() < 6) {
        cR = 0;
        cG = 50;
        cB = 100;
    }
    else if (hour() > 6 & hour() < 15) {
        cR = 50;
        cG = 150;
        cB = 250;
    }
    else if (hour() > 15 & hour() < 19) {
        cR = 50;
        cG = 150;
        cB = 250;
    }
    else if (hour() > 19 & hour() < 24) {
        cR = 0;
        cG = 25;
        cB = 51;
    }
    background(cR, cG, cB); // cliberated background

    // grid for second
    for (var xS = 0; xS <= width; xS += width/60) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(1);
        line(xS, 200, xS, height);
    }
    // grid for minute
    for (var xM = 0; xM <= width; xM += width/60) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(4);
        line(xM, 100, xM, 200);
    }
    // grid for hour
    for (var xH = 0; xH <= width; xH += height/24) {
        stroke('rgba(10, 10, 10, 0.9)');
        strokeWeight(10);
        line(width/2, xH, width - height/2, xH);
    }
    // second runs along the horizontal grid left to right
    push();
    stroke(cR, cG, cB);
    strokeWeight(2);
    line(s, 200, s, height);
    pop();
    // minuit runs along the horizontal grid from left to right
    push();
    stroke(cR, cG, cB);
    strokeWeight(3);
    line(m, 100, m, 200);
    pop();
    // hour runs along the vertical grid from bottom to top 
    push();
    stroke(cR, cG, cB);
    strokeWeight(9);
    line(width/2, h, width - height/2, h);
    pop();
}

Project 05: Wallpaper/Floor Tiles

Inspired by the South Indian – Chettinad’s Athangudi tiles

sketch

//Name: Hari Vardhan Sampath
//Section: E
//eMail address: harivars@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(600, 550);
    background(0); // black
}

var r = 10; // initialize red 
var g = 10; // initialize green 
var b = 10; // initialize blue 

function draw() {
    drawGrid();
    noLoop(); // to mainitain gradient
}



function drawGrid() {
    var s = 50; //side of the cube
    for (var y = 0; y <= height; y += s + s/2) {
        var green = 5; //initialize green
        for (var x = 0; x <= width; x += s) {
            fill(r, g, b);
            cube(x, y, s);
            r += 3 //increment red
            g += 2 //increment green 
            b += 1 //increment blue
        }
    r += 2 //increment red
    b += 3 //increment blue
    }
}

function cube(x, y, s){
    // first face of the cube with colormix of r & g
    push();
    translate(x, y);
    noFill();
    rotate(radians(30));
    stroke(2);
    fill(r, g, 0);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop();
    // second face of the cube with colormix of g & b
    push();
    translate(x, y);
    rotate(radians(30 + 120));
    stroke(2);
    fill(0, g, b);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop()
    // third face of the cube with colormix of r & b
    push();
    translate(x, y);
    rotate(radians(30 + 120 + 120));
    stroke(2);
    fill(r, 0, b);
    quad(0, 0, s, 0, s/2, s*sqrt(3)/2, 
            -s/2, s*sqrt(3)/2) ;
    pop()
}

LO 05: Oscillion by Benjamin Francis Laposky, 1950

‘Oscillon 520’, by Ben Laposky, US, 1960. Museum no. E.1096-2008.

Benjamin Francis Laposky was a mathematician, artist and draftsman who is one amongst the early computer graphic visualizer. His work titled Oscillon, a collection of images generated using oscilloscope to manipulate electronic waves. Laposky utilized long exposure photography to capture the movement of these waves that appeared on the screen. These waves were manipulated using cathode ray oscilloscope with sine wave generators and various other electronic circuits that the abstract art. The most interesting thing about Laposky’s work is the abstract quality achieved by geometric precision related to mathematical curves and Lissajous Figures.