Author: ssontag@andrew.cmu.edu

ssontag-fireworks-Project-03-DynamicDrawing

For this project I let my knowledge of certain functions built into p5.js. I researched Perlin Noise and became pretty comfortable with the way it worked in conjunction with the rotate function to create a firework effect.

sketch


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

function draw() {
    background(220);
//these rectangles following are lined up one after the other 
//they follow the x value of the mouse, but are offset by the rectangles next to them
    fill(219, 112, 147);
    rect(mouseX + 525, 0, 300, 480);

    fill(176, 224, 230);
    rect(mouseX + 500, 0, 25, 480);

    fill(255, 218, 185);
    rect(mouseX + 350, 0, 150, 480);

    fill(135, 206, 250);
    rect(mouseX + 300, 0, 50, 480);

    fill(30, 144, 255);
    rect(mouseX, 0, 300, 480);

    fill(143, 188, 143);
    rect(mouseX - 100, 0, 100, 480);

    fill(255, 140, 0);
    rect(mouseX - 300, 0, 200, 480);

    fill(173, 216, 230);
    rect(mouseX - 350, 0, 50, 480);

    fill(224, 255, 255);
    rect(mouseX - 450, 0, 100, 480);

    fill(240, 128, 128);
    rect(mouseX - 750, 0, 300, 480);
 
//my goal was to modulate the position of the cirlces rotated around the translated orgin 
//in order to create a firework effect
//by using push, pop, and rotate i can make a circular array of ellipses
//by using the perlin noise i can make the circles ungulate based on the perlin noise number sequence
    translate(width/2, height/2);
        for (var i = 0; i < 16; i++) {
            push();
            rotate(TWO_PI * i / 16);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(255, 239, 213);
            ellipse(mouseX - 400, 0, 20, 20);
            translate();
            pop();
        }

        for (var i = 0; i < 8; i++) {
            push();
            rotate(TWO_PI * i / 8);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(102, 51, 153)
            ellipse(mouseX - 200, 0, 50, 50);
            translate();
            pop();
        }

//this translation puts a firework in the bottom right corner
    translate(width/2, height/2);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }
//this translation places a firework in the top left corner
    translate(-640, -480);
        for (var i = 0; i < 32; i++) {
            push();
            rotate(TWO_PI * i / 32);
            var tx = 200 * noise(0.01*frameCount);
            translate(tx, 0);
            fill(0, 128, 128);
            ellipse(mouseX - 200, 0, 10, 10);
            translate();
            pop();
        }


}

ssontag-Looking Outwards-03

Being an Architecture major, we discuss parametric design and digital fabrication quite often because it is the most groundbreaking technology in the field. Earlier this year we were introduced to a project done by a professor and group of researchers at MIT. I especially appreciate this project because it not only uses the most recent technology in parametric design and digital fabrication, but it uses a natural precedent to inform the structure of the weave for the panels. Using data collected by the research done on the silkworms, the CNC machine was programmed to weave a unique pattern on each panel that created a pavillion with ample lighting and enclosure.

Website

 

 

ssontag- Looking Outwards

As far as generative art goes the only knowledge I have is generative modeling used in architecture. This year I am taking a generative modeling class that will teach me how to use python within the modeling space of Rhino to use parametric modeling to influence my designs. One of the most famous architects to use generative modeling in their work is Zaha Hadid. She has been an extremely influential architect as far as women in the field of architecture, but has also been an amazing influence to me because of her work. She has always been on the cutting edge of the design world in architecture and design. Her legacy lives on through her firm Zaha Hadid Architects.

Zaha Hadid Architects

 

ssontag – Project 02 – Variable Faces

sketch

//box1 Variables
var box1W = 120;
var box1H = 170;
var box1X = 160;
var box1Y = 200;

//box2 Variables
var box2W = 60;
var box2H = 300;
var box2X = 110;
var box2Y = 35;

//box3 Variables
var box3W = 250;
var box3H = 90;
var box3X = 50;
var box3Y = 50;

//box4 Variables
var box4W = 200;
var box4H = 200;

//box5 Variables
var box5W = 40;
var box5H = 90;
var box5X = 200;
var box5Y = 60;

//box6 Variables

var box6W = 100;
var box6H = 10;
var box6X = 160;
var box6Y = 200;

//box7 Variables
var box7W = 30;
var box7H = 60;
var box7X = 57;
var box7Y = 150;

//box8 Variables
var box8W = 30;
var box8H = 60;
var box8X = 290;
var box8Y = 57;


//box9 Variables
var box9W = 60;
var box9H = 10;
var box9X = 40;
var box9Y = 100;


//box10 Variables
var box10W = 15;
var box10H = 15;
var box10X = 130;
var box10Y = 190;


//eye1 Variables
var eye1W = 50;
var eye1H = 80;

//eye2 Variables
var eye2W = 30;
var eye2H = 24;



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

