// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 5
var d = 40;
function setup() {
createCanvas(640, 640);
background("LightSalmon");
}
function draw() {
colorMode(RGB);
colorA1 = color(0,1,16);
colorA2 = color(84,137,207);
colorB1 = color(62,141,99);
colorB2 = color(229,188,47);
colorC1 = color(226,51,50);
colorC2 = color(254,251,248);
var gapY = d * sqrt(3) / 2;
//differnce of x values between two adjacent
var gapX = d * 3 / 2;
//differnce of y values between two adjacent hexagon left corners
for (var j = -10; j < 15; j++) {
//to achieve diagonal rows and collums we need two x variables and y variables
var X = 18 + gapX * j;
var Y = gapY * j;
for (var i = -10; i < 15; i++) {
cubeX = X + gapX * i;
//x coordinates of hexagon
cubeY = Y - gapY * i;
//y coordinates of hexagon
lerpA = lerpColor(colorA1,colorA2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
lerpB = lerpColor(colorB1,colorB2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
lerpC = lerpColor(colorC1,colorC2,dist(cubeX,cubeY,width,height)/ dist(0, 0,width,height));
cube(cubeX, cubeY,lerpA,lerpB,lerpC);
}
//draw cube
}
noLoop();
}
function rhombus(x,y,angle){
//create function that draws rhombus at x,y
//rotate by angle
var h = d * sqrt(3)/2;
//height of rhombus
push();
translate(x, y);
rotate(radians(angle));
shearX(radians(30));
//shifts a rectangle into a parallelogram by 30 degrees
rect(0, 0, d, h);
pop();
}
function cube(x,y,lerpA,lerpB,lerpC){
//create function that combines three rhombuses into a cube
stroke(255);
strokeWeight(1);
fill(lerpA);
rhombus(x,y,0);//draws darkest rhombus
fill(lerpB);
rhombus(x,y,300);//draws lightest rhombus
push();
translate(1.50 * d, d * sqrt(3)/2);
fill(lerpC);
rhombus(x,y,240);//draws second darkest rhombus
pop();
}
I wanted to do this project by using hexagons as the basic tiles because they merge so well. I used value because I liked how they conveyed space so well.