Author: Gmurth

Project-04: String Art

Graham Murtha

Section A

This is the “complimentary eye of the storm”. I used 4 different variations of a base string code, each with different stroke weights and stroke colors for more variation. The numlines is set to 25.

sketch
// gmurtha Graham Murtha
// Section A

var dx1 = 0;
var dy1 = 0;
var dx2 = 0;
var dy2 = 0;
var numLines =25;

function setup() {
    createCanvas(300, 400);
    background(80,0,80); // dark purple

    for(var a = 0; a <= 360; a += 80){ //a = angle
        translate(width/2,height/2);
        line(0,125,25,-75); // base line 1
        line(25,25,125,0); //base line 2
        dx1 = (25-0)/numLines; //calculates difference between each string
        dy1 = (-75-125)/numLines; //calculates difference between each string
        dx2 = (125-25)/numLines; //calculates difference between each string 
        dy2 = (0-25)/numLines; //calculates difference between each string
        rotate(radians(a));
    }

}

function draw() {
    fill(255,255,200) // bright yellow
        circle(width/2,height/2,25);
    fill(80,0,80); //background color
    circle(width/2,height/2,10);

    translate(width/2,height/2);
    stroke(255,255,255); //white
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 30){ // 12 shape variations fit
        var x1 = 125;
        var y1 = 75;
        var x2 = 75;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) { //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(255,255,100); //yellow
    strokeWeight(3);
    for(var a = 0; a <= 360; a += 45){ // 8 shape variations fit
        var x1 = 125;
        var y1 = 175;
        var x2 = 175;
        var y2 = 125;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    stroke(200,0,200); //purple
    strokeWeight(2);
    for(var a = 0; a <= 360; a += 60){ //six shape variations fit
        var x1 = 125;
        var y1 = -125;
        var x2 = 75;
        var y2 = 75;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

    
    stroke(255,150,255); //bright purple
    strokeWeight(1);
    for(var a = 0; a <= 360; a += 90){ //four shape variations fit
        var x1 = 0;
        var y1 = 125;
        var x2 = 125;
        var y2 = 0;
        for (var i = 0; i <= numLines; i ++) {  //loops 25 times
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
    rotate(radians(a));
    }

}

Looking Outwards 04

Graham Murtha

Section A

In the project entitled “Material Sequencer” by Mo H. Zareei, mechanical processes and rhythm are synthesized to create a sort of exposed metronome. Many people own metronomes, but no one considers the complexity of the functions working inside the little box. This project provides a visual for users, as they are able to experience the mechanisms required to make consistent or dynamic rhythms. While watching demos of the machine in action, I noticed that the variability of the system took up the majority of the working parts. The metronome has a dip switch that, when pressed, alternates between 8 different rhythmic patterns, as well as a dial for tempo. The circuit board tranfers both of these inputs from the user and transfers them to a Teensy 3.2 board, which interprets the 8 patterns as on/off functions. In this vein, the machine conspicuously displays how programming plays a large role in a machine as simple as a metronome. The project also has a heavy emphasis on materiality- connecting raw materials that have been musically utilized for centuries with the new era of mechanism and programming.

Material Sequencer – Physical materiality of sound

Project 3- Dynamic Drawing

Graham Murtha, Section A

This is a dance routine of some complimentary color orbs.

sketch
// GRAHAM MURTHA
// Section A

let opacity = 100;

var dir = 1
var fill = 50
var angle = 0


function setup() {
    createCanvas(600, 450);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);

}



function draw() {
let x = mouseX;
let y = mouseY;
let ix = width - mouseX;  // Inverted X
let iy = height - mouseY; // Inverted Y
background(0,0,50) // dark blue

//ellipse SET 1
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    
    
    translate(width/2,height/2) //moving origin of rotating orbs to center
    push() ;


//ellipse SET 2
    rotate(radians(angle)+45)
    fill(255,0,255, opacity); //purple
    ellipse(x, height/2, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix, height/2, iy/2, iy/2);
    pop();
    angle -=.2
    

//ellipse SET 3
    rotate(radians(angle)+90)
    fill(255,0,255, -opacity); //purple
   ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


//ellipse SET 4
    rotate(radians(angle)+135)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2

    
//ellipse SET 5
    rotate(radians(angle)+180)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2

//ellipse SET 6
    rotate(radians(angle)+225)

    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);

    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);

    pop();
    angle -=.2


//ellipse SET 6
    rotate(radians(angle)+225)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/4, y/4);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/4, iy/4);
    pop();
    angle +=.2


    //ellipse SET 7
    rotate(radians(angle)+360)
    fill(255,0,255, opacity); //purple
    ellipse(x/2, height/4, y/2, y/2);
    fill(255,255,0, opacity); //yellow
    ellipse(ix/2, height/4, iy/2, iy/2);
    pop();
    angle -=.2
}



    
//change in the opacity of the circles
function mouseMoved() {
    opacity = map(mouseX, 0, 300, 600, 50, 255, 50) 
    opacity = map(mouseY, 0, 225, 450, 50, 255, 50) 
}