function draw() {
    background(210);

//box1
    strokeWeight(0);
    fill(213, 180, 118);
    rect(box1X, box1Y, box1W, box1H);

//box2
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box2X, box2Y, box2W, box2H);

//box3
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box3X, box3Y, box3W, box3H);
    
//box4 
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, box4W, box4H);

//box5
    strokeWeight(0);
    fill(205, 133, 63);
    rect(box5X, box5Y, box5W, box5H);

//box6
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box6X, box6Y, box6W, box6H);

//box7
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box7X, box7Y, box7W, box7H);

//box8
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box8X, box8Y, box8W, box8H);

//eye1
    strokeWeight(0);
    fill(0);
    ellipse(160, 55, eye1W, eye1H);

//eye2
    strokeWeight(0);
    fill(0);
    ellipse(260, 90, eye2W, eye2H);

//box9
    strokeWeight(0);
    fill(218, 165, 32);
    rect(box9X, box9Y, box9W, box9H);

//box10
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box10X, box10Y, box10W, box10H);

}

function mousePressed() {
//when mouse is 
//box1 Variables
    box1W = random(110, 130);
    box1H = random(160, 180);
    box1X = random(155, 165);
    box1Y = random(195, 205);

//box2 Variables
    box2W = random(50, 70);
    box2H = random(290, 310);
    box2X = random(105, 115);
    box2Y = random(30, 40);

//box3 Variables
    box3W = random(240, 260);
    box3H = random(80, 100);
    box3X = random(45, 55);
    box3Y = random(45, 55);

//box4 Variables
    box4W = random(190, 210);
    box4H = random(190, 210);

//box5 Variables
    box5W = random(30, 50);
    box5H = random(80, 100);
    box5X = random(195, 205);
    box5Y = random(55, 65);


//box6 Variables
    box6W = random(90, 110);
    box6H = random(1, 20);
    box6X = random(155, 165);
    box6Y = random(195, 205);

//box7 Variables
    box7W = random(20, 40);
    box7H = random(50, 70);
    box7X = random(52, 63);
    box7Y = random(145, 155);

//box8 Variables
    box8W = random(20, 40);
    box8H = random(50, 70);
    box8X = random(285, 295);
    box8Y = random(52, 63);


//box9 Variables
    box9W = random(50, 70);
    box9H = random(1, 20);
    box9X = random(35, 45);
    box9Y = random(95, 105);

//box10 Variables
    box10W = random(5, 25);
    box10H = random(5, 25);
    box10X = random(125, 135);
    box10Y = random(185, 195);

//eye1 Variables
    eye1W = random(45, 55);
    eye1H = random(75, 85);

//eye2 Variables
    eye2W = random(25, 35);
    eye2H = random(19, 29);
}

When we were assigned with the task to make our faces from last week variable I continued with the theme of the cubist style. Cubism typically abstracts motion into simple geometric shapes. By the click of the mouse the face comes alive and the geometries jitter within their respective areas. My goal was to make the viewer uncomfortable while clicking the screen.

Project-1-Face-Sontag

sketch

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

function draw() {
    background(210);

    strokeWeight(0);
    fill(213, 180, 118);
    rect(160, 200, 120, 170);

    strokeWeight(0);
    fill(222, 184, 135);
    rect(110, 35, 60, 300);

    strokeWeight(0);
    fill(139, 69, 19);
    rect(50, 50, 250, 90);
    
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, 200, 200);

    strokeWeight(0);
    fill(205, 133, 63);
    rect(200, 60, 40, 90);

    strokeWeight(0);
    fill(139, 69, 19);
    rect(160, 200, 100, 10);

    strokeWeight(0);
    fill(255, 222, 173);
    rect(57, 150, 30, 60);

    strokeWeight(0);
    fill(255, 222, 173);
    rect(290, 57, 30, 60);

    strokeWeight(0);
    fill(0);
    ellipse(160, 55, 50, 80);

    strokeWeight(0);
    fill(0);
    ellipse(260, 90, 30, 24);

    strokeWeight(0);
    fill(218, 165, 32);
    rect(40, 100, 60, 10);

    strokeWeight(0);
    fill(222, 184, 135);
    rect(190, 130, 15, 15);

}

When tasked with drawing a self portrait of myself i decided to use a cubistic aproach. Although i could use other geometries to make a representation of my face, i don’t believe my skills would be able to create a realistic representation of me. Therefore i chose an abstract way of representation.

Looking_Outwards_1_Sontag

Last year, a group of 5 or so brothers in my fraternity competed in Build 18, and created a driving fish tank that was driven by our house goldfish (Scuba Suresh). The tank moved based on the location of the fish in the tank. The used a sensor mounted above the tank to determine the location of the fish. The further the fish moved to the forward determined the speed at which the motor propelled the tank. The tank would also turn based on the fish’s location right or left of center. Although it look minimal software and hardware, I took it as an inspiration because it was a quirky use of their knowledge and they were able to create it with a close group of friends. They actually became quite the internet sensation when the video when viral on Facebook, receiving half a million likes overnight.