let palette let bodyRadiusX 60 let bodyRadiusY 80 let bodyRadiusZ 60 l

let palette;
let bodyRadiusX = 60;
let bodyRadiusY = 80;
let bodyRadiusZ = 60;

let img;
function preload() {
  img = loadImage('wood.jpg');
}

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw() {
   background(200);
   //
   rotateX(-mouseY / 50);
   rotateY(-mouseX / 50);

  // LIGHT
  //  rotateX(23.9);
  //  rotateY(0.4);
  //  rotateZ(0.4);
  //  let locX = mouseX - width / 2;
  //  let locY = mouseY - height / 2;
  //  pointLight(255, 255, 255, locX, locY, 50);
  //  let c = new Color(251, 251, 10);
  //  directionalLight(255, 255, 255, -locX, -locY, 20);
  texture(img);
   drawPalette();
   showOrigin();
}

function drawPalette() {
  fill(100); 
  paletteWidth = 100;
  paletteHigh = 10;
  paletteDepth = 200;
  // TEXTURE
  // texture(img);
  box(paletteWidth, paletteHigh, paletteDepth);
  
  offset = 10;
  width = 35;
  length = 10;
  depth = 35;


  push();
    push();
      translate(width - offset, 1, (-paletteDepth / 2) + offset + (width / 2));
      fill(255, 0, 0);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(255, 141, 17);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(255, 230, 0);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(0, 165, 255);
      box(width, length, depth);
    pop();

    push();
      translate(-width + offset, 1, (-paletteDepth / 2) + offset + (width / 2));
      fill(39, 26, 255);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(0, 255, 33);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(186, 7, 232);
      box(width, length, depth);

      translate(0, 0, depth + offset);
      fill(254, 241, 254);
      box(width, length, depth);
    pop();
  pop();
}

function showOrigin() {
  stroke(0, 0, 255);
  line(0, 0, 0, 200, 0, 0);
  stroke(255, 0, 0);
  line(0, 0, 0, 0, 200, 0);
  stroke(0, 255, 0);
  line(0, 0, 0, 0, 0, 200);
  stroke(0);
}