Javascript library on p5 (location on the screen while scrolling)

[calornorte]

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

[jeremydouglass]

@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:

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

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…

[calornorte]

Thank you Jeremy!
what I really need is this. -->
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!

[jeremydouglass]

@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.

[calornorte]

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!

[jeremydouglass]

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?

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;
}

[calornorte]

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!

[jeremydouglass]

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.

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
}

[calornorte]

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
which–just in case– it seems not work at all on chrome/iphone.

[jeremydouglass]

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.

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
}

[calornorte]

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
also this version helped me to think bigger about this little project, about how to use the space more efficiently. thank you very much!

[calornorte]

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

[jeremydouglass]

@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.

[calornorte]

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
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!

[calornorte]

here’s my solution to this so far.
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!

[jeremydouglass]

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.

[calornorte]

yes!, this is pretty much what I’m doing! Thanks a lot Jeremy!