Rotating 3D object using JavaScript

Question

I am working with WebGL 3D objects within p5.js (JavaScript). I have four somewhat complicated "separate" 3D objects which, when working as planned, will be manipulated with a mouseOver event. Ideally, when a user moves their mouse over one of the isolated objects, the single object will flip on its Y-Axis 180 degrees, and then flip back over when all four have been flipped.

I think my biggest problem is that every example I can find includes the rotate function when/before creating the original 3D object. However, I need it to begin as a still object and only move once the mouseOver event is triggered.

let blueStartR = 144;
let blueStartG = 220;
let blueStartB = 255;

let greenStartR = 147;
let greenStartG = 229;
let greenStartB = 193;

let yelStartR = 249;
let yelStartG = 255;
let yelStartB = 150;

let purpStartR = 200; 
let purpStartG = 240;
let purpStartB = 170;

let swatches = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  //frameRate = 15;
}

function draw() {
  background(195);
  
  //orbitControl();
  
  let swatchOne = new Swatch(-230, purpStartR, purpStartG, purpStartB, 'purple', false);
  swatchOne.id = "purpleSw";
  
  let swatchTwo = new Swatch(-80, blueStartR, blueStartG, blueStartB, 'blue', false);
  swatchTwo.id = "blueSw";
  
  let swatchThree = new Swatch(80, greenStartR, greenStartB, greenStartG, 'green', false);
  swatchThree.id = "greenSw";
  
  let swatchFour = new Swatch(230, yelStartR, yelStartB, yelStartG, 'yellow', false);
  swatchFour.id = "yellowSw";
  
  
  swatches.push(swatchOne);
  swatches.push(swatchTwo);
  swatches.push(swatchThree);
  swatches.push(swatchFour);
  
  for(var i = 0; i < swatches.length; i++){
    drawSwatch(swatches[i]);
    swatches[i].checkOver(mouseX, mouseY);
    //if(swatches[i].over){
    //  
    //}else{
    //  
    //}
  }
}


class Swatch {
  constructor(xTranslate, topColorFinal, topColorSecond, topColorMain, swatchColor, over){
    this.xTranslate = xTranslate;
    this.topColorFinal = topColorFinal;
    this.topColorSecond = topColorSecond;
    this.topColorMain = topColorMain;
    this.swatchColor = swatchColor;
  }
  
  checkOver(mouseX, mouseY){
    if(mouseX > 30 && mouseX < 130 && mouseY > 30 && mouseY < 570){
      //swatches[0].over = true;
      swatches[0].over = true;
      console.log("over purple");
    }
    else{
      swatches[0].over = false;
    }
    if(mouseX > 150 && mouseX < 250 && mouseY > 30 && mouseY < 570){
      swatches[1].over = true;
      console.log("over blue");
    }
    else{
      swatches[1].over = false;
    }
    if(mouseX > 310 && mouseX < 410 && mouseY > 30 && mouseY < 570){
      swatches[2].over = true;
      console.log("over green");
    }
    else{
      swatches[2].over = false;
    }
    if(mouseX > 480 && mouseX < 580 && mouseY > 30 && mouseY < 570){
      swatches[3].over = true;
      console.log("over yellow");
    }
    else{
      swatches[3].over = false;
    }
  }
}

