Project 05: 1950’s Atomic-Era Wallpaper! – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!
// Ilia Urgen
// Section B

let shape_width = 90;
let shape_height = 160; 

// I created 4 different designs, which I named Quad 1, Quad 2, Quad 3, and Quad 4.
// Each design is stored in a separate function below.

function setup() {
    createCanvas (600, 600);
    background (200);
}   

function draw() {

    // Quad 1 Coordinates
    let x1 = 60;
    let y1 = 60;

    let x2 = 180;
    let y2 = 220;


    // Quad 2 Coordinates
    let x3 = 60;
    let y3 = 220;

    let x4 = 180;
    let y4 = 60;

    // Quad 3 Coordinates
    let x5 = 0;
    let y5 = -20;

    let x6 = 120;
    let y6 = 140;

    // Quad 4 Coordinates
    let x7 = 0;
    let y7 = 140;

    let x8 = 120;
    let y8 = -20;

    let row_increase = 240;
    let col_increase = 320;

    background (210);
    
    // Prints outer Quad 1
    for (var rowA = 1; rowA <= 10; rowA += 1) {
        for (var colA = 1; colA <= 10; colA += 1) {

            quad_2 (x1, y1);  
            y1 += col_increase;
        } 

        x1 += row_increase; 
        y1 = 60;
    }

    // Prints inner Quad 1
    for (var rowB = 1; rowB <= 10; rowB += 1) {
        for (var colB = 1; colB <= 10; colB += 1) {

            quad_2 (x2, y2);  
            y2 += col_increase;
        } 

        x2 += row_increase; 
        y2 = 220;
    }

    // Prints outer Quad 2
    for (var rowC = 1; rowC <= 10; rowC += 1) {
        for (var colC = 1; colC <= 10; colC += 1) {

            quad_1 (x3, y3);  
            y3 += col_increase;
        } 

        x3 += row_increase; 
        y3 = 220;
    }

    // Prints inner Quad 2
    for (var rowD = 1; rowD <= 10; rowD += 1) {  
        for (var colD = 1; colD <= 10; colD += 1) {

            quad_1 (x4, y4);  
            y4 += col_increase;
        } 

        x4 += row_increase; 
        y4 = 60;
    }
    
    // Prints outer Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x5, y5); 
            y5 += col_increase;
        } 

        x5 += row_increase; 
        y5 = -20;
    }
    
    // Prints inner Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x6, y6);  
            y6 += col_increase;
        } 

        x6 += row_increase; 
        y6 = 140;
    }

    // Prints outer Quad 4
    for (var rowF = 1; rowF <= 10; rowF += 1) {  
        for (var colF = 1; colF <= 10; colF += 1) {

            quad_4 (x7, y7); 
            y7 += col_increase;
        } 

        x7 += row_increase; 
        y7 = 140;
    }
    
    // Prints inner Quad 4
    for (var rowG = 1; rowG <= 10; rowG += 1) {  
        for (var colG = 1; colG <= 10; colG += 1) {

            quad_4 (x8, y8);  
            y8 += col_increase;
        } 

        x8 += row_increase; 
        y8 = -20;
    }

    noLoop();
}

function quad_1 (x1, y1) {
    noStroke();
    
    fill (96,149,130);    
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 - shape_width/6, y1 - shape_height/2);
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 + shape_height/2,   x1 - shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2,   x1 + shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/6, y1 - shape_height/2);

    fill (114,102,78);
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 - shape_height/2, x1, y1 - shape_height/2);   
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 + shape_height/2, x1, y1 + shape_height/2);
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 + shape_height/2, x1, y1 + shape_height/2);   
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 - shape_height/2, x1, y1 - shape_height/2);

    fill (53,98,115);
    quad (x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2);
    
    fill (32,64,60);
    quad (x1 - shape_width/4.5, y1,   x1, y1 - shape_height/3,   x1 + shape_width/4.5, y1,   x1, y1 + shape_height/3);

    stroke(255);
    strokeWeight(1);
    line (x1 - shape_width/10, y1, x1 + shape_width/10, y1);
    line (x1, y1 - shape_height/10, x1, y1 + shape_height/10);
    line (x1 - shape_width/20, y1 - shape_height/20, x1 + shape_width/20, y1 + shape_height/20);
    line (x1 + shape_width/20, y1 - shape_height/20, x1 - shape_width/20, y1 + shape_height/20);

    circle (x1 - shape_width/10, y1, 3);
    circle (x1 + shape_width/10, y1, 3);
    circle (x1, y1 - shape_height/10, 3);
    circle (x1, y1 + shape_height/10, 3);

    circle (x1 - shape_width/20, y1 - shape_height/20, 3);
    circle (x1 + shape_width/20, y1 + shape_height/20, 3);
    circle (x1 + shape_width/20, y1 - shape_height/20, 3);
    circle (x1 - shape_width/20, y1 + shape_height/20, 3);
}

