Category: Project-05-Wallpaper

Project 5: Wallpaper

I was inspired to design a Coptic-inspired pattern for this project. I am Coptic Orthodox Christian. Coptic means Egyptian and our art and our churches are filled with beautiful wooden engravings. I wanted to design a pattern inspired by these wooden engravings and see what I could learn about how they are created. I realized that Coptic patterns consist of one design that when placed next to itself creates another design. This pattern forms three different crosses!

Process Sketch/Reflection

Coptic wallpaper sketch
// Sandy Youssef; 
//section D; 
//syoussef@andrew.cmu.edu;
//Project-05;
function setup() {
    createCanvas(500, 600);
    background(156, 121, 90);
  
}

function draw() {
    crossOne(0, 0); // calling the function
    // loop to create crossOne pattern, since crossOne calls crossTwo, they are linked
    for (var y = 1; y <= height; y += 90) {
        for (var x = 1; x <= width; x += 90){ 
           crossOne(x-1, y-1);
    }
    }

    
}
function crossOne (x, y) {  
    push();
    translate(x,y);  
    fill(156, 121, 90);
    stroke(5);
    var x = 50;
    var y = 29;
    push();
    rectMode (CENTER);
    rect(50, 50, 50, 50);
    rect(x, y, 20, 8)
    // left rect
    pop();
    push();
    translate(33,40);
    rotate(radians(90));
    rect(0, 0, 20, 8);
    // right rect
    pop();
    push();
    translate(75,40);
    rotate(radians(90));
    rect(0, 0, 20, 8);
    //bottom rect
    pop();
    push();
    translate(40,67);
    rect(0, 0, 20, 8)
    pop();
    // top pointy rect
    fill(115,75,42); //HEREEEEE
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    // left pointy rect
    push();
    translate (45, 0);
    rotate(radians(90));
    noStroke();
    rect(45, 19, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // right pointy rect 
    push();
    translate (100, 0);
    rotate(radians(90));
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // bottom pointy rect
     push();
    translate (0, 54.3);
    noStroke();
    rect(45, 20, 10, 6);
    stroke(5);
    line(45, 20, 45, 25);
    line(55, 20, 55, 25);
    pop();
    // vertical bottom line in center
    push();
    translate(0,0);
    stroke(5);
    line(45,34, 45, 67);
    line(55, 34, 55, 67);
    pop();  
    // horiz line in center
    line(33,45, 67, 45);
    line(33, 55, 67, 55);
    // same color rectangles to hide lines in center
    push();
    noStroke();
    rect(30,45, 40,9);
    rotate(radians(90));
    rect(30,35, 40,9);
    pop();

    // little circles
    fill(115,75,42);
    push();
    stroke(5);
    translate(25,25);
    ellipse(7,7, 5);
    translate(35,35);
    ellipse(7,7,5);
    pop();
    push();
    stroke(5);
    translate (60,25);
    ellipse(7,7,5);
    pop();
    push();
    stroke(5);
    translate(25, 60);
    ellipse(7,7,5);
    crossTwo (0,0); // calling crossTwo function
    pop();
    pop();
 
function crossTwo (x2, y2) {
    rectMode(CENTER); 
    //noStroke();
    fill(115,75,42);
    rect(25, 35, 10, 30); // vertical bottom connection
    push();
    translate (x-50,y-119); // vertical top connection
    rect(25, 35, 10, 30);
    pop(); 
    push();
    translate(15, -35);
    rotate(radians(90)); // horizontal connectinon
    rect(25, 35, 10, 30);
    pop();
    // diamond cross in center
    push();
    stroke(5);
    rotate(radians(45));
    rect(13,40, 10,10);
    translate(10,10);
    rect(13,40, 10,10); // bottom 
    translate(-20,-20);
    rect(13,40, 10,10); // top 
    translate(0,20); // left 
    rect(13,40, 10,10);
    translate(20, -20);
    rect(13,40, 10,10);
    pop();

}

}

Project 05 – Wallpaper – srauch

Here is my palm frond wallpaper. Vibes.

sketch
//sam rauch, section B, srauch@andrew.cmu.edu, project 05
//this code makes a wallpaper pattern with overlapping palm leaves

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

function draw() {
    background(16, 28, 48);

    //drawing pattern
    var direction = 1 //flips direction leaves are facing as they're drawn in the j loop
    for (var i = 0; i <= width+110; i+=110){
        for (var j = 0; j<= height+100; j+=70){
            stem(i,j, 45*direction);
            direction = direction*-1;
        }
    }

    noLoop();
}

function portLeaf(a,b,radius, spin){ //make left leaves. must be called at 0,0
    push();
    translate(a,b);
    rotate(radians(spin));
    noStroke();

    push(); //bottom half
    fill(20, 50, 23);
    translate(a-(cos(radians(70))*radius), b-(sin(radians(70))*radius));
    arc(0, 0, radius*2, radius*2, radians(70), radians(110), CHORD);
    pop();

    push(); //top half
    fill(37, 87, 42); 
    translate(a+(cos(radians(250))*radius), b-(sin(radians(290))*radius));
    arc(0,0, radius*2, radius*2, radians(250), radians(290), CHORD);
    pop();

    pop();
}

function starLeaf(a,b,radius,spin) { //make right leaves. must be called at 0,0
    push();
    translate(a,b);
    rotate(radians(spin));
    noStroke();

    push(); //bottom half
    fill(20, 50, 23);
    translate(a+(cos(radians(70))*radius), b-(sin(radians(70))*radius));
    arc(0, 0, radius*2, radius*2, radians(70), radians(110), CHORD);
    pop();

    push(); //top half
    fill(37, 87, 42);
    translate(a-(cos(radians(250))*radius), b-(sin(radians(290))*radius));
    arc(0,0, radius*2, radius*2, radians(250), radians(290), CHORD);
    pop();

    pop();
}

function stem(stemX, stemY, spin) {//make a stem, and place leaves along it 
    push();
    translate(stemX, stemY);
    rotate(radians(spin));

    //leaves at the tip
    portLeaf(0,0,50,60);
    starLeaf(0,0,50,-60);
    portLeaf(0,0,50,80);
    starLeaf(0,0,50,-80);

    //put leaves along the stem
    var radius = 45;
    for(var i = 0; i<100; i+=10){
        push();
        translate(0,i);
        portLeaf(0,0,radius, 30);
        starLeaf(0,0,radius,-30);
        radius += 3;
        pop();
    }

    //line for stem
    stroke(20, 60, 25);
    strokeWeight(3);
    line(0,0, 0, 100);

    pop();
}

Project 05

Inspired by the “Evil Eye”, project 5 illustrates a patterned wallpaper with celestial elements and different colored eyes. I enjoyed designing the pattern 🙂

sketch
//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project-05

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

function draw() {
    background("lightyellow");

    //eye1 nested loop
    for(var x = 100; x < width; x+=200){
        for(var y = 75; y < height; y += 150){
        eye1(x,y);
        }
    }

    //eye2 nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = -147; y < height+200; y += 149){
        eye2(x,y);
        }
    }

    //star nested loop
    for(var x = -100; x < width+180; x+=200){
        for(var y = -150; y < height+140; y += 150){
        fill(4,158,177);
        star1(x,y);
        }
    }

    //moon nested loop
    for(var x = -200; x < width+200; x+=200){
        for(var y = 75; y < height; y += 150){
        moon(x,y);
        }
    }




}

