var halfWidth;
var halfHeight;
var gridAngle = 70;
var randomPositionW;
var randomPositionH;
var sphereSwitchW = true;
var sphereSwitchH = true;
var mobile = false;
var largescreen = false;

function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
randomPositionW = random(0, halfWidth);
randomPositionH = random(0, halfHeight);
halfWidth = width / 2; //600-1000 in desktop
halfHeight = height / 2; //400-600 in desktop
if (halfWidth < halfHeight) {
mobile = true;
}
if (halfWidth > 500) {
largescreen = true;
}}

function draw() {
background(225, 206, 122);

if (mobile) {
camera(halfWidth / 1.2, 500, 1000, halfWidth / 3, 0, 0, 0, -1, 0);
} else {
camera(halfWidth / 1.2, 200, 700, halfWidth / 3, 0, 0, 0, -1, 0);
}

// Group of grids
push();

for (let ggroup = 0.2; ggroup < 1.2; ggroup = ggroup + 0.2) {
rotateX(gridAngle * ggroup);

// Dot lines
push();
for (let xSpace = 0; xSpace < 100; xSpace++) {
noStroke();
fill(102, 78, 76);
rotateY(gridAngle * 0.03);
translate(xSpace * 3, xSpace / 4, xSpace)
if (largescreen) {
sphere(halfHeight / 120);
} else {
sphere(halfHeight / 100);
}}
pop();

// Spinning Arches
push();
rotateX(30);
for (let ySpace = -20; ySpace < 40; ySpace++) {
noStroke();
fill(102, 78, 76);
translate(7, ySpace * 1.5, 0)
box(1, halfWidth / 5, 1);
}
pop();

gridAngle = gridAngle + 0.001;
}
pop();

// Larger Balls
push();
for (let balls = 1; balls < 8; balls++) {
noStroke();
fill(102, 78, 76);
rotateZ(frameCount / 300);
translate(balls * 40, balls * 20, 0);
sphere(balls * 10);
}
pop();

//Yellow Boxes
push();
noStroke();
fill(225, 206, 122);

rotateZ(frameCount / 300);
translate(randomPositionW, randomPositionH, randomPositionH * 1.5);
box(200);

rotateZ(frameCount / 250);
translate(-(randomPositionW * 2), -(randomPositionH * 1.5), -(randomPositionH * 1.8));
box(100);

//Box animation

if (sphereSwitchW) {
randomPositionW = randomPositionW + 1;
} else {
randomPositionW = randomPositionW - 1;
}
if (sphereSwitchH) {
randomPositionH = randomPositionH + 1;
} else {
randomPositionH = randomPositionH - 1;
}
if (randomPositionW == 500) {
sphereSwitchW = false;
}
if (randomPositionH == 500) {
sphereSwitchH = false;
}
if (randomPositionW == -500) {
sphereSwitchW = true;
}
if (randomPositionH == -500) {
sphereSwitchH = true;
}
pop();

//The Sun
push();
var sunShake = random(-10, 10)
noStroke();
fill(243, 238, 195);
if (mobile) {
translate(halfWidth * 1.5, -(halfHeight / 2), -(halfWidth * 3));
sphere(halfHeight);
stroke(243, 238, 195);
noFill();
sphere(halfHeight + 10 + sunShake);
} else if (largescreen){
translate(halfWidth, -(halfHeight), -(halfWidth * 1.5));
sphere(halfHeight/1.3);
stroke(243, 238, 195);
noFill();
sphere(halfHeight/1.3 + 30 + sunShake);
} else {
translate(halfWidth, -(halfHeight / 2), -(halfWidth * 1.5));
sphere(halfHeight);
stroke(243, 238, 195);
noFill();
sphere(halfHeight + 20 + sunShake);
}

pop();

//BG grid
push();
noStroke();
fill(178, 103, 94);
translate(-(halfWidth / 6), 0, -(halfWidth));
for (let bgGrid = 1; bgGrid < 10; bgGrid++) {
translate(-(40 * bgGrid), 0, 20 * bgGrid);
cylinder(30, halfHeight * 8);
}
pop();

//Bottom border
push();
noFill();
stroke(243, 238, 195);
if (mobile) {
translate(0, halfHeight * 0.15, halfWidth * 1.7);
} else {
translate(0, halfHeight * 0.15, halfWidth * 0.5);
}
rotateZ(-90);
cylinder(50, windowWidth * 8);
pop();

//Center white ball
push();
noStroke();
fill(225, 206, 122);
sphere(60);

//Horizon
push();
rotateY(90);
rotateX(90);
noStroke();
//translate(0,0,35);
var horizonColor = color('rgba(183, 168, 134, 0.5)');
fill(horizonColor);
blendMode(EXCLUSION);
plane(10000, 10000);
pop();
}