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