Making a Zoom effect using p5.js

Question

Making a Zoom effect using p5.js

I have searched for a solution to this question multiple times, but none of the answers I came across seem to work for me. Currently, I am able to allow the user to scale an image with a simple scale(factor) call. However, now I am attempting to implement scaling based on the mouse pointer location, which is proving to be more challenging. Although I can create a zoom effect centered around the pointer, the issue arises when the mouse moves and the image follows suit, as demonstrated in this example:

I tried multiplying the coordinates of the second translation by the scale factor, but that did not yield the desired result. What could I be overlooking?

let sf = 1; // scaleFactor
let x = 0; // pan X
let y = 0; // pan Y

let mx, my; // mouse coords;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  mx = mouseX;
  my = mouseY;

  background(255);

  translate(mx, my);
  scale(sf);
  translate(-mx, -my);
  translate();

  rect(100, 100, 100, 100);

  if (mouseIsPressed) {
    x -= pmouseX - mouseX;
    y -= pmouseY - mouseY;
  }
}

window.addEventListener("wheel", function(e) {
  if (e.deltaY > 0)
    sf *= 1.05;
  else
    sf *= 0.95;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

javascript canvas processing p5.js

Answer 1

Answer №1

The challenge arises when you need to apply the scale incrementally.

When applying a single scale (s1) from a center point (x1, y1), the calculation is:

model = translate(x1, y1) * scale(s1) * translate(-x1, -y1)

If you wish to incorporate a new scale (s2) around another center point (x2, y2), this formula should be used:

model = translate(x2, y2) * scale(s2) * translate(-x2, -y2) * currentMode;

Where currentMode represents the previous transformation involving scaling.
It's crucial not to confuse this with:

model = translate(x1+x2, y1+y2) * scale(s1*s2) * translate(-(x1+x2), -(y1+y2))

A single scale factor (sf) applied from the center point (mx, my) can be calculated as follows:

let tx = mx - sf * mx;
let ty = my - sf * my;
translate(tx, ty);
scale(sf);

To perform multiple consecutive operations like these, it is advisable to implement a 3x3 Matrix multiplication method:

function matMult3x3(A, B) {
    C = [0, 0, 0, 0, 0, 0];
    for (let k = 0; k < 3; ++ k) {
        for (let j = 0; j < 3; ++ j) {
            C[k*3+j] = A[0*3+j] * B[k*3+0] + A[1*3+j] * B[k*3+1] + A[2*3+j] * B[k*3+2];
        }
    }
    return C;
}

The scale transformation around a central point can be represented by the following 3x3 matrix:

m = [ sf, 0,  0, 
      0,  sf, 0,
      tx, ty, 1];

This setup leads to the handling of mouse wheel events as shown below:

window.addEventListener("wheel", function(e) {

    let mx = mouseX;
    let my = mouseY;

    let s = e.deltaY > 0 ? 1.05 : 0.95;

    let x = mx - s * mx;
    let y = my - s * my;
    m = matMult3x3([s,0,0, 0,s,0, x,y,1], [sf,0,0, 0,sf,0, tx,ty,1]);
    sf = m[0];
    tx = m[6];
    ty = m[7];
} );

To simplify the above code further:

window.addEventListener("wheel", function(e) {

    let mx = mouseX;
    let my = mouseY;

    let s = e.deltaY > 0 ? 1.05 : 0.95;

    sf = sf * s;
    tx = mx - s * mx + s * tx;
    ty = my - s * my + s * ty;
} );

Check out the example provided where the rectangle can be scaled from the mouse cursor position using either the mouse wheel or the +/- keys:

let sf = 1, tx = 0, ty = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(127);
  translate(tx, ty);
  scale(sf);
  rect(100, 100, 100, 100);
}

function applyScale(s) {
    sf = sf * s;
    tx = mouseX * (1-s) + tx * s;
    ty = mouseY * (1-s) + ty * s;
}

window.addEventListener("wheel", function(e) {
    applyScale(e.deltaY > 0 ? 1.05 : 0.95);
} );

function keyPressed() {
    if (key == '-') {
        applyScale(0.95);
    } else if (key == '+') {
        applyScale(1.05);
    } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 2

The challenge arises when you need to apply the scale incrementally.

When applying a single scale (s1) from a center point (x1, y1), the calculation is:

model = translate(x1, y1) * scale(s1) * translate(-x1, -y1)

If you wish to incorporate a new scale (s2) around another center point (x2, y2), this formula should be used:

model = translate(x2, y2) * scale(s2) * translate(-x2, -y2) * currentMode;

Where currentMode represents the previous transformation involving scaling.
It's crucial not to confuse this with:

model = translate(x1+x2, y1+y2) * scale(s1*s2) * translate(-(x1+x2), -(y1+y2))

A single scale factor (sf) applied from the center point (mx, my) can be calculated as follows:

let tx = mx - sf * mx;
let ty = my - sf * my;
translate(tx, ty);
scale(sf);

To perform multiple consecutive operations like these, it is advisable to implement a 3x3 Matrix multiplication method:

function matMult3x3(A, B) {
    C = [0, 0, 0, 0, 0, 0];
    for (let k = 0; k < 3; ++ k) {
        for (let j = 0; j < 3; ++ j) {
            C[k*3+j] = A[0*3+j] * B[k*3+0] + A[1*3+j] * B[k*3+1] + A[2*3+j] * B[k*3+2];
        }
    }
    return C;
}

The scale transformation around a central point can be represented by the following 3x3 matrix:

m = [ sf, 0,  0, 
      0,  sf, 0,
      tx, ty, 1];

This setup leads to the handling of mouse wheel events as shown below:

window.addEventListener("wheel", function(e) {

    let mx = mouseX;
    let my = mouseY;

    let s = e.deltaY > 0 ? 1.05 : 0.95;

    let x = mx - s * mx;
    let y = my - s * my;
    m = matMult3x3([s,0,0, 0,s,0, x,y,1], [sf,0,0, 0,sf,0, tx,ty,1]);
    sf = m[0];
    tx = m[6];
    ty = m[7];
} );

To simplify the above code further:

window.addEventListener("wheel", function(e) {

    let mx = mouseX;
    let my = mouseY;

    let s = e.deltaY > 0 ? 1.05 : 0.95;

    sf = sf * s;
    tx = mx - s * mx + s * tx;
    ty = my - s * my + s * ty;
} );

Check out the example provided where the rectangle can be scaled from the mouse cursor position using either the mouse wheel or the +/- keys:

let sf = 1, tx = 0, ty = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(127);
  translate(tx, ty);
  scale(sf);
  rect(100, 100, 100, 100);
}

function applyScale(s) {
    sf = sf * s;
    tx = mouseX * (1-s) + tx * s;
    ty = mouseY * (1-s) + ty * s;
}

window.addEventListener("wheel", function(e) {
    applyScale(e.deltaY > 0 ? 1.05 : 0.95);
} );

function keyPressed() {
    if (key == '-') {
        applyScale(0.95);
    } else if (key == '+') {
        applyScale(1.05);
    } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Making a Zoom effect using p5.js

Answer №1

Similar questions

Change the className of an element in React upon clicking it

Leveraging angular.forEach for JSON Iteration

Error message "Undefined error encountered when attempting to display an array of objects using jQuery and PHP through AJAX on the console"

Using Node.js with the express framework for requiring and posting data

I am seeking assistance with generating a printed list from the database

Search through a JSON array to find a specific element and retrieve the entire array linked to that element

I am facing difficulties accessing an element within a controller in Angular

ng-repeat failing to display the final two divs

Implementing specifications throughout the entire nodejs route

Utilize the power of AJAX for efficiently sorting search results retrieved from MySQL

Obtain the current name of the Material UI breakpoint

What is the best method for arranging checkboxes in a vertical line alongside a list of items for uniform alignment?

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

Draggable resizing of the Accordion component in React.js using Material-UI

How can we bring in a function into a Vue component?

Prevent the ability to drag and drop within specific div elements

The service worker is attempting to access outdated information from the cached script

How to show the current week using React Native

Trouble with AngularJS: Updates not reflecting when adding new items to an Array

Interact with SOAP web service using an Angular application