hello and thank you all for taking the time to read this!
I am working for the first time with WEBGL 3D objects within P5JS (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 it’s Y-Axis 180 degrees, and then flip back over when all four have been flipped. I’m having trouble bringing this to life, admittedly due to lack of experience. Hoping someone can point me in the right direction?
There may be some unnecessary or repetitive lines in this code – I apologize. I have been scratching my head over this for many days now and trying many things out to execute my vision, with no luck thus far.
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);
}
}