function drawSwatch(SwatchA){
  push();
    noStroke();
    fill('white');
    translate(SwatchA.xTranslate, 0, 0);
    box(100, 550, 2);
  pop();
  
  if(SwatchA.swatchColor == 'blue'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorSecond, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 50, SwatchA.topColorSecond - 20, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 100, SwatchA.topColorSecond - 40, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorSecond - 60, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 200, SwatchA.topColorSecond - 80, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 250, SwatchA.topColorSecond - 100, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 300, SwatchA.topColorSecond - 120, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 350, SwatchA.topColorSecond - 140, SwatchA.topColorMain));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
    if(SwatchA.swatchColor == 'green'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 50, SwatchA.topColorMain, SwatchA.topColorSecond - 20));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 100, SwatchA.topColorMain, SwatchA.topColorSecond - 40));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorMain, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 200, SwatchA.topColorMain, SwatchA.topColorSecond - 80));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 250, SwatchA.topColorMain, SwatchA.topColorSecond - 100));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 300, SwatchA.topColorMain, SwatchA.topColorSecond - 120));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 350, SwatchA.topColorMain, SwatchA.topColorSecond - 140));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
      if(SwatchA.swatchColor == 'purple'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 30, SwatchA.topColorMain - 30, SwatchA.topColorSecond - 30));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 60, SwatchA.topColorMain - 60, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 90, SwatchA.topColorMain - 90, SwatchA.topColorSecond - 90));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 110, SwatchA.topColorMain - 110, SwatchA.topColorSecond - 110));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 130, SwatchA.topColorMain - 130, SwatchA.topColorSecond - 130));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 150, SwatchA.topColorMain - 150, SwatchA.topColorSecond - 150));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal - 170, SwatchA.topColorMain - 170, SwatchA.topColorSecond - 170));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
  
      if(SwatchA.swatchColor == 'yellow'){
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond));
    translate(SwatchA.xTranslate, -245, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 30));
    translate(SwatchA.xTranslate, -175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 60));
    translate(SwatchA.xTranslate, -105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 90));
    translate(SwatchA.xTranslate, -35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 120));
    translate(SwatchA.xTranslate, 35, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 150));
    translate(SwatchA.xTranslate, 105, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 180));
    translate(SwatchA.xTranslate, 175, 1);
    box(101, 60, 2);
  pop();
  
  push();
    noStroke();
    fill(color(SwatchA.topColorFinal, SwatchA.topColorMain, SwatchA.topColorSecond - 220));
    translate(SwatchA.xTranslate, 245, 1);
    box(101, 60, 2);
  pop();
  }
}

function mouseOver(){
  for(var i = 0; i < swatches[i]; i++){
  //checkOver(mouseX, mouseY);
  }
}

After looking at your source code briefly my impression is that you may have difficulty rotating the swatches independently when you have all four of them locked together in one unit as demonstrated by orbitControl() activation. You might want to create a less complicated model with a group of four objects and see if you can write code to flip them independently and then in unison. — apodidae
– apodidae, Commented Oct 25, 2024 at 20:31
Is this really a minimal minimal reproducible example? The repeated code makes me tired just looking at it. — Wyck
– Wyck, Commented Oct 29, 2024 at 12:40

Kroepniek · Accepted Answer · 2024-10-29 11:54:31Z

Not sure what exactly you needed. I've cleaned the code a little and made it a bit more object oriented, although it's not the best yet. At least it works.

var swatches = [];

var swatchSizeW = 100;
var swatchSizeH = 520;
var swatchBlockMargin = 40;
var swatchBlockSpacing = 20;
var swatchRotationSpeed = 0.075;

function setup() {
  createCanvas(600, 600, WEBGL);
  rectMode(CENTER);

  let colors = [
    color(144, 220, 255),
    color(147, 229, 193),
    color(249, 255, 150),
    color(200, 170, 240)
  ];

  let totalSwatchesWidth = (colors.length - 1) * (swatchSizeW + swatchBlockSpacing);

  for (let i = 0; i < colors.length; i++) {
    let xPos = totalSwatchesWidth * -0.5 + i * (swatchSizeW + swatchBlockSpacing);
    swatches.push(new Swatch(xPos, 0, colors[i], 5));
  }
}

function draw() {
  background(220);

  for (let swatch of swatches) {
    swatch.update();
    swatch.show();
  }
}