function eye1(x,y){
    //outside shape
    fill("white");
    stroke(1,35,133);
    strokeWeight(3);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(255,234,172);//yellow
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(4,158,177);
    ellipse(x,y,43,43);

    //array lines
    stroke(255,234,172);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}

function eye2(x,y){
    //outside shape
    fill("white");
    stroke(4,158,177);
    strokeWeight(2);
    beginShape();
    vertex(x-45,y);
    bezierVertex(x-5,y-30,x+5,y-30,x+45,y);
    bezierVertex(x+5,y+30,x-5,y+30,x-45,y)
    endShape();

    //innershape
    fill(4,158,177);//lightblue
    noStroke();
    beginShape();
    vertex(x-35,y);
    bezierVertex(x,y-20,x,y-20,x+35,y);
    bezierVertex(x,y+20,x,y+20,x-35,y)
    endShape();

    //iris outer
    noStroke();
    fill(255,234,172);
    ellipse(x,y,43,43);

    //array lines
    stroke(4,158,177);
    strokeWeight(2);
    line(x,y+17,x,y-17);
    line(x+17,y,x-17,y);
    line(x-14,y-14,x+14,y+14);
    line(x+14,y-14,x-14,y+14);

    //inner iris
    noStroke();
    fill(1,35,133);
    ellipse(x,y,25,25);
    fill("white");
    ellipse(x,y,5,5);
}


