Matthew Erlebacher Project 3 Dynamic Drawing

Interactive Drawing

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-03

var mouseX
var mouseY
// Allows the location of the mouse to be a variable

var squareSide = 50
// Creates a variable to control the size of the square

function setup() {
    createCanvas(640, 480);
    // Creates a blank canvas

}

function draw() {
    background(125);
    // Creates a blue background

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, height / 2, 30, height);
    // Creates a vertical rectangle to the far left

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the left

    fill(mouseX / 2.5 - mouseY / 1.9, mouseX / 2.5, mouseY / 1.9);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, height);
    // Creates a vertical rectangle that splits the canvas

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the right

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(width, height / 2, 30, height);
    // Creates a vertical rectangle to the far right

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 0, width, 30);
    // Creates a horizontal rectangle at the top

    fill(mouseX / 2.5 - mouseY / 1.9, mouseY / 1.9, mouseX / 2.5);
    rectMode(CENTER);
    rect(width / 2, height / 2, width, 30);
    // Creates a horizontal rectangle that splits the canvas

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 480, width, 30);
    // Creates a horizontal rectangle at the bottom

    fill(125);
    rectMode(CENTER);
    rect(0, 0, 30, 30);
    // Creates a gray square in the upper left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 4, 0, 30, 30);
    // Creates a gray square in the left quarter  top

    fill(125);
    rectMode(CENTER);
    rect(width / 2, 0, 30, 30);
    // Creates a gray square in the middle top

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, 0, 30, 30);
    // Creates a gray square in the quarter right top

    fill(125);
    rectMode(CENTER);
    rect(width, 0, 30, 30);
    // Creates a gray square in the upper right corner

    fill(125);
    rectMode(CENTER);
    rect(0, height / 2, 30, 30);
    // Creates a gray square in the far left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, 30);
    // Creates a gray square in the middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter right middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height / 2, 30, 30);
    // Creates a gray square in the far right middle

    fill(125);
    rectMode(CENTER);
    rect(0, height, 30, 30);
    // Creates a gray square in the quarter far left bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height, 30, 30);
    // Creates a gray square in the lower left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height, 30, 30);
    // Creates a gray square in the middle bottom of the canvas

    fill(125);
    rectMode(CENTER);

    rect(3 * width / 4, height, 30, 30);
    // Creates a gray square in the quarter right bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height, 30, 30);
    // Creates a gray square in the upper right corner

    fill(0, 0, 255);
    ellipse(width / 4, height / 2, mouseX / 5, mouseX / 5);

    fill(255, 0, 0);
    ellipse(3 * width / 4, height / 2, width / 5 - mouseX / 5, width / 5 - mouseX / 5);

    fill(255);
    rectMode(CENTER);
    rect(mouseX, height - mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseX and opposes mouseY

    fill(255);
    rectMode(CENTER);
    rect(width - mouseX, mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseY and opposes mouseX

    fill(0);
    rectMode(CENTER);
    rect(width - mouseX, height - mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that opposes location of mouse

    fill(0);
    rectMode(CENTER);
    rect(mouseX, mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that follows the mouse
}

This project was fairly difficult for me. Apart from struggling with how to make it interactive, it was very hard for me to come up with something to create. I ended up making a transforming light show.

Matthew Erlebacher LookingOutwards-02

Robert Hodgin/flight404 “Taxi, Taxi!” 2/26/2016

The piece of generative art that I found to be the most interesting was “Taxi, Taxi!” by Robert Hodgin. The main thing that I admire about it is how much the piece has going on at once. The video has a bird’s eye view of a large city and has several glowing dots moving across the street (these presumably represent taxis). I also feel that it provides an interesting and meta perspectives on large cities. From the bird’s eye view you realize how large the city is and how many different people are moving around in it. One critique of the project that I would make is that it keeps cutting between shots. While cuts are good so that the audience doesn’t get bored they use this to often, and it becomes more distracting than anything else.

merlebac Project-02 Section B

merlebac Project-02

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Assignment-02-A

/* For this assignment I used the example provide in the assignment
description as a starting point. I then used what I learned from
that to add my own details and variation to the assignment. */

// Global Parameter Variables

var eyeWidth = 30
var eyeHeight = 30
// Determines width and height of eyes

var faceWidth = 150
var faceHeight = 150
// Determines width and height of face

var lipWidth = 100
var lipHeight = 10
// Determines width and height of lip

var noseP1X = 315
var noseP1Y = 265
// Determines 1st point of triangle nose

var noseP2X = 320
var noseP2Y = 255
// Determines 2nd point of triangle nose

var noseP3X = 325
var noseP3Y = 265
// Determines 3rd point of triangle nose

var hornX = 250
var hornY = 150
// Determines last point of horns

var fangP3 = 300
// Determines fang length

// Global color Variables

var faceColorR = 255
var faceColorG = 255
var faceColorB = 255
// Determines the color combination of face

var eyeColorR = 255
var eyeColorG = 255
var eyeColorB = 255
// Determines color combination of eyes

var lipColorR = 255
var lipColorG = 255
var lipColorB = 255
// Determines color combination of lip

var noseColorR = 255
var noseColorG = 255
var noseColorB = 255
// Determines color of nose

var hornColorR = 255
var hornColorG = 255
var hornColorB = 255
// Determines color of the horns

var fangColorR = 255
var fangColorG = 255
var fangColorB = 255
// Determines color of the fangs

function setup() {
    createCanvas(640, 480);
    // Creates a black canvas
}

function draw() {
    background(0);
    
    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, hornX, hornY);
    // Creates left horn

    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, width - hornX, hornY);
    // Creates right horn

    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    // Creates a circle for the face
    
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    // Chooses a coordinate for the eyes

    fill(fangColorR, fangColorG, fangColorB);
    triangle(280 + 0.1 * faceWidth, 280,
        290 + 0.1 * faceWidth, 280, 285 + 0.1 * faceWidth, fangP3);
    // Creates left fang

    fill(fangColorR, fangColorG, fangColorB);
    triangle(360 - 0.1 * faceWidth, 280,
        350 - 0.1 * faceWidth, 280, 355 - 0.1 * faceWidth, fangP3);
    // Creates right fang
    
    fill(lipColorR, lipColorG, lipColorB);
    rectMode(CENTER);
    // Centers rectangle
    rect(width / 2, height / 2 + 40,
        lipWidth, lipHeight);
    // Creates and chooses parameters of lip

    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    // Creates a left eye for the face
    
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    // Creates a right eye for the face

    fill(noseColorR, noseColorG, noseColorB);
    triangle(noseP1X, noseP1Y, noseP2X, noseP2Y, noseP3X, noseP3Y);
    // Creates triangle as a nose

}

function mousePressed() {
// Shape randomizers

    eyeWidth = random(10, 50);
    eyeHeight = random(10, 50);
    // Randomizes the width and height of the eyes
    
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    // Randomizes the width and height of the face

    lipWidth = random(75, 150);
    lipHeight = random(5, 15);
    // Randomizes the width and height of the lip

    hornX = random(150, 250);
    hornY = random(50, 150);
    // Randomizes the last poing of the horn

    noseP1X = random(305, 315);
    noseP1Y = random(255, 265);
    // Randomizes the 1st point of the nose

    noseP2X = random(315, 325);
    noseP2Y = random(245, 255);
    // Randomizes the 2nd point of the nose

    noseP3X = random(325, 335);
    noseP3Y = random(255, 265);
    // Randomizes the 3rd point of the nose

    fangP3 = random(300, 400);
    // Randomizes the bottom of the fang

// Color Randomizers

    faceColorR = random(0, 255);
    faceColorG = random(0, 255);
    faceColorB = random(0, 255);
    // Randomizes the color of the face

    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);
    // Randomizes the color of the eyes

    noseColorR = random(0, 255);
    noseColorG = random(0, 255);
    noseColorB = random(0, 255);
    // Randomizes the color of the nose

    lipColorR = random(0, 255);
    lipColorG = random(0, 255);
    lipColorB = random(0, 255);
    // Randomizes the color of the lip

    hornColorR = random(0, 255);
    hornColorG = random(0, 255);
    hornColorB = random(0, 255);
    // Randomizes the color of the horns

    fangColorR = random(0, 255);
    fangColorG = random(0, 255);
    fangColorB = random(0, 255);
    // Randomizes the color of the fangs

}

