Project 5: Wallpaper

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

Leave a Reply