function star1(x,y){
noStroke();
beginShape();
vertex(x-3, y+2);
vertex(x, y+20);
vertex(x+3, y+2);
vertex(x+12, y);
vertex(x+3, y-2);
vertex(x, y-20);
vertex(x-3, y-2);
vertex(x-12, y);
endShape();
}

function moon(x,y){
    fill(239,172,59);
    noStroke();
    beginShape();
    vertex(x-15,y-5);
    bezierVertex(x-5,y,x+5,y,x+15,y-5);
    bezierVertex(x+5,y+10,x-5,y+10,x-15,y-5)
    endShape();

}

Project 5: Wallpaper

A wall paper of metacircles!!!

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 * Project-05
 *
 * This program draws wallpapaer
 */

//set circle sizes
var sizeCircle=50;


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

function draw() {
//array for the metacircles (both directions)
    for (var x=0; x<=width; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            metaCircle(x,y,sizeCircle);
            metaCircle2(x+sizeCircle,y+sizeCircle,sizeCircle);
        }
    }

//filling cirlces that cover the gap between shapes
    for (var x=sizeCircle; x<=width+sizeCircle; x+=sizeCircle*2)
    {
        for (var y=0; y<=height; y+=sizeCircle*2)
        {
            //change color of strokes and fills
            fill(0);
            stroke(0);
            strokeWeight(sizeCircle/8);
            circle(x,y,sizeCircle/3);
            circle(x-sizeCircle,y+sizeCircle,sizeCircle/3);
        }
    }
//noLoop() to prevent refreshing as the patterns is all ramdom
    noLoop();

    
}

// first type of metacircle
function metaCircle(x,y,size,c) {
    //set random values from 0 to 2 to get 3 different colors for the shape
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    //two circles as base
    strokeWeight(0);
    circle(x+size/2,y-size/2,size);
    circle(x-size/2,y+size/2,size);

    //one rotated square fill the middle part 
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    //drawing the outline with 4 arcs
    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y-size/2, size, size, 0, HALF_PI);
    arc(x+size/2, y+size/2, size, size, PI, PI+HALF_PI);
    arc(x+size/2, y-size/2, size, size, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size, size, 0, PI+HALF_PI);

    //patterns 
    stroke(25);
    strokeWeight(size/16);
    arc(x-size/2, y+size/2, size/3*2, size/3*2, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3*2, size/3*2, -PI, HALF_PI);
    arc(x-size/2, y+size/2, size/3, size/3, 0, PI+HALF_PI);
    arc(x+size/2, y-size/2, size/3, size/3, -PI, HALF_PI);
}

