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();

}

}

Leave a Reply