Working on this project was an interesting experience for me. I started out by just creating a regular face, and sort of hit a creativity block after that. I decided that it would be cool if the colors would constantly change against a black background so I made each color a variable. Finally, I decided to give the face fangs and horns in order to increase the variability, as well as make it more visually interesting.

Matthew Erlebacher Looking Outward-01

TIE Fighter – Short Film

One piece of media that has inspired me is the YouTube video “TIE Fighter – Short Film” by Paul Johnson. The film was a homage to the 1994 video game with the same name. According to the credits the project was made by a team of only three people. Paul Johnson was the animator, Zakir Rahman composed the music, and Joseph Leyva worked on sound design. Paul and Zakir were housemates, so it was easy for them to work together. The description also states that it took them four years to complete.

From what I’ve read, the team didn’t create new programs or software to complete the piece. This would put it more in the category of last word art. The obvious inspiration of the creator was the Star Wars franchise. However, he was also a huge fan of 1980’s anime. This was shown by the stylized faces that Paul gave each of his characters. One of his previous works was a Doctor Who animation. He is now working on a mech animation which he stated would be inspired by Generation Kill.

Sources Used:

  • C., Jordan. “Animator Paul.” Mass Appeal, Mass Appeal, 18 Aug. 2015, massappeal.com/animator-paul-otaking-johnson-talks-his-insane-star-wars-anime/.
  • https://massappeal.com/animator-paul-otaking-johnson-talks-his-insane-star-wars-anime/
  • Johnson, Paul, director. TIE Fighter – Short Film. YouTube, 24 Mar. 2015, www.youtube.com/watch?v=PN_CP4SuoTU.

