//note: stop sketch while making changes to the code, or webgl can crash :/

let widthSlider;

let myFont;

let outsideMessage;

let rectColor;

​

function preload() {

  myFont = loadFont('assets/PatuaOne-Regular.ttf');

}

​

function setup() {

  createCanvas(600, 600, WEBGL);

  widthSlider = createSlider(0, 200, 200);

  widthSlider.position(50, height + 5);

  widthSlider.style('width', '500px');

  widthSlider.hide();

  angleMode(DEGREES);

  rectColor = color(255);

}

​

function draw() {

  background(0);

  outsideMessage = createGraphics(200, 400);

  outsideMessage.textAlign(CENTER);

  outsideMessage.textFont(myFont);

  orbitControl(1, 0);

  rotateY(20);

  drawCube();  

}

​

function drawCube(){

    if(widthSlider.value() <= 1){

    //ambientLight(255, 0, 255);

    //outsideMessage.background(13,153,24);

    for(let x = 0; x < 40; x++){

      for(let y = 0; y < 40; y++){

        outsideMessage.fill(rectColor);

        outsideMessage.background(255, 10);

        outsideMessage.stroke(5);

        outsideMessage.rect(x*40, y*40, 40);

      }

    }

    //if the center rectangle with dont come near me is hovered over me, color will change, so will stroke of the secret message. Maybe also the text from no use clicking on any square.

    if(mouseX >= 360 && mouseX <= 400 && mouseY >= 300 && mouseY <= 340){

      outsideMessage.stroke(2);

      //when hover over "me", change the background color to green

      outsideMessage.background(255,0,0);

      outsideMessage.fill(255);

      outsideMessage.strokeWeight(5);

      outsideMessage.textSize(22);

      outsideMessage.textAlign(LEFT);

      outsideMessage.text("Hey,", 10, 100)

      outsideMessage.text("you are awesome!", 10, 200)

    } else {

      outsideMessage.fill(0);

      outsideMessage.textSize(20);

      // place the me over the center square

      outsideMessage.text("Don't hover over me", 100, 222);

    }

    //outsideMessage.noStroke();

    //outsideMessage.background(12,34,233);

    //outsideMessage.text("You are awesome!", 100, 100)

​

  }else{

    //when it's a 3D box, color is __ with __ text

    outsideMessage.background(255, 0, 0);

    outsideMessage.fill(255);

    //outsideMessage.ellipse(mouseX, mouseY, 20);

    outsideMessage.textSize(20);

    outsideMessage.text("Don't turn me around", 100, 200);

  }

  texture(outsideMessage);

  box(200, 400, widthSlider.value(), 1);

}

  //if a mousedrag happens, then show the slider. Use callback to add a delay.

function mouseDragged(event) {

  //5 seconds after detecting a mouse drag, which can mean the cube is rotated, reveal the slider.

  setTimeout(showSlider, 4000);

}

​

function showSlider(){

  widthSlider.show();

}

​

​