//second type of metacircle same as above (no further explanations)
function metaCircle2 (x,y,size,c) {
    var guess = Math.floor(Math.random()*3);
    if (guess==0)
    {
        fill (255,125,125,255);
    }
    else if (guess==1)
    {
        fill (125,255,125,255);
    }
    else if (guess==2)
    {
        fill (125,125,255,255);
    }
    strokeWeight(0);
    circle(x+size/2,y+size/2,size);
    circle(x-size/2,y-size/2,size);
    rectMode(CENTER);
    push();
    translate(x,y);
    rotate(1/4*Math.PI)
    rect(0,0,size/2,size/2);
    pop();

    stroke(0);
    strokeWeight(size/8);
    noFill();
    arc(x-size/2, y+size/2, size, size, -HALF_PI, 0);
    arc(x+size/2, y-size/2, size, size, HALF_PI, PI);
    arc(x+size/2, y+size/2, size, size, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size, size, HALF_PI, 2*PI);

    stroke(220);
    strokeWeight(size/16);
    arc(x+size/2, y+size/2, size/3*2, size/3*2, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3*2, size/3*2, HALF_PI, 2*PI);
    arc(x+size/2, y+size/2, size/3, size/3, 0, -HALF_PI, PI);
    arc(x-size/2, y-size/2, size/3, size/3, HALF_PI, 2*PI);
}

Wallpaper Project

sketch
//Evette LaComb 
//Section D 

var sect = 100; // section size 

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

function draw() {
    background(225, 200, 165);
    for (var y = -50; y < height +60; y += 100){
        for (var x = 0; x < width +60; x += 100){
        flower(x, y);
        }
    }
    noLoop();
}


function flower(x, y){
    push();
    translate(x, y);

// boarder details 
    fill(110, 40, 10); //brown  
    noStroke();
    rect(0, 0, 7, sect);
    rect(sect -7, 0, 7, sect);
    noStroke();
    arc(100, 25, 25, 30, radians(90), radians(270), OPEN);
    strokeWeight(2);
    stroke(190, 80, 10); // orange 
    line (15, 0, 15, sect);
    strokeWeight(3);
    line (10, 0, 10, sect); 
    stroke(110, 40, 10); //brown 
    line(50, 90, 50, 150);

//vines 
    noStroke();
    noFill();
    strokeWeight(5);
    stroke(30, 70, 35); // dark green 
    arc(50, 0, 50, 50, radians(90), radians(180), OPEN);
    arc(50, 50, 50, 50, radians(270), radians(90), OPEN);
    arc(50, 100, 50, 50, radians(180), radians(360), OPEN);
    strokeWeight(4);
    arc(50, 100, 50, 25, radians(180), radians(25), OPEN);
    strokeWeight(2);
    arc(50, 100, 47, 37, radians(180), radians(360), OPEN);

//center dimond detail 
    push();
    fill(30, 70, 35); // dark green 
    translate(50, 50);
    rotate(radians(45));
    rectMode(CENTER);
    rect(0, 0, 27, 27);
    pop();
    fill(190, 80, 10); // orange 
    ellipse(50, 50, 27, 27);
    fill(225, 200, 165);
    ellipse(50, 50, 19, 19);

    pop();

}

Project 05

Wallpaper Art – Floral pattern

sketch
// Theresa Ye
// Section E
// thye@andrew.cmu.edu
// Project-05

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

function draw() {
     for (var x = 0; x < 450; x += 25) {
        for (var y = 0; y < 650; y += 30) {
            drawLeavesSmall(x,y);
        }
    }
    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            stroke(215,200,204)
            fill(176,142,149);
            ellipse(x,y,45)
        }
    }

    for (x = 25; x < 390; x += 50) {
        for (y = 25; y < 600; y += 60) {
            drawLeaves(x,y);
            drawFlower(x,y);
        }
    }
}

function drawFlower (x,y) {
    push();
    translate(x,y);
    scale(0.5)
    fill(188,164,170);
    stroke(215,200,204);
    strokeWeight(0.5);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(188,164,170);
    rotate(radians(120));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-10,-16);
    curveVertex(-15,-20);
    curveVertex(0,-30);
    curveVertex(25,-24);
    curveVertex(30,-20);
    curveVertex(28,-10);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    fill(161,127,136);
    ellipse(4,-10,18,15);
    fill(255);
    stroke(255);
    ellipse(0,0,10);
    pop();
}

