Boxcilation Rainbow
const w = 800;
const h = 800;
let leftColor;
let topColor;
let frontColor;
let areaWidth = 500;
let areaDepth = 500;
let shapeCount = 21;
let increment = 0.1;
let increment2 = 0.0;
let colorIncrement = 0.01;
let bw = areaWidth / shapeCount;
let bd = areaDepth / shapeCount;
let bh = 40;
let minH = 40;
let maxH = 250;
function setup() {
let canvas = createCanvas(800, 800, WEBGL);
canvas.parent("sketch-holder");
ortho(-width / 2, width / 2, -height / 2, height / 2, -2000, 2000);
colorMode(HSB, 1.0, 1.0, 1.0, 1.0);
leftColor = color(0.0, 1.0, 1.0, 1.0);
topColor = color(0.33, 1.0, 1.0, 1.0);
frontColor = color(0.666, 1.0, 1.0, 1.0);
}
function axisLights() {
// X axis light
//directionalLight(colorX, 0.25, -0.25, -0.25);
// Y axis light
//directionalLight(colorY, 0, 1, 0);
// Z axis light
//directionalLight(colorZ, -0.25, -0.25, -0.25);
ambientLight(255);
}
function drawAxis() {
// Draw X axis
strokeWeight(2);
stroke(255, 0, 0);
line(350, 0, 0, -350, 0, 0);
push();
translate(350, 0, 0);
rotateZ(-HALF_PI);
noStroke();
cone(10, 50, 10, true);
pop();
// Draw Y axis
stroke(0, 0, 0);
line(0, 350, 0, 0, -350, 0);
push();
translate(0, 350, 0);
rotateY(-HALF_PI);
noStroke();
cone(10, 50, 10, true);
pop();
// Draw Z axis
stroke(0, 0, 255);
line(0, 0, 350, 0, 0, -350);
push();
translate(0, 0, 350);
rotateX(HALF_PI);
noStroke();
cone(10, 50, 10, true);
pop();
}
function mapRange(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
function drawShape(width, height, depth, x, y, z){
let w = width;
let h = height;
let d = depth;
// Left
ambientMaterial(leftColor);
push();
translate(x - (w/2), y, z);
rotateY(HALF_PI);
plane(d, h);
pop();
// Front
ambientMaterial(frontColor);
push();
translate(x, y, z + (d/2));
plane(w, h);
pop();
// Top
ambientMaterial(topColor);
push();
//translate(x, (-h/2) + y, 0);
translate(x, -h/2, z);
rotateX(HALF_PI)
plane(w, d);
pop();
}
function distance(x0, y0, z0, x1, y1, z1){
return Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2) + Math.pow(z1 - z0, 2));
}
function draw() {
background(0);
camera(-w/2, -w/2, w/2, 0, 0, 0, 0, 1, 0);
//drawAxis();
//axisLights();
ambientLight(255);
noStroke();
for (let z = -(floor(shapeCount / 2)); z < (floor(shapeCount / 2)) + 1; z++) {
for (let x = -(floor(shapeCount / 2)); x < (floor(shapeCount / 2)) + 1; x++) {
let locX = x * (areaWidth / shapeCount);
let locY = 0;
let locZ = z * (areaDepth / shapeCount);
let shapeDistance = distance(0, 0, 0, locX, locY, locZ);
let normDistance = mapRange(shapeDistance, 0, areaWidth, 0, 1);
let d = normDistance * TWO_PI * 2;
bh = mapRange(sin(d + increment), -1, 1, minH, maxH) ;
leftColor = color(((normDistance + colorIncrement ) % 1), 1.0, 1.0, 1.0);
topColor = color((((normDistance + colorIncrement) % 1 )), 1.0, 1.0, 1.0);
frontColor = color((((normDistance + colorIncrement) % 1)), 1.0, 1.0, 1.0);
drawShape(bw, bh, bd, locX, locY, locZ, leftColor, frontColor, topColor);
}
}
//increment += 0.1;
increment += (TWO_PI / 60);
colorIncrement += (1 / shapeCount) * 0.1;
increment2 += 0.0001;
noLoop();
}