# Javascript library on p5 (location on the screen while scrolling)
**URL:** https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300
**Category:** Libraries
**Created:** [August 10, 2019, 11:04pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300 "2019-08-10T23:04:17Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [August 10, 2019, 11:04pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/1 "2019-08-10T23:04:17Z")
I’m such a newby.!
on p5, my problem is that I need to know the precise (visible) location on a very long vertical canvas after mouse scrolling down/up.
MouseWheel doesn’t really do the job and might cause problems when the wheel is configured inverted, so I pumped into roll.js and incredible small and efficient javascript library that does just the right job. however I have no idea about how to implement it on p5.
perhaps there is an easier way?
thanks
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 12, 2019, 7:35pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/2 "2019-08-12T19:35:10Z")
> [@calornorte](#):
>
> MouseWheel doesn’t really do the job and might cause problems when the wheel is configured inverted,
How does it “not do the job”? Can you say more about what you are trying to do? What specifically isn’t working, and what do you want to happen instead?
Also consider sharing code if you can, even if it is incomplete or broken.
Here is a labeled version of what is happening in the mouseWheel demo sketch:
```auto
let pos = 175;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(237, 34, 93);
fill(0);
rect(175, pos, 50, 50);
fill(255)
text(pos, 190, pos+25);
}
function mouseWheel(event) {
print(event.delta);
pos += event.delta;
}
```
If you want scrolling content rather than a scrolling object, here is a related approach in Processing (not p5.js) that could be adapted:
> [@\[Processing 3\] Moving through a map bigger than the screen](https://discourse.processing.org/t/processing-3-moving-through-a-map-bigger-than-the-screen/10393/4):
>
> Do you actually have a 1024x15669 image file, like a jpg, that you are loading and want to scroll? Or is it many tiles, or are you generating the background image dynamically inside your sketch…? Here is a very very simple example of a vertical scroller written in PDE (not Eclipse). It demonstrates using translate and the coordinate system to keep track of where you are, then check collision with the viewframe to decide what to render (e.g. only part of a very large graphic, or only certain ti…
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [August 13, 2019, 2:42am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/3 "2019-08-13T02:42:01Z")
Thank you Jeremy!
what I really need is this. --\>
[https://williamngan.github.io/roll/demo/](https://williamngan.github.io/roll/demo/)
on the left side of the window you can see the precise, vertical location of your window when you scroll up and down.
MouseWheel just give you positive and negative movement data regardless of the actual location of the window. hope that this clarifies. Thanks!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 13, 2019, 4:04am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/4 "2019-08-13T04:04:38Z")
> [@calornorte](#):
>
> the precise, vertical location of your window when you scroll up and down
Well, I mean, that is what `pos` gives in the code I shared with you above. It is just an accumulator.
And the previous post demo I linked to adds a graphic, and a readout with metric marks, but it is really just the same thing – a single accumulator variable.
If you want, you can add a bit of acceleration to it to make the scrolling feel a bit softer and less precise, like the example you linked (or like swiping on a touchscreen). That’s really the only difference.
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [August 14, 2019, 2:54am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/5 "2019-08-14T02:54:30Z")
Thanks Jeremy! once I put a constrain on the event.delta the values make sense to me now!
so i’ll stick with MouseWheel now.
thanks for all of your suggestions!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 14, 2019, 3:38pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/6 "2019-08-14T15:38:15Z")
Glad to hear it worked for you.
When you say constrain, do you mean that the wheel input was moving too fast and you wanted a maximum scroll rate? So something like this?
```auto
let pos = 175;
let maxScroll = 5;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(237, 34, 93);
fill(0);
rect(175, pos, 50, 50);
fill(255)
text(pos, 190, pos+25);
}
function mouseWheel(event) {
let input=constrain(event.delta, -maxScroll, maxScroll)
print(input);
pos += input;
}
```
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [August 14, 2019, 4:47pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/7 "2019-08-14T16:47:07Z")
Thanks again Jeremy!
it was confusing for me to understand how would I control the window while scrolling,
since I was receiving negative numbers, also the accumulative aspect of it didn’t make sense to me. I put a constrain to the mouse.delta to lock it into positive numbers and now I understand the whole function much better. thanks!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 14, 2019, 9:02pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/8 "2019-08-14T21:02:37Z")
Okay! So no negative numbers because you want the user / program to be able to scroll down, but not able to scroll up? Down is +10, up is -10.
You can also constrain pos (not input) – so that lets the event.delta be positive or negative (up or down scroll) but you can’t scroll the “page” beyond defined height limits.
```auto
let pgWidth = 300;
let pgHeight = 500;
let pgPos = 50;
let pgPosMin
let pgPosMax
let margin = 20
let scrollMax = 10;
function setup() {
createCanvas(400, 400);
pgPosMin = 0 - pgHeight + margin
pgPosMax = height - margin
}
function draw() {
background(128);
push()
translate(50, pgPos);
fill(255);
rect(0, 0, pgWidth, pgHeight);
pop();
fill(0)
text(pgPos, width/2, height/2);
}
function mouseWheel(event) {
let scrollAmt=constrain(event.delta, -scrollMax, scrollMax) // mouse speed
print(scrollAmt);
pgPos += scrollAmt;
pgPos = constrain(pgPos, pgPosMin, pgPosMax) // top/bottom margin stops
}
```
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [August 15, 2019, 10:42pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/9 "2019-08-15T22:42:18Z")
thank you jeremy
I’m using var += event.delta; and constrain it to the height of my canvas.
here’s what I’m doing [http://www.openprocessing.org/sketch/744795](http://www.openprocessing.org/sketch/744795)
which–just in case– it seems not work at all on chrome/iphone.
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [August 15, 2019, 11:20pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/10 "2019-08-15T23:20:57Z")
Okay, big disconnect here. Two entirely different approaches.
1. The approach I demonstrated: Your sketch is a box. Drag the mouse inside it to scroll the contents inside it. The sketch listens to the mouse, adds the amount of “change” each frame to calculate your new location, and adjusts the content it draws based on that location.
2. The approach in you sketch: Your sketch is a taaaaaaall box. Scroll the webpage that contains it, and hope while you are doing this that the sketch also detects the mouse. If it does, use the current mouse value to fade things in and out. Notice that you are fading them in and out _in place_ on a super-long sketch scroll that you are redrawing. If you accidentally drag outside the sketch box, the sketch content will scroll but the sketch won’t “hear” it scrolling, so the content will get out of sync and won’t react correctly.
I don’t recommend this second approach – aside from the interaction problems, as you add videos it will become impossible to render a sketch that is e.g. 20000 pixels high. I recommend the approach with pos, demonstrated in my previous sketch. That requires putting a translate() command in draw so that the sketch changes what it draws based on how much you have scrolled inside it. The sketch itself is a normal-sized box or viewport – not an extremely tall one – and what it draws changes.
```auto
let pgWidth = 300;
let pgHeight = 1100;
let pgPos = 50;
let pgPosMin
let pgPosMax
let margin = 20
let scrollMax = 10;
function setup() {
createCanvas(400, 400);
pgPosMin = 0 - pgHeight + margin
pgPosMax = height - margin
}
function draw() {
background(128);
push()
translate(50, pgPos); // this is how your sketch content scrolls!
fill(255);
rect(0, 000, pgWidth, 200); // a bunch of video boxes -- fade based on pos
rect(0, 300, pgWidth, 200);
rect(0, 600, pgWidth, 200);
rect(0, 900, pgWidth, 200);
pop();
fill(0)
text(pgPos, width/2, height/2);
}
function mouseWheel(event) {
let scrollAmt=constrain(event.delta, -scrollMax, scrollMax) // mouse speed
print(scrollAmt);
pgPos += scrollAmt;
pgPos = constrain(pgPos, pgPosMin, pgPosMax) // top/bottom margin stops
}
```
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [November 7, 2019, 10:31pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/11 "2019-11-07T22:31:50Z")
dear Jeremy!
thanks for your help! I’m so sorry for this delay but I have been offline for quite some time now!.
I took your suggestion!
[https://editor.p5js.org/caminofarol/present/beWbIdQD4](https://editor.p5js.org/caminofarol/present/beWbIdQD4)
also this version helped me to think bigger about this little project, about how to use the space more efficiently. thank you very much!
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [November 7, 2019, 10:44pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/12 "2019-11-07T22:44:53Z")
one little question.
I’m thinking about using this script as my website portfolio viewer, each video or pic should redirect to an individual page, for this I’m assuming the best would be to host this script on a CMS platform?
any suggestions about a simpler but customisable one? I recently discovered Hugo but i have not experience with it yet.
thanks in advance
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [November 8, 2019, 2:51am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/13 "2019-11-08T02:51:24Z")
> [@calornorte](#):
>
> host this script on a CMS platform
It is up to you. These are just web links – so they could link to pages that you are organizing and editing with anything – static HTML or WordPress Hugo Jekyll Drupal Publii or another of the quite literally hundreds of mainstream options. Like “vehicles” the category of web CMSes / SSGs is huge.
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [February 12, 2020, 1:11am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/14 "2020-02-12T01:11:29Z")
Thanks for the tip Jeremy!
uh! I just noticed I have received an answer on this ages ago!, actually on the same day!
sorry ☹
here’s where I am, by the way!
[https://editor.p5js.org/caminofarol/present/EkL0OWQK](https://editor.p5js.org/caminofarol/present/EkL0OWQK)
I followed your advice on using a smaller box using translate and it works very well!
Now I’ve been trying to implement mouse highlight/clickable ability to each one of the videos/ images in the canvas by comparing them to the position of the mouse.
as I understand, I’m really just moving the “camera” around and not changing the position of this videos/images in the canvas, so getting an accurate position of them in comparison to the mouse position would not work.
at the moment I have only confusing ideas about how solve/adapt something and I’m wondering if there might be another obvious option I’m not aware of…?
thanks!
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [February 18, 2020, 12:44am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/15 "2020-02-18T00:44:55Z")
here’s my solution to this so far.
[https://editor.p5js.org/caminofarol/sketches/WKNGhwai](https://editor.p5js.org/caminofarol/sketches/WKNGhwai)
seems to work fine in these conditions.
I wonder if this is the safest approach, and if there is a chance for this highlight box I’m drawing to get out of sync with the original position of the video/box.
thanks!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [February 18, 2020, 8:13pm UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/16 "2020-02-18T20:13:56Z")
It look good to me!
You are correct – to compare your translated / offset canvas coordinates with your mouse, use the offset value. This is reliable.
For example, if you canvas is translated +1000, and your mouseY is 200, then your mouse is pointing at canvas 200+1000 = 1200.
---
### Author:  [@calornorte](https://discourse.processing.org/u/calornorte)
#### Post date: [February 19, 2020, 1:51am UTC](https://discourse.processing.org/t/javascript-library-on-p5-location-on-the-screen-while-scrolling/13300/17 "2020-02-19T01:51:40Z")
yes!, this is pretty much what I’m doing! Thanks a lot Jeremy!