Project-05-Wallpaper – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 05 – Wallpaper

I wanted to make a wallpaper that looked like a stitched flower quilt pattern.

//SRISHTY BHAVSAR
//15-104 PROJECT 05 
//SECTION C



// COLORS
var w = 255 // white
var lbrown = (196, 164, 132); // light brown

// lengths

var s = 50 //sqare



function setup() {
    createCanvas(200, 20);
    background(194,197,201);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    createCanvas(600,600);
    background(194,197,201); //light blue


    // RED DIAMOND LOOP
    push();
    translate(300,-300);
    rotate(radians(45)); // rotates squares to be diamonds
    for( var x = 0; x < 1200; x+= s/2) {
        for( var y = 0; y < 1200; y+= s/2){
            reddiamonds(x,y);
        } 
    }

    // FLOWER DIAMOND LOOP
    pop();
    push();
    translate(265,-300);
    rotate(radians(45));
    noFill();
    for( var i = 0; i < 2000; i+= s) {
        for( var j = 0; j < 2000; j+=s) {
            flowerdiamonds(i,j);
            //square(i,j,s);
        } 
    }

    pop();

}

function reddiamonds(x,y) {
    translate(x,y); // origin moves along row
    push();
    stroke(183, 113, 121, 70); // light red
    strokeWeight(2);
    noFill();
    square(x,y,50);
    pop();
    translate(-x,-y); // origin moves along row
}

function flowerdiamonds(i,j) {
    // lacy white dot rim of elipses that trace the diamond
    noFill();
    stroke(w);
    strokeWeight(1);
    translate(i,j);
    // create 4 lacy rims that create a square
    push();
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }
    rotate(radians(90));
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }

    translate(0, -50);
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }
    translate(50,50);
    rotate(radians(-90));
    for (var x = 0; x < 60; x +=10) {
        for(var y = 0; y <10; y += 10) {
            ellipse(x,y, 6, 4);
        }
    }

    pop();

    //FLOWER STEM
    push()
    translate(-4,-30);
    rotate(radians(-40))
    noFill();
    stroke(w);
    strokeWeight(1)
    curve(6, 30, 59, 50, 60, 80, 40, 40);
    pop()


    //FLOWER PETALS
    push()
    strokeWeight(1);
    fill(196, 164, 132); // dark blue
    translate(6,6);
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(6,-30);
    ellipse(10,18,13,9);
    translate(-1,-67);
    rotate(radians(72));
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(-23,-71);
    ellipse(10,18,13,9);
    rotate(radians(72));
    translate(-8,-77);
    ellipse(10,18,13,9);
    pop()
    translate(-i,-j);

}

P-05 Wallpaper

Took inspiration from a tile pattern for this project.

sketch

// Bridget Doherty, bpdohert, 104 Section C


// global color variables
var greyValue = 150;
var bckg = 240;
var lineCol = 0;

function setup() {
    createCanvas(550, 380);
    background(bckg);
}

function draw() {
    for (var i=50; i<=height; i+=93) {
        for (var j=50; j<=width; j+=93){
            clover(j, i);
        }
    }
    for (var i=3; i<=width+50; i+=93){
        for (var j=3; j<=height+50; j+=93){
            innerCircle(i, j);
        } 
    }
    noLoop();
}

function clover(x, y){
    var diam1 = 40;
    var diam2 = 31;
    var spacer = 26;

    // clover outer grey section
    strokeWeight(1);
    stroke(lineCol);
    fill(greyValue);
    circle(x, y-spacer, diam1);
    circle(x, y+spacer, diam1);
    circle(x-spacer, y, diam1);
    circle(x+spacer, y, diam1);

    // clover inner white section
    fill(bckg);
    circle(x, y-spacer, diam2);
    circle(x, y+spacer, diam2);
    circle(x-spacer, y, diam2);
    circle(x+spacer, y, diam2);
    noStroke();
    circle(x, y, 41);

    // petals outline
    stroke(lineCol);
    strokeWeight(7);
    line(x-15, y-7, x-7, y-15);
    line(x+15, y-7, x+7, y-15);
    line(x-15, y+7, x-7, y+15);
    line(x+7, y+15, x+15, y+7);

    // lines to complete the clover inner points
    stroke(greyValue);
    strokeWeight(8);
    line(x-12, y-12, x-15, y-15);
    line(x+12, y-12, x+15, y-15);
    line(x-12, y+12, x-15, y+15);
    line(x+12, y+12, x+15, y+15);

    // circles outline
    noStroke();
    fill(lineCol);
    circle(x-7, y-7, 12);
    circle(x+7, y-7, 12);
    circle(x-7, y+7, 12);
    circle(x+7, y+7, 12);

    // grey petals inside clover
    stroke(greyValue);
    strokeWeight(4);
    line(x-15, y-7, x-7, y-15);
    line(x+15, y-7, x+7, y-15);
    line(x-15, y+7, x-7, y+15);
    line(x+7, y+15, x+15, y+7);

    strokeWeight(1);
    fill(greyValue);
    circle(x-7, y-7, 8);
    circle(x+7, y-7, 8);
    circle(x-7, y+7, 8);
    circle(x+7, y+7, 8);
    
}

