What is the best way to reduce a varying percentage as the value continues to rise?

My memory of math may be a bit fuzzy, but I can't seem to recall how to solve this particular issue. In jQuery, I have been adding randomized clipping paths to my images using the following code:

var max=100;
var spread=5;
jQuery.each( $("img"), function( i, val ) {
    $(val).clipPath(
        [
            [Math.floor(Math.random()*spread*10)/10, Math.floor(Math.random()*spread*10)/10], 
            [max-Math.floor(Math.random()*spread*10)/10, Math.floor(Math.random()*spread*10)/10], 
            [max-Math.floor(Math.random()*spread*10)/10, max-Math.floor(Math.random()*spread*10)/10], 
            [Math.floor(Math.random()*spread*10)/10, max-Math.floor(Math.random()*spread*10)/10]
        ],
       {isPercentage:true}
   );   
})

The code works perfectly fine; however, because the values are in percentages, they can sometimes result in extreme changes with the image size increasing significantly. How can I adjust the "spread" variable to account for increasing height/width values? Would using Math.log be helpful in this situation?

Thank you.

Answer №1

One approach could be to create a formula that calculates the spread based on the height and width values of the images. You could start by setting a baseline spread value of 5 for images up to a certain size (let's say ...x... pixels) that you know works effectively. Then, adjust the spread size for larger images accordingly.

Answer №2

To calculate the spread, you can use the formula spread = constant/(height+width), or alternatively spread = constant/(height^2+width^2)^0.5

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I arrange multiple images within a div to create a circular view?

How can I create a div block with multiple images positioned inside? I'm having trouble applying div CSS properties to the images, and also want them to be displayed in round shapes. ...

Create an HTML table with a line separating two table cells

I need help with creating a table row and td's dynamically using basic HTML and CSS. I would like to draw lines between the td's similar to the example image shown below. Can someone please assist me in achieving this? https://i.sstatic.net/GPd ...

Update data in the datatables using values from an array list

Currently, I have two HTML files where I am loading data using JSON and then applying jQuery datatables to them. Now, I need to refresh the data with new parameters. For example: JSON: [ {"name":"jon","sales":"100","set":"SET1"}, {"name":"charlie","sale ...

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from

Hey there, I'm a beginner in learning React and I'm encountering an issue with my popup modal component. Even after showing the modal, I can still interact with and click on the main UI elements. Can anyone assist me with this problem? https://i ...

Which method is best for extracting content from a WebView - using Regx, implementing JQuery, or utilizing HTML parsing?

Criteria for Acceptance I am working with a website in a WebView that is not under my ownership. I want to be able to trigger native button clicks based on the content of the page. Tasks at Hand I need to determine if the HTML content contains specific UR ...

Tips for keeping the header section anchored to the top of the page

I am having trouble getting the menu bar and logo to stick at the top of my header section in the template. I have been trying different solutions, including using the sticky.js plugin for almost 4 days now but it's not working. I also have parallax e ...

Adjust the hue as you scroll

I've been searching for a solution to this issue, but I haven't been able to make it work. My goal is to have the page header change from a transparent background to a red background as the user starts scrolling down the page. $(window).on("s ...

Troubleshooting Issue with Nested ng-include in AngularJS: Difficulty arises when the parent element with the ng-include attribute is dynamically added using the ng-

Click here to see a demo plunker that will help you understand my issue. On my main page, I have a table. Each table row is followed by a hidden empty row. When the first row is clicked, I use a directive to inject HTML into the empty row below it. Main ...

Adding a simulated bottom border to a rotated container

Currently, I am utilizing the CSS3 rotate value to create an arrowhead effect for modal boxes. However, I now require a full arrowhead design with a bottom border. As this involves rotating a div at a 45° angle, adding another border to either side will n ...

How can I align the CSS Horizontal Menu directly under the parent menu instead of its current incorrect x-position?

I am working on creating a horizontal drop-down menu using CSS. However, I'm facing an issue where the submenu either appears all the way to the left of the website (when I use position: absolute) or directly to the left of the menu (when set to posit ...

Utilizing JQuery for parsing information

I am working on a project that involves displaying Google Maps API on one tab and images on another within a container. The goal is to have the image in the second tab change when a location is selected from the list. To achieve this, I have set up a hidd ...

What's the best way to refresh the pagination links during an AJAX request?

After successfully implementing AJAX pagination, I noticed that the pagination links are not updating because the <%= paginate @videos %> code is not located within the rendered partial. Can anyone suggest a jQuery solution to update the pagination l ...

Unable to delete a row from a dynamically generated table using jQuery

I am currently working on a project that involves creating a table based on results from a servlet. The table includes checkboxes, and when a checkbox is checked, a button at the bottom of the table should appear. This button calls a remove function to del ...

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

The Nivo Slider experiences compatibility issues with webkit browsers when used in conjunction with Really Simple History (RSH) technology

I'm in the process of developing a website with AJAX capabilities, utilizing the Really Simple History (RSH) framework to manage back and forward requests. One challenge I've encountered is that when using Nivo Slider for a slideshow feature, it ...

Everything was working perfectly with the Javascript code until I attempted to encapsulate it within

I found some helpful source code here for using AJAX to submit a form and store user information in a database using PHP. While the code I initially used worked, I realized that for efficiency, I needed to streamline it for multiple forms performing the sa ...

Updating a user's password in Node.js using an AJAX request from a bootstrap form

I've been encountering a POST /user?userid=something 404 error while attempting to enable users to update their password without reloading the page. Can someone point out what I might have done incorrectly? Thank you. Utilizing Bootstrap modal ...

Exploring the jSignature feature in jQuery and Laravel models

I'm looking to retrieve the model (Offer) signature using jQuery. When I alert only the model, everything works fine. alert( JSON.stringify(<?php echo $offer; ?>) ); However, when trying to access just the $offer->signature like this alert( ...

Adding the most recent version of jquery causes the webpage to malfunction

Currently, I am facing a challenge on a website that has an outdated version of jQuery (1.7.2) included in the header. In order to use a plugin that requires the latest version of jQuery, I tried linking the newer version (2.1.3) in the footer. However, j ...

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below: This is my current progress: DEMO $(document).ready(function () { var slideNum = $('.page').length, wrapperWidth = 100 * s ...