Determining the size of the axis in correlation to a set constant length

Question

Determining the size of the axis in correlation to a set constant length

Basic Concept

I am currently developing a small tool designed to assist with geometric calculations for print-related items.

Project Overview

In this tool, users are asked to input the width and height of a box, represented visually as a CSS-based box, through two input fields labeled w and h.

The challenge lies in accurately displaying the measurements within a limited space, with the box constrained to a maximum size of 69 x 69 pixels.

To address this, my goal is to scale the dimensions of the box proportionally based on the longer of the two input values, while ensuring that it does not exceed the maximum size.

Technical Approach

Despite not being mathematically inclined, I have devised a function to achieve this purpose:

updateRectBox: function(w, h){

    var max_x = 69;
    var max_y = 69;
    var factor, x, y;

    factor = w / h;

    if (w == h) {
        x = max_x;
        y = max_y;
    } else {
        if (w > h) {
            x = max_x;
            y = (factor > 1 ? max_y / factor : max_y * factor);
        } else {
            x = (factor > 1 ? max_x / factor : max_x * factor);
            y = max_y;
        }
    }

    jQuery('#rect').css({
        'width': (x) + 'px',
        'height': (y) + 'px'
    });

}

While this function serves its purpose effectively, I believe there is room for optimization and simplification.

Seeking Refinement

Considering my limitations in mathematical expertise, I am reaching out for suggestions on refining and streamlining the code for a more elegant implementation. I have provided a working fiddle to facilitate testing and experimentation.

javascript math geometry

Answer 1

Answer №1

This function successfully achieves its goal. While there are potentially more elegant ways to write it, the basic concept remains the same.

The concept here is resizing a box with dimensions (w × h) to fit within a (69 × 69) box by scaling it accordingly.

In order for the box to fit within a (69 × 69) box, both the width and height of the original box (w × h) must be less than or equal to 69. Let's assume we scale the box by a factor of s. The new box dimensions will be (s * w × s * h). Based on this constraint, we can derive the following inequalities:

s * w <= 69 and s * h <= 69. Solving for s, we get:

s <= 69 / w and s <= 69 / h. To satisfy both conditions, we can rewrite this as:

s <= min( 69 / w, 69 / h). To maximize the scaling and fill the region completely, we set s = min( 69 / w, 69 / h).

The provided code achieves the same objective using if-statements. A more concise version can be written as follows:

updateRectBox: function(width, height) {

    // define maximum width and height for box
    var max_width = 69;
    var max_height = 69;
    var scale = Math.min( max_width / width, max_height / height );

    var x = scale * width;
    var y = scale * height;

    // setting the box element's properties
    jQuery('#rect').css({
        'width': x+'px',
        'height': y+'px'
    });
}

Changing the variable names for clarity improves readability (e.g., using explicit names like width and height).

While there may not be significant performance discrepancies between the original code and this revised version, the use of Math.min has been shown to be faster in certain tests.

Answer 2

This function successfully achieves its goal. While there are potentially more elegant ways to write it, the basic concept remains the same.

The concept here is resizing a box with dimensions (w × h) to fit within a (69 × 69) box by scaling it accordingly.

In order for the box to fit within a (69 × 69) box, both the width and height of the original box (w × h) must be less than or equal to 69. Let's assume we scale the box by a factor of s. The new box dimensions will be (s * w × s * h). Based on this constraint, we can derive the following inequalities:

s * w <= 69 and s * h <= 69. Solving for s, we get:

s <= 69 / w and s <= 69 / h. To satisfy both conditions, we can rewrite this as:

s <= min( 69 / w, 69 / h). To maximize the scaling and fill the region completely, we set s = min( 69 / w, 69 / h).

The provided code achieves the same objective using if-statements. A more concise version can be written as follows:

updateRectBox: function(width, height) {

    // define maximum width and height for box
    var max_width = 69;
    var max_height = 69;
    var scale = Math.min( max_width / width, max_height / height );

    var x = scale * width;
    var y = scale * height;

    // setting the box element's properties
    jQuery('#rect').css({
        'width': x+'px',
        'height': y+'px'
    });
}

Changing the variable names for clarity improves readability (e.g., using explicit names like width and height).

While there may not be significant performance discrepancies between the original code and this revised version, the use of Math.min has been shown to be faster in certain tests.

Determining the size of the axis in correlation to a set constant length

Answer №1

Similar questions

Obtaining values from multi-dimensional arrays with JavaScript and node.js

Tips for preventing harmful messages in a chat room app

Is there a simple method to add animation to a group of images displayed on click using JQuery?

Create an illustration of a canvas interacting with a database image source, but failing to display local images

Troubles with Promise.all and json() in JavaScript causing errors being logged as "invalid function"

Employing Visual Composer within WordPress has resulted in the raw JavaScript not being properly applied to my raw HTML code

Retrieving the values of multiple selected options from various select fields simultaneously

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

NextJS is throwing an error stating that the element type is invalid. It was expecting either a string for built-in components or a class/function for composite components, but instead received an object

What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

I need the language chosen using Lingui's Language Switcher (i18n) to persist throughout the app, even after a refresh

removing an item from a nested array through the use of the filter() method

Ways to emphasize the chosen row within angular js 4

Preventing Columns in SlickGrid from Being Reordered

What is the most effective method of testing with jest to verify that a TypeScript Enum list contains all the expected string values?

Manipulating events through adjusting values of a JQuery-UI range-slider

Building a simple messaging platform with the power of Socket.io and Node.js

Encountering an issue with finding the module `scheduler/tracing` in React Native

Best practice for managing asynchronous calls and returns in TypeScript

Error Occurs While Getting Request Parameters with Ajax Post and Express.js