function drawLeaves(x,y) {
    push();
    translate(x,y);
    scale(0.5);
    stroke(215,200,204)
    fill(176,142,149);
    ellipse(0,0,45)
    fill(141,99,110);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

function drawLeavesSmall(x,y) {
    push();
    translate(x,y);
    scale(0.25);
    stroke(215,200,204)
    fill(239,233,235);
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(90));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    rotate(radians(145));
    beginShape();
    curveVertex(0,0);
    curveVertex(0,0);
    curveVertex(-2,-35);
    curveVertex(-16,-50);
    curveVertex(-30, -55);
    curveVertex(-50,-60);
    curveVertex(-50,-60);
    curveVertex(-40,-28);
    curveVertex(-20,-8);
    curveVertex(0,0);
    curveVertex(0,0);
    endShape();
    pop();
}

Project 5: Wallpaper


sketch

In this project I tried to create a set of repetitive diamond geometry and also a glowing effect that makes it look like it’s in 3D.

sketch

var r=50

function setup() {
    createCanvas(800,600);
    background(220);
}

function draw() {
    drawingContext.shadowBlur=20;
    drawingContext.shadowColor=color(20);   //glowing effect and black shadow
    noStroke();

    //first set of geometries
    for(var col=0;col<4;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //second set of geometries
    for(var col=4;col<8;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }

    //third set of geometries
    for(var col=8;col<12;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondOne();
            pop();
        }
    }

    //fourth set of geometries
    for(var col=12;col<16;col++){
        for(var row=0;row<20;row++){
            push();
            translate(col*r,(row-2)*r);
            diamondColor(row);
            diamondTwo();
            pop();
        }
    }    
    

}


//first type of diamond
function diamondOne(){
    quad(0,0,r,r,r,2*r,0,r);
}


//second set of diamond
function diamondTwo(){
    quad(0,r,r,0,r,r,0,2*r);

}


//coloring the diamonds
function diamondColor(row){
    if(row%8==0){
        fill(22,76,122);
    }else if(row%8==1){
        fill(254,252,204);
    }else if(row%8==2){
        fill(255,190,14);
    }else if(row%8==3){
        fill(226,92,3);
    }else if(row%8==4){
        fill(119,147,172);
    }else if(row%8==5){
        fill(1,24,66);
    }else if(row%8==6){
        fill(224,28,1);
    }else if(row%8==7){
        fill(255,141,6);
    }
}

Project -05: Wallpaper

I wanted my wallpaper to look 3D and look like if the light was shining from the top left side!

sketch
function setup() {
    createCanvas(400, 390);
    background(0);
}

function draw() {
    rotateGrid(-50,0); //rotate's final grid
}

function drawTriangleOne(x,y) { //draws Triangle 1
    strokeWeight(0.1);
    fill(150); //Triangle 1
    triangle(x, y, x + 50, y, x + 25, y + (sqrt(1875))/2);
    fill(80)
    triangle(x + 50, y, x + 25, y + sqrt(1875), x + 25, y + (sqrt(1875))/2);
    fill(230)
    triangle(0, 0, x + 25, y + (sqrt(1875))/2, x + 25, y + sqrt(1875));
}