function quad_2 (x3, y3) {
    noStroke();
    
    fill (53,98,115);    
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 - shape_width/6, y3 - shape_height/2);
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 + shape_height/2,   x3 - shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2,   x3 + shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/6, y3 - shape_height/2);

    fill (114,102,78);
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 - shape_height/2, x3, y3 - shape_height/2);   
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 + shape_height/2, x3, y3 + shape_height/2);
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 + shape_height/2, x3, y3 + shape_height/2);   
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 - shape_height/2, x3, y3 - shape_height/2);

    fill (96,149,130);
    quad (x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2);
    
    fill (255);
    quad (x3 - shape_width/4.5, y3,   x3, y3 - shape_height/3,   x3 + shape_width/4.5, y3,   x3, y3 + shape_height/3);

    stroke(32,64,60);
    strokeWeight(1);
    line (x3 - shape_width/10, y3, x3 + shape_width/10, y3);
    line (x3, y3 - shape_height/10, x3, y3 + shape_height/10);
    line (x3 - shape_width/20, y3 - shape_height/20, x3 + shape_width/20, y3 + shape_height/20);
    line (x3 + shape_width/20, y3 - shape_height/20, x3 - shape_width/20, y3 + shape_height/20);

    circle (x3 - shape_width/10, y3, 4);
    circle (x3 + shape_width/10, y3, 4);
    circle (x3, y3 - shape_height/10, 4);
    circle (x3, y3 + shape_height/10, 4);

    circle (x3 - shape_width/20, y3 - shape_height/20, 4);
    circle (x3 + shape_width/20, y3 + shape_height/20, 4);
    circle (x3 + shape_width/20, y3 - shape_height/20, 4);
    circle (x3 - shape_width/20, y3 + shape_height/20, 4);
}

function quad_3 (x5, y5) {
    noStroke();
    
    fill (96,149,130);    
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 - shape_width/6, y5 - shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2,   x5 + shape_width/6, y5 + shape_height/2);

    fill (53,98,115);
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 + shape_height/2,   x5 - shape_width/6, y5 + shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/6, y5 - shape_height/2);

    fill (253,217,181);
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 - shape_height/2, x5, y5 - shape_height/2);   
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 + shape_height/2, x5, y5 + shape_height/2);
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 + shape_height/2, x5, y5 + shape_height/2);   
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 - shape_height/2, x5, y5 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (205,91,69);
    quad (x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2);
    
    strokeWeight (1.5);

    line (x5 - shape_width/10, y5, x5 + shape_width/10, y5);
    line (x5, y5 - shape_height/10, x5, y5 + shape_height/10);
    line (x5 - shape_width/20, y5 - shape_height/20, x5 + shape_width/20, y5 + shape_height/20);
    line (x5 + shape_width/20, y5 - shape_height/20, x5 - shape_width/20, y5 + shape_height/20);

    circle (x5 - shape_width/10, y5, 4);
    circle (x5 + shape_width/10, y5, 4);
    circle (x5, y5 - shape_height/10, 4);
    circle (x5, y5 + shape_height/10, 4);

    circle (x5 - shape_width/20, y5 - shape_height/20, 4);
    circle (x5 + shape_width/20, y5 + shape_height/20, 4);
    circle (x5 + shape_width/20, y5 - shape_height/20, 4);
    circle (x5 - shape_width/20, y5 + shape_height/20, 4);
}

function quad_4 (x7, y7) {
    noStroke();
    
    fill (53,98,115);    
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 - shape_width/6, y7 - shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2,   x7 + shape_width/6, y7 + shape_height/2);
    
    fill (96,149,130);
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 + shape_height/2,   x7 - shape_width/6, y7 + shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/6, y7 - shape_height/2);

    fill (205,91,69);
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 - shape_height/2, x7, y7 - shape_height/2);   
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 + shape_height/2, x7, y7 + shape_height/2);   
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 + shape_height/2, x7, y7 + shape_height/2);
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 - shape_height/2, x7, y7 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (253,217,181);
    quad (x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2);

    strokeWeight (1.5);
 
    line (x7 - shape_width/10, y7, x7 + shape_width/10, y7);
    line (x7, y7 - shape_height/10, x7, y7 + shape_height/10);
    line (x7 - shape_width/20, y7 - shape_height/20, x7 + shape_width/20, y7 + shape_height/20);
    line (x7 + shape_width/20, y7 - shape_height/20, x7 - shape_width/20, y7 + shape_height/20);

    circle (x7 - shape_width/10, y7, 4);
    circle (x7 + shape_width/10, y7, 4);
    circle (x7, y7 - shape_height/10, 4);
    circle (x7, y7 + shape_height/10, 4);

    circle (x7 - shape_width/20, y7 - shape_height/20, 4);
    circle (x7 + shape_width/20, y7 + shape_height/20, 4);
    circle (x7 + shape_width/20, y7 - shape_height/20, 4);
    circle (x7 - shape_width/20, y7 + shape_height/20, 4);   
}
Leave a Reply Cancel reply
