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