function drawTriangleTwo(x,y) { //draws Triangle 2
    fill(200); //Triangle 2
    triangle(x + 50, y, x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2); 
    fill(150);
    triangle(x + 50, y, x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
    fill(80);
    triangle(x + 25, y + (sqrt(1875)), x + 50, y + (sqrt(1875))/2, x + 75, y + sqrt(1875));
}

function drawFlipTriangleOne(x,y) { //Draws Triangle 3 
    push();
    translate(-25, sqrt(1875));
    drawTriangleTwo(x,y);
    pop();
}

function drawFlipTriangleTwo(x,y) { //Draws Triangle 4
    push();
    translate(25, sqrt(1875));
    drawTriangleOne(x,y);
    pop();
}

function drawSingleRowTriangles(x,y) { //Draws First Row of Triangles
    for (var i = 0; i < 8; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        translate(50,0);
    }
    
}

function drawFourStartingTriangles(x,y) { //Groups First Four Starting Triangles
    for (var i = 0; i < 9; i++) {
        drawTriangleOne(x,y);
        drawTriangleTwo(x,y);
        drawFlipTriangleOne(x,y);
        drawFlipTriangleTwo(x,y);
    }
}

function drawTwoRowTriangles(x,y) { //Draws First 2 Rows of Triangles
    push();
    for (var i = 0; i < 11; i++) {
        drawFourStartingTriangles(x,y);
        translate(50,0);
    }
    drawTriangleOne(x,y);
    drawFlipTriangleOne(x,y);
    pop();
}

function drawTriangleGrid(x,y) { //Uses for loops to create entire Triangle Grid
    push();
    for (var i = 0; i < 6; i++) {
        drawTwoRowTriangles(x,y);
        translate(0, 2*sqrt(1875));
    }
    drawSingleRowTriangles(x,y);
    drawTriangleOne(x,y);
    drawTriangleTwo(x,y);
    pop();
}

function rotateGrid(x,y) {
    angleMode(DEGREES);
    rotate(30);
    translate(0,-200);
    drawTriangleGrid(x,y);
}

Project 05: 1950’s Atomic-Era Wallpaper!

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

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

Project 05 Wallpaper

For making my wallpaper, I first drew the sketch below where I wanted there to be a striped background, flowers, and a curving dotted line behind the flowers that would connect them vertically. Once I achieved this, I adjusted some things like making the flowers have more layers and, instead of one stripe behind each flower column, I decided I liked many stripes better.

project5 

// Rachel Legg / rlegg / Section C

function setup() {
    createCanvas(600, 600);
    background(175, 190, 220);      
}

function draw() {
    //blue stripes behind
    for(var x = 10; x <= width; x += 100){
        stripeBlue(x, 0);

    }

    // repeated curving line
    for (var y = 0; y < height + 20; y += 20){
        for(var x = 1; x < width; x += 2){
            noStroke();
            fill(255, 255, 224);
            circle((50 * x) - 40 * cos(radians(y * 1.85)), y + 5, 10);
        }
    }

    //flower
    for (var y = 40; y <= height; y = y + 100){
        for (var x = 50; x <= width; x += 100){
            flowerBlue(x, y);
        }
    }

noLoop();

}

function stripeBlue(x, y){
    noStroke();
    fill(119, 158, 203, 40);                   
    rectMode(CENTER);
    rect(x + 40, y + 300, 10, 600);
    rect(x + 20, y + 300, 5, 600);
    rect(x + 60, y + 300, 5, 600);
    rect(x + 0, y + 300, 5, 600);
    rect(x + 80, y + 300, 5, 600);
    //blue flowers every 100

}

function flowerBlue (x, y){
    //flower
    fill(185, 200, 220); 
    stroke(255, 255, 224);
    strokeWeight(0.75);
    ellipse(x + 8, y + 8, 35);
    ellipse(x - 8, y + 8, 35);
    ellipse(x + 8, y - 8, 35);
    ellipse(x - 8, y - 8, 35);
    //triple layer
    ellipse(x + 8, y + 8, 25);
    ellipse(x - 8, y + 8, 25);
    ellipse(x + 8, y - 8, 25);
    ellipse(x - 8, y - 8, 25);
    //double layer
    ellipse(x + 8, y + 8, 15);
    ellipse(x - 8, y + 8, 15);
    ellipse(x + 8, y - 8, 15);
    ellipse(x - 8, y - 8, 15);
    //center
    fill(255, 255, 224);         //light yellow
    ellipse(x, y, 10);
}