I want to control 'scroll' through 'p5' 'mouseWheel' function

p5.js Beginners
1

I want to control ‘scroll’ through ‘p5’ ‘mouseWheel’ function.

Hello. Nice to meet you.

figs
figs711×394 21.3 KB

Please refer to the picture.
I want to control up and down through ‘function mouseWheel(event)’.

Can I control scroll through that function?

function mouseWheel(event) {
  if (event.delta > 0) {

  } else {

  }
}
2

Your web browser should already scroll with the mouse wheel.

1 Like
3

@quark

Thank you for your answer.

  1. As you said, scrolling is already controlled via ‘mouse wheel’.
  2. However, if you declare ‘function mouseWheel(event)’, it will not do its job.
  3. In other words, if you declare ‘function mouseWheel(event)’, scroll control will not work.

Sorry, I figured out why.

function mouseWheel(event) {
  if (event.delta > 0) {
  } else {
  }
return false;
}

Because of ‘false’. Thank you.

4

@quark
Thank you so much. I solved it.

I’m asking because I don’t know much.
By any chance, is it possible to control the scroll position with Y px(pixel)?
I know it’s controlled with ‘CSS’ etc.
By any chance, is it possible to control the scroll position with ‘p5’?

5

You would need to put the return false; back so the wheel event is not passed onto the web browser. You would then need to add your own code to scroll the ‘document’. This should be possible through the DOM (Document Object Module) interface but I have little experience to doing that so perhaps someone else can take this discussion further.

1 Like
6

Just curious, how did you get the scroll bars in your original post?

I’m not sure I understand the question being asked. In the following demo the y value controls the image position. If you want to change the image’s position in the window then change the y value.

let cat;
let y = -700; // This controls image position

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function preload(){
  cat = loadImage('cat.png');
}

function draw() {
  background(220);   
  image(cat,0,y);
}

function mouseWheel(event) {
  if (event.delta > 0) {
    console.log("mouseWheel up: +"+event.delta);
    y += 10;
  } else {
  console.log("mouseWheel down: "+event.delta);
    y -= 10;
  }
}
1 Like
7

@quark
Thank you.

@svan

Hello. Thank you for your answer.

  1. Normally, scroll is controlled through ‘mouse wheel’.
  2. If ‘return false;’ is used, scroll control is not possible through ‘wheel’.
  3. I want to control ‘scroll position’ through ‘p5’. Scroll refers to the size of the entire ‘canvas’.
function setup() {
createCanvas(500, 5000);
}
function draw() {
background(220);
}

function mouseWheel(event) {
if (event.delta > 0) {
console.log("mouseWheel up: +"+event.delta);
// → Send to the top of the scroll
} else {
console.log("mouseWheel down: "+event.delta);
// → Send to the bottom of the scroll
}
}
8

1.) Your post title states that you want to control ‘scroll’ through mouseWheel.
2.) Now you state that you want to disable the mouseWheel.
3.) Scrolling won’t change the size of the canvas.
4.) If you want to change the viewPort with code that’s a different question.

2 Likes
9

The following may or may not be helpful depending on what you are trying to do:

// https://www.quirksmode.org/mobile/viewports.html

function setup() {
  createCanvas(400, 2400);
  console.log("window inner height = " + window.innerHeight);
  console.log("pageYOffset pre-scroll = " + window.pageYOffset);
  // REM out the next line to see what it does
  window.scrollTo(0, 2300);
  console.log("pageYOffset post-scroll= " + window.pageYOffset);
}

function draw() {
  background(220);
  circle(100, 2000, 100);
}
2 Likes
10

It is not practical to use the mouse wheel method to send’ to the top or to the bottom.

If you return false then the event is consumed and the browser never sees it so you can’t use the wheel to scroll to intermediate views. If you return true you have the same problem because the browser cannot scroll further than your method has already sent it. In both cases the only way to see intermediate views would be to drag the vertical scrollbar.

Very true :grin:

1 Like
11

@svan

This is exactly what I want.
Thank you. This is exactly what I wanted.
Thank you so much.

var P_N = 0;
function setup() {
createCanvas(400, 4000);
}

function draw() {
background(220);
}

function mousePressed() {
P_N++;
if(P_N==1){
window.scrollTo(0,0);
}
else if(P_N==2){
window.scrollTo(0,1000);
}
else if(P_N==3){
window.scrollTo(0,2000);
}
else if(P_N==4){
window.scrollTo(0,3000);
P_N = 0;
}

}