class Swatch {
  constructor(posX, posY, col, colSteps) {
    this.Position = createVector(posX, posY);
    this.SizeW = swatchSizeW;
    this.SizeH = swatchSizeH;

    this.BlockMargin = swatchBlockMargin;
    this.BlockSpacing = swatchBlockSpacing;
    this.BlockSizeW = this.SizeW;
    this.BlockSizeH = (this.SizeH - 2 * this.BlockMargin - (colSteps - 1) * this.BlockSpacing) / colSteps;

    this.Col = col;
    this.ColSteps = colSteps;
    this.Angle = 0;
    this.AngleState = 0;
    this.RotationSpeed = swatchRotationSpeed;
    this.Hover = false;
  }

  show() {
    push();
    translate(this.Position.x, this.Position.y, -0.1);
    rotateY(this.Angle);
    noStroke();
    fill(255);
    plane(this.SizeW, this.SizeH);

    translate(0, -this.SizeH * 0.5 + this.BlockSizeH * 0.5 + this.BlockMargin, 0.1);
    for (let i = 0; i < this.ColSteps; i++) {
      fill(lerpColor(this.Col, color(255), (i / this.ColSteps)));
      plane(this.BlockSizeW, this.BlockSizeH);
      translate(0, (this.BlockSizeH + this.BlockSpacing));
    }
    pop();
  }

  update() {
    this.checkHover();

    if (this.Hover) {
      this.AngleState = constrain(this.AngleState + this.RotationSpeed, 0, 1);
    } else {
      this.AngleState = constrain(this.AngleState - this.RotationSpeed, 0, 1);
    }

    this.Angle = lerp(0, PI, this.AngleState);
  }