Matthew Erlebacher Self-Portrait

merlebac Project-01

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-01

function setup() {
    createCanvas(600, 500);
    background(0, 0, 255);
    // Canvas background

    fill(1);
    quad(110, 320, 160, 160, 300, 110, 300, 350);
    // Left hair quad (1)

    fill(1);
    quad(490, 320, 440, 160, 300, 110, 300, 350);
    // Right hair quad (2)

    fill(200, 140, 45);
    triangle(160, 275, 160, 350, 100, 260);
    // Triangle left ear (3)

    fill(200, 140, 45);
    triangle(440, 275, 440, 350, 500, 260);
    // Triangle right ear (4)

    fill(255, 130, 65);
    ellipse(300, 300, 300, 300);
    // Face ellipse (5)

    fill(256);
    ellipse(235, 235, 50, 50);
    // Left eye ellipse (6)

    fill(256);
    ellipse(365, 235, 50, 50);
    // Right eye ellipse (7)

    fill(190, 130, 45);
    ellipse(235, 235, 25, 25);
    // Left pupil ellipse (8)

    fill(190, 130, 45);
    ellipse(365, 235, 25, 25);
    // Right pupil ellipse (9)

    noStroke();
    fill(255, 0, 0);
    rect(225, 375, 150, 20);
    // Lip rect (10)

    fill(200, 140, 45);
    triangle(275, 325, 300, 275, 325, 325);
    // Triangle nose (11)


}

I feel that I did a decent job at making primitives resemble a face. I tried to make everything overlap in order to make it look more organic. I also attempted to use different colors in order to give the image some variety.