function setup() {
createCanvas(600,600);
}
function draw() {
background(51,0,17);
var xOG = 0;
var yOG = 0;
var xBetween = 105;
var yBetween = 90;
var offset = xBetween/2;
for (var y = 0; y < 9; y++){
if(y==2||y==4||y==6||y==8){ //offsets every other two lines up
yOG=yOG-35;
}
if (y%2==0){
for (var x = 0; x < 7; x++){
var py = yOG + y * yBetween;
var px = xOG + x * xBetween;
hexagon(px,py);//call hexagon function
}
}
if (y%2==1){ //offsets every other line to the to the right
for (var x = 0; x < 9; x++){
var py = yOG + y * yBetween;
var px = xOG + x * xBetween+offset;
hexagon(px,py);
}
}
}
var rxOG=-61.7;
var ryOG=70;
var rxBetween=35;
var ryBetween=145;
for (var ry = 0; ry<5; ry++){//draws a series of orange rectangles that covers parts of the hexagon
for(var rx = 0; rx<20; rx++){
var ty = ryOG + ry * ryBetween;
var tx = rxOG + rx * rxBetween;
noStroke();
fill(206,105,16);
if(rx%3==0){
rect(tx,ty,0,0);
}
else{
rect(tx,ty,17.7,45);
}
}
}
var rrxOG=-8.9;
var rryOG=60;
var rrxBetween=105;
var rryBetween=145;
for (var rry = 0; rry<5; rry++){//draws a series of dark maroon rectangles that also covers part of the hexagon
for(var rrx = 0; rrx<10; rrx++){
var tty = rryOG + rry * rryBetween;
var ttx = rrxOG + rrx * rrxBetween;
fill(51,0,17);
rect(ttx,tty,17.7,68);
}
}
}
function hexagon(x,y){ //hexagon function
var r = 30*PI/180;
push();
translate(x,y);
rotate(r);
noStroke();
fill(51,0,17);
polygon(0,0,70,6);//call polygon function
fill(206,105,16);
polygon(0,0,50,6);
fill(51,0,17);
polygon(0,0,30,6);
fill(135,17,58);
polygon(0,0,15,6);
pop();
}
function polygon(x, y, radius, sides) {//can produce polygons with various numbers of sides and various sizes
var angle = TWO_PI / sides;
beginShape();
for (var a = 0; a < TWO_PI; a += angle) {
var sx = x + cos(a) * radius;
var sy = y + sin(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}
I was inspired by the imagery of the floor pattern in the movie, “The Shining,” and wanted to recreate it. I learned a lot and this project helped me to reinforce my knowledge of loops.