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

Querying Techniques: Adding an Element After Another

Include a Custom Button with an Optional Event Handler

Continuously spinning loading icon appears when submission button is triggered

Utilize the data storage API within Next.js or directly in the user's

Creating dynamic HTML elements by utilizing both jQuery and native JavaScript within the DOM

Showing child elements within a div using AngularJS

Is there a way to bring in both a variable and a type from a single file in Typescript?

Display information based on the radio button chosen

How can one resolve the error message that says "WebDriverError: Connection refused"?

Variables in the $scope object in AngularJS

Tips for choosing option values from the browser console in Angular

angularjs .reject not executing correctly within the then statement

Navigate through stunning visuals using Bokeh Slider with Python callback functionality

Is there a way to create animated CSS box-shadow depth using jQuery or CSS3 transitions?

How to Delete Multiple Rows from an Angular 4 Table

Concealing other items in an array on selecting one item in React Native- A step-by-step guide

Why is my Angular 2 service not showing up in my application?

Infinite loop readiness with JQuery

Creating a unique input box using CSS and HTML

Make sure that JSON.stringify is set to automatically encode the forward slash character as `/`