//As the mouse moves further right and further downwards, the opacity of ALL of the spheres will change

Looking Outwards-03

Graham Murtha, Section A

Aguahoja III

The project I looked into,  Aguahoja III, is an exploration of biophilic parametric design conducted by the MIT media lab.  As an architecture student, parametric design is constantly brought up and analyzed in depth, but biophilic projects are harder to find, and much harder to understand.  Consequently, this project is fascinating to me, because despite its label as sculpture, it reminds me of the few cases of biophilic structures I’ve seen in the past.  The algorithms that created this object mimic natural processes by using organic materials like cellulose, chitin, and pectin.  By enacting this strategy, the team’s 3D printers are essentially creating organic material as it would grow in nature, but in unique and complex man-made forms.  Despite its computer based, parametric shape, the design still manifests visual signs of natural processes, such as layers of veins within its skin, and a decomposable exoskeleton.  In other words, the team that produced this project hosted a mix of both controlled and unpredictable variables, which is a fascinating balance to create as an artist.  

Project 2: Variable Faces

For this self Portrait, I tried to learn more about static tools like the arc and Curve Vertex, as well as varying tools that change color, shape, positioning depending on a number of conditions. Over the process of creating the piece, I began to like the limits created with horizontal/vertical movement of the mouse.

sketch 

//Graham Murtha Section A
// MAKE SURE TO MOVE THE MOUSE DOWN TO THE BOTTOM :)
var eyeSize = 40;
var earSize = 50

var skinR = 160
var skinG = 20
var skinB = 160

var shirtR = 150
var shirtG = 150
var shirtB = 0