  checkHover() {
    let mouseCanvasPosX = mouseX - width / 2;
    let mouseCanvasPosY = mouseY - height / 2;
    let halfSizeW = this.SizeW * 0.5;
    let halfSizeH = this.SizeH * 0.5;

    this.Hover = (mouseCanvasPosX >= this.Position.x - halfSizeW &&
      mouseCanvasPosX < this.Position.x + halfSizeW &&
      mouseCanvasPosY >= this.Position.y - halfSizeH &&
      mouseCanvasPosY < this.Position.y + halfSizeH);
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <main>
  </main>
  <script src="sketch.js"></script>
</body>

</html>

torchic · Accepted Answer · 2024-10-25 23:06:25Z

I figured out how to execute it, at least as long as I'm okay with the swatches not existing unless my mouse hovers above it. For now, I'm fine with this. Posting an update to show it's been solved.

let blueStartR = 144;
let blueStartG = 220;
let blueStartB = 255;

let greenStartR = 147;
let greenStartG = 229;
let greenStartB = 193;

let yelStartR = 249;
let yelStartG = 255;
let yelStartB = 150;

let purpStartR = 200; 
let purpStartG = 240;
let purpStartB = 170;

let swatches = [];

function setup() {
  createCanvas(600, 600, WEBGL);
  angleMode(DEGREES);
}

function draw() {
  background(195);
  
  //orbitControl();
  
  let swatchOne = new Swatch(-230, purpStartR, purpStartG, purpStartB, 'purple', false);
  swatchOne.id = "purpleSw";
  
  let swatchTwo = new Swatch(-80, blueStartR, blueStartG, blueStartB, 'blue', false);
  swatchTwo.id = "blueSw";
  
  let swatchThree = new Swatch(80, greenStartR, greenStartB, greenStartG, 'green', false);
  swatchThree.id = "greenSw";
  
  let swatchFour = new Swatch(230, yelStartR, yelStartB, yelStartG, 'yellow', false);
  swatchFour.id = "yellowSw";
  
  
  swatches.push(swatchOne);
  swatches.push(swatchTwo);
  swatches.push(swatchThree);
  swatches.push(swatchFour);
  
  for(var i = 0; i < swatches.length; i++){
    swatches[i].checkOver(mouseX, mouseY);
    swatches[i].drawMe();
  }
}


class Swatch {
  constructor(xTranslate, topColorFinal, topColorSecond, topColorMain, swatchColor, over){
    this.xTranslate = xTranslate;
    this.topColorFinal = topColorFinal;
    this.topColorSecond = topColorSecond;
    this.topColorMain = topColorMain;
    this.swatchColor = swatchColor;
    this.over = over;
  }
  
  checkOver(mouseX, mouseY){
    if(mouseX > 30 && mouseX < 130 && mouseY > 30 && mouseY < 570){
      //swatches[0].over = true;
      swatches[0].over = true;
      console.log("over purple");
    }
    else{
      swatches[0].over = false;
    }
    if(mouseX > 150 && mouseX < 250 && mouseY > 30 && mouseY < 570){
      swatches[1].over = true;
      console.log("over blue");
    }
    else{
      swatches[1].over = false;
    }
    if(mouseX > 310 && mouseX < 410 && mouseY > 30 && mouseY < 570){
      swatches[2].over = true;
      console.log("over green");
    }
    else{
      swatches[2].over = false;
    }
    if(mouseX > 480 && mouseX < 580 && mouseY > 30 && mouseY < 570){
      swatches[3].over = true;
      console.log("over yellow");
    }
    else{
      swatches[3].over = false;
    }
  }
  
  drawMe(){
    
    noStroke();
    
    push();
      fill('white');
      translate(this.xTranslate, 0, 0);
      if(this.over == true){       
        rotateY(frameCount * 4);
        //console.log(frameCount + " , " + frameCount * 4 );
        box(100, 550, 2);
      }
    pop();
    
    //drawBlues
    if(this.swatchColor == 'blue'){
      push();
        fill(color(this.topColorFinal, this.topColorSecond, this.topColorMain));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 50, this.topColorSecond - 20, this.topColorMain));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 100, this.topColorSecond - 40, this.topColorMain));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 150, this.topColorSecond - 60, this.topColorMain));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

       push();
        fill(color(this.topColorFinal - 200, this.topColorSecond - 80, this.topColorMain));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 250, this.topColorSecond - 100, this.topColorMain));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 300, this.topColorSecond - 120, this.topColorMain));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();

      push();
        fill(color(this.topColorFinal - 350,this.topColorSecond - 140, this.topColorMain));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
      //draw greens
    if(this.swatchColor == 'green'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);  
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        } 
      pop();

      push();
        fill(color(this.topColorFinal - 50, this.topColorMain, this.topColorSecond - 20));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 100, this.topColorMain, this.topColorSecond - 40));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 150, this.topColorMain, this.topColorSecond - 60));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 200, this.topColorMain, this.topColorSecond - 80));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 250, this.topColorMain, this.topColorSecond - 100));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 300, this.topColorMain, this.topColorSecond - 120));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 350, this.topColorMain, this.topColorSecond - 140));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
    //draw purples
    if(this.swatchColor == 'purple'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 30, this.topColorMain - 30, this.topColorSecond - 30));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 60, this.topColorMain - 60, this.topColorSecond - 60));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 90, this.topColorMain - 90, this.topColorSecond - 90));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 110, this.topColorMain - 110, this.topColorSecond - 110));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 130, this.topColorMain - 130, this.topColorSecond - 130));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 150, this.topColorMain - 150, this.topColorSecond - 150));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal - 170, this.topColorMain - 170, this.topColorSecond - 170));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  
    //draw yellows
    if(this.swatchColor == 'yellow'){
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond));
        translate(this.xTranslate, -245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 30));
        translate(this.xTranslate, -175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 60));
        translate(this.xTranslate, -105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 90));
        translate(this.xTranslate, -35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 120));
        translate(this.xTranslate, 35, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 150));
        translate(this.xTranslate, 105, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 180));
        translate(this.xTranslate, 175, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
  
      push();
        fill(color(this.topColorFinal, this.topColorMain, this.topColorSecond - 220));
        translate(this.xTranslate, 245, 1);
        if(this.over == true){
          rotateY(frameCount * 4);
          box(101, 60, 2);
        }
      pop();
      }
  }
}

Collectives™ on Stack Overflow

Rotating 3D object using JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related