​

let s1 = function( sketch ) {

let boxSizex = 300;

let boxSizey = 200;

let overBox = false;

let locked = false;

let xOffset = 0.0;

let yOffset = 0.0;

​

  let pgPos = 0;

  let margin = 50;

  let scrollMax = 10; //mouse speed

  let pgPosMin

  let pgPosMax

  let scrollAmt

  let pgWidth = 300;

  let pgHeight = 100;

  let bx = 0;

  let by = 0;

  sketch.setup = function() {

    let canvas1 = sketch.createCanvas(400, 400);

    canvas1.mouseWheel(doScroll);

    canvas1.mousePressed(doPress);

    canvas1.mouseReleased(doRelease);

    canvas1.position(0,0);

   pgPosMin = 0 - pgHeight + margin;

   pgPosMax = 400 - margin;

  }

​

  sketch.draw = function() {

​

    sketch.background(128);

  //p.push();

  sketch.translate(50, pgPos); 

  sketch.fill(255);

  sketch.rect(0,0, 300, 200);   

  sketch.text(pgPos,0,0);

  sketch.text(sketch.mouseY,100,0);

 // p.pop();

    var byd = pgPos + 200; //down

    //sketch.print(byd);

    if (

    sketch.mouseX > bx - boxSizex &&

    sketch.mouseX < bx + boxSizex &&

    sketch.mouseY > byd - 200 && //arriba activa

    sketch.mouseY < pgPos + 180  //abajo activa

  ) {

    overBox = true;

    if (!locked) {

      sketch.stroke(255);

      sketch.fill(244, 122, 158);

    }

  } else {

    sketch.stroke(156, 39, 176);

    sketch.fill(244, 122, 158);

    overBox = false;

  }

​

  // Draw the box

  sketch.rect(bx, by, boxSizex, boxSizey);    

  }  

   var doScroll = function(evt) {  

  scrollAmt = sketch.constrain(evt.deltaY, -scrollMax, scrollMax) // mouse speed

  pgPos += evt.deltaY; 

  pgPos = sketch.constrain(pgPos, pgPosMin, pgPosMax) // top/bottom margin stops        

  }

​

   var doPress = function(evt) {

  if (overBox) {

    locked = true;

    sketch.fill(255, 255, 255);

    window.open("https://google.com");

  } else {

    locked = false;

  }

  xOffset = sketch.mouseX - bx;

  yOffset = sketch.mouseY - by;

}

​

​

var doRelease = function(evt) {

  locked = false;

}    

};

new p5(s1);