How to set limits on zoom min/max in p5.js WEBGL mode?

p5.js Coding Questions
1

I have a p5.js project in WEBGL mode, and I’ve been looking online to find a good way to constrain the minimum and maximum zoom levels, but I can’t find a solid solution.

Ideally, I’d like to impose limits that work with orbitControl(), but I haven’t found a way to do that, so I’m open to creating a custom mouseWheel function to control the zoom.

What’s the best approach to this problem?

2

Hi friend, it wasn’t really clear to me what you mean by zoom you mean normal zooming in and out with mouse wheel like did on this sketch? Ahdut Tree-Fractal Viewer - OpenProcessing (see Zoom Mode) (Right \ Left click to zoom in\out)

3

Hello, apologies that I wasn’t clear. I mean normal zooming in and out using the mouse wheel. Like the kind of zooming that is possible through orbitControl(). The problem I’m having is that I have a sphere in a p5.js webgl sketch, and orbitControl() allows the user to scroll in on the sketch to the point where the view reaches the interior of the sphere. I want to prevent the user from being able to zoom in that far. Otherwise I want the zooming to work as normal.

1 Like
4

Would you be able to share the code? i can look into it.

5

Thank you for looking into it, I appreciate your help.

Here is some simplified code that demonstrates the issue. For this example, I’ve added a texture to the sphere that’s a stock image of some alphabet letters so that you can easily see when you zoom in past the sphere’s boundary because the text on the sphere will look backward when you’re “inside” the sphere versus looking regular when you’re “outside” the sphere. The diagonal stroke lines on the sphere also change direction when you cross the boundary: when you’re “outside” the sphere they go from the top right to the bottom left, and when you’re “inside” the sphere they appear to go from the top left to the bottom right.

let cam;

function preload() {
  sphereTexture = loadImage('https://cdn.pixabay.com/photo/2015/03/02/20/19/letters-656535_1280.jpg');
}

function setup() {
  let canvas = createCanvas(1200, 800, WEBGL);
  
  cam = createCamera();
  
  radius = min(width, height) / 3;
}

function draw() {
  background(40, 14, 40);
  
  orbitControl(1.5, 1, 0.2);
  
  texture(sphereTexture);
  sphere(radius);
}