function innerCircle(x,y){
    var cross = 6;

    // circles in between the clovers
    strokeWeight(1);
    stroke(lineCol);
    fill(greyValue);
    circle(x, y, 61);
    fill(bckg);
    circle(x, y, 50);

    // plus sign in the middle of the circles
    strokeWeight(7);
    stroke(lineCol);
    line(x+cross, y, x-cross, y);
    line(x, y-cross, x, y+cross);
    strokeWeight(4);
    stroke(greyValue);
    line(x+cross, y, x-cross, y);
    line(x, y-cross, x, y+cross);
}

Project 05 / Wallpaper

sketch Download

// Kyli Hilaire - Project 05
// khilaire@andrew.cmu.edu 
// Section B 

var x = 0;
var y = 0;
var beeWidth = 30;
var beeLength = 38;
var stripeY = 0;

function setup() {
    createCanvas(400, 300);
    background(247, 183, 191);
}

function draw() { 
    bgStripes();
    // draw background stripes

    push();
    translate(-45, -18); 
    // move bees in the canvas
    for(x = 0; x <= 500; x += 75) {
        for(y = 0; y <= 400; y += 75) {
            bee(); 
        }
    } pop();
    // draw bees

    for(x = 0; x <= 500; x += 75){
        for(y = 0; y <= 400; y += 75){
            greenCircles();
        }
    } 
    // draw green circles
}

function bee() {
    beeWings();
    beeBody();
}

function beeBody() {
    stroke(245, 242, 158);
    strokeWeight(1);
    fill(255, 255, 188);
    ellipse(x + 50, y + 50, beeWidth, beeLength);
    // yellow oval 
    stroke(80);
    strokeWeight(4);
    line(x + 39, y + 42, x + 61, y + 42);
    line(x + 38, y + 52, x + 62, y + 52);
    line(x + 41, y + 62, x + 59, y + 62);
    // draw bee stripes
    noStroke();
    fill(95)
    triangle(x + 44, y + 68, x + 56, y + 68, x + 50, y + 74);
    // stinger 
}

function beeWings() {
    noStroke();
    fill(255, 255, 240);
    arc(x + 50, y + 50, 65, 50, 11*PI/6, PI/6);
    arc(x + 50, y + 50, 65, 50, 5*PI/6, 7*PI/6);
    // bee wing arcs
    stroke(0);
    strokeWeight(1);
    line(x + 50, y + 50, x + 75, y + 50);
    line(x + 25, y + 50, x + 50, y + 50);
}

function bgStripes() {
    for(let i = 0; i <= 300; i += 10) {
        stroke(255, 251, 236);
        strokeWeight(0.75);
        line(0, stripeY + 2, 400, stripeY + 2);
        stripeY += 16 
        // space lines 16px apart 
    }   
}

function greenCircles() {
    noStroke();
    fill(216, 238, 219);
    circle(x + 14, y + 61, 5);
    circle(x + 20, y + 54, 8);
    circle(x + 22, y + 63, 3);
    // bottom right of bee 

    circle(x + 60, y + 10, 5);
    circle(x + 65, y + 7, 3);
    // upper left of bee
    
    stroke(216, 238, 219);
    strokeWeight(2);
    point(x + 61, y + 3);
    // small point upper left
}

Project 05: 1950’s Atomic-Era Wallpaper!

Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!

sketch Download

// 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);   
}