function setup() {
    createCanvas(350, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    if (mouseX < width/2) {
        if (mouseY < height/2) {
            background(140,20,140); //purple 1
        } else {
            background(100,10,150); // purple 2
        }
    } else {
        if (mouseY < height/2) {
            background(170,50,170); // purple 3
        } else {
            background (200,20,140); //purple 4
        }
    }                                   // BACKGROUND
    
    fill(skinR,skinG,skinB);
    strokeWeight(2);
    stroke(1);
    ellipse(250, 216, earSize, earSize*1.66) //ear left
    ellipse(97,216,earSize,earSize*1.66)   //ear Right

    fill(shirtR,shirtG,shirtB)
    triangle(175,400,350,500,0,500) // SHIRT


    fill(skinR,skinG,skinB);
    beginShape();
    curveVertex(175, 175);
    curveVertex(175, 75);
    curveVertex(300, 375);
    curveVertex(175,470);
    curveVertex(50, 375);
    curveVertex(175, 75);
    curveVertex(175, 175);
    endShape();       // HEAD SHAPE

    fill(255,141,176)
    rect(110.17,60.72,129,133.3);
    strokeWeight(4)
    arc(175,191,160,30,0,3.14159265); // hat

    
    fill(255,255,240);
    noStroke()
    ellipse(125,270,eyeSize,eyeSize*.75); // eye 1
    ellipse(230,270,eyeSize,eyeSize*.75); // eye 2

    fill(255,0,255);
    noStroke()
    if(mouseX < width/3){
    ellipse(125,270,10,10); // pupil 1a
    ellipse(230,270,10,10); // pupil 1b
    }
    if(mouseX >= width/3 & mouseX < (2*width)/3){
        rect(120,265,10,10); //pupil 2a
        rect(225,265,10,10); //pupil 2b
    }
    if(mouseX >= (2*width)/3){
        triangle(120,265,130,265,125,275); //pupil 3a
        triangle(225,265,235,265,230,275); //pupil 3b
    }


    if (mouseY < height/1.2) {
            fill(0,0,0);
            ellipse(175,400,(mouseX/6),(mouseY/9)); // open, moving mouth
            } else {
                stroke(1)
                strokeWeight(4);
            line(125,400,225,400); // closed mouth
        }
    
    if (mouseY < height/1.2) {
            arc(125,210,30,10,3.14159265,0) //normal brow 1
            arc(230,210,30,10,3.14159265,0) //normal brow 2
            } else {
                fill(skinR,skinG,skinB)
            arc(125,265,50,30,3.14159265,0) // angry brow 1
            arc(230,265,50,30,3.14159265,0) // angry brow 2
        }

    if (mouseY > height/1.2) {
            arc(125,278,50,30,0,3.14159265) // eyebag 1
            arc(230,278,50,30,0,3.14159265) //eyebag 2
            }

    
 
}

function mousePressed() {
    eyeSize = random(20, 60);
    earSize = random(40,80);
    skinR = random(150,240);
    skinG = random(10,60);
    skinB = random(150,240);
    shirtR = random(140,255);
    shirtG = random(140,255);
    shirtB = random(0,10);

}

Looking Outwards-02

Section A

Project Website:

http://www.thewildernessdowntown.com/

Vimeo Sample:

While looking through different generative artists, I came across the work of Aaron Koblin, who’s project “The Wilderness Downtown,” caught my eye immediately. The project involves using google street view, as well as google maps in general, to extract data which influences a short film based off of a particular city. From the different alterations displayed on his website, each of the short films are incredibly distinct and personal to the locations they are “set” in. This concept is absolutely fascinating to me, as growing up I always wanted to watch a movie set in my hometown, a sentiment I’m sure that many others felt. Now, with the technology that Koblin has created for us, this dream is starting to become a reality, albeit in small steps. Despite the short length of the film (somewhere around 30 seconds), simply seeing a single artistic representation of a personal location must be thrilling for us viewers. Although the locations of these short films are being produced from the data on a computer, they still give off the illusion that skilled artists have both visited and cared for our homes, enough to make a movie out of it.

Project 1

This is my self portrait, enjoy!!

sketch
function setup() {
    createCanvas(500, 515);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(random(0, 140), random(0,0), random(10, 140));
   
    strokeWeight(2)
    fill(206,116,144);
    triangle(246,313.5,0,515,500,515) //shirt

    strokeWeight(2);
    fill(255,242,172);
    triangle(347,428,299.4,379.6,271.5,442) //collar bone 1

    strokeWeight(2);
    fill(255,242,172);
    triangle(191.6,385,143.43,428.2,220.5,444) //collar bone 1


    strokeWeight(2);
    fill(255,242,172);
    triangle(143.43,428.2,347,428,246,490) //chest



    strokeWeight(.5)
    fill(206,116,144);
    ellipse(243.5,160,220,120) // hat 1

        fill(196,131,215)
    rect(129,158,230,100); // hair

    strokeWeight(4); 
    fill(255,242,172); 
    triangle(355,250,129,245,246,490); //jaw
    strokeWeight(4);

    // RELOAD THE PAGE FOR DIFFERENT COLORS!!!!
    fill(223,186,117);   
    triangle(281,293,197,292,241,231); //nose
   
    fill(223,186,117);
    triangle(225,243,175,174,129,242); // eye
   
    fill(223,186,117); 
    triangle(255,244.47,306,171,354,246); // eye

    fill(255,242,172);
    triangle(304,172,180,175,241,267.5); //bridge of nose

    fill(random(200,255),random(0,0),random(200,255));
    ellipse(307.81,218.91,60,25); //eye hole

    fill(random(200,255),random(0,0),random(200,255));
    ellipse(180,218.91,60,25); //eye hole
    
    fill(223,186,117); 
    triangle(255,210,306,171,354,210); // eyelid
    

     fill(223,186,117); 
    triangle(135,210,186,171,234,210); // eyelid


    strokeWeight(7)
    stroke(150)
    noFill();
    ellipse(307.81,218.91,90,50); //glass 1
    noLoop()

        strokeWeight(7)
    stroke(150)
    noFill();
    ellipse(180,218.91,90,50); //glass 2
    noLoop()

    line(225,218.91,262.81,218.91) //glass bridge
    
    
    strokeWeight(0)
    fill(random(50,150),0,random(50,150)); 
    triangle(199,313,273,314,234,373); // mouth

    stroke(1)
    strokeWeight(6);
    fill(206,116,144);
    triangle(234.5,198.5,350.5,160,137.9,160) //hat brim



   

}

Blog 1

A programmed artistic project that I find fascinating is Den.make, an independent project created by a software engineer in New York City. This engineer/artist uses creative coding and algorithmic art to make moving images that can resemble 3d meshes of geodes to 2-dimensional cells moving within a cramped space. When I first discovered this artist on instagram, I was enthralled by a video of a robot arm drawing in the contours of a complex mountainous valley. In other words, this initial interest came from my love of robots in science fiction creating pen and ink lineart, another thing I love. Now, as I’ve explored more of his work, what moves me more is the biophilic effect that this animated coded art has, particularly the cell-like animations. These images reflect on the nature of coding as the building blocks of technological life, just like the DNA in every functioning organism in nature. This art demonstrates how coding can mimic microorganisms, and perhaps create them in the future.