Javascript Question posted in
A very good W3school tutorial can be found here.

Rotating 3D object using JavaScript

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);
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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();
      }
  }
}


  2. 0

    Not sure what exactly you needed, i 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(this.Col);
      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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search