Can you explain the function of MathUtils.euclideanModulo and how it sets itself apart from the traditional modulo operation?

I'm a little puzzled by the euclideanModulo function in threejs's mathutils. I understand the concept of the modulo operator, but the euclideanModulo function seems to work differently.

( ( n % m ) + m ) % m

I tried researching the meaning of "Euclidean," but all I found was a definition related to Euclid's geometry. This didn't really help me understand the function.

Euclidean: relating to or denoting the system of geometry based on the work of Euclid and corresponding to the geometry of ordinary experience.

Can someone clarify this for me? I'm struggling to find a more in-depth explanation anywhere.

Answer №1

A commonly known bug in Javascript involves modulo calculations with negative numbers. Imagine x % 4 as a wheel of numbers:

https://i.sstatic.net/6NR9v.jpg

  • When x transitions from 0 to positive numbers, the results are: 0, 1, 2, 3, 0, 1, 2, ....
  • When x transitions from 0 to negative numbers, the results are: 0, 3, 2, 1, 0, 3, 2, ...

However, in JavaScript, when you calculate -5 % 4, the result is -1, which is incorrect. It's not even a valid answer. How can a negative remainder exist?! The correct answer should be 3. Below is a comparison of correct answers versus incorrect answers in Javascript:

1 % 4 = 1   // JS result: 1
0 % 4 = 0   // JS result: 0
-1 % 4 = 3  // JS result: -1
-2 % 4 = 2  // JS result: -2
-3 % 4 = 1  // JS result: -3
-4 % 4 = 0  // JS result: -0
-5 % 4 = 3  // JS result: -1

To simplify things, Three.js provides a utility to correctly handle this JavaScript bug. Using

THREE.MathUtils.euclideanModulo(-5, 4)
will give you the accurate result of 3.

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

Experiencing an issue of receiving an undefined value while attempting to retrieve a value from an input box

HTML: <input value='Rename' type='button' onclick='RenameGlobalPhase({$row['id']});' <span id='renameGlobalPhase{$row['id']}'>" . $row['phase'] . "</span> Below you wil ...

Error in ReactJS: Trying to access property 'items' of an undefined object

I've been diving into ReactJS, but I've hit a roadblock with this perplexing error. My goal is to update the parent's items array state from its child component. To achieve this, I attempted to pass the addItem function as a prop to the chi ...

Off Canvas left navigation menu using Bootstrap

I am working on creating a responsive layout for a webpage using Bootstrap. On larger displays, such as desktop resolutions, I want the webpage to show the header and left navigation as normal. However, when the site is resized to that of tablets or mobile ...

How can I ensure that I am only retrieving the first object within a "for loop" in vuejs and returning its value without getting the rest?

Why am I only able to retrieve the value of the first object in my "for loop" and not all three values as intended? var app = new Vue({ el: '#app', data: { myObj: [ {name: 'Hello', age: 10}, {name: ...

Updating WordPress div content based on selected post type using dropdown menu

I am in the process of developing a WordPress plugin that will generate a custom post type and widget for users to add to their websites. The goal is to have the widget display a dropdown select box with titles of each post, and when a title is selected, t ...

An array is not just a mere collection of elements

I have an object that resembles an array var items = [ { started_time: 2017-05-04T12:46:39.439Z, word: 'bottle', questionId: '161013bd-00cc-4ad1-8f98-1a8384e202c8' }, { started_time: 2017-05-04T12:47:26.130Z, word: &apo ...

What is the best way to automatically create a PDF file that includes interactive JavaScript charts?

My goal is to create a word document or PDF containing charts from various JavaScript chart libraries. I've successfully implemented these libraries on websites, but now I want to include them in my documents as well. My initial attempt involved usin ...

The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Utilizing the UI Bootstrap drop-down element to display the calendar from angular-bootstrap-datetimepicker upon clicking. Additionally, a $watch has been implemented to close the dropdown once a date is chosen. Access the Plunker here <div uib-dropdow ...

Update MYSQL table values using AJAX and jQuery, then dynamically refresh the updated values on the web page

Hey there! I am fairly new to utilizing ajax and encountering some difficulty with a fundamental concept. In my MySQL table called "users," I have various user information stored, including the balance they pledge to donate. My goal is to create a div elem ...

Obtaining POST information from Web2py to a personal HTML document

Dealing with heavy jQuery cross-domain issues, I have turned to using web2py as a workaround. I am sending POST data from a local HTML file to my web2py server, which then makes a Python POST request to a second server (solving the cross-domain problem) a ...

Reduce the size of log messages in cypress

I am looking to shorten the cypress messages to a more concise string, for instance: Cypress log Transform to: -assert expected #buy-price-field to have value 17,169.00. Is there a way to achieve this? I have searched through the documentation but hav ...

Why does json_encode() work for one string and fail for another?

UPDATE: Resolved the issue. Initially, someone left a comment with a solution that was later deleted. Interestingly, simply adding semi-colons after the two json_encode lines fixed the problem. I'm still puzzled as to why string1 worked without a clo ...

When querying parameters within a URL, you may encounter JavaScript (Node) errors

My current setup involves using Firebase Cloud Functions, but I have run into an issue. Whenever a parameter with a # symbol is received, it does not get recognized. For instance: http://example.net?id=123#456. When I check the logged id, only 123 is disp ...

Flashing tilemap during the update process

I'm attempting to create a game map on a canvas using a JSON file produced by tiled map editor. I believe I am close to accomplishing this, but I encounter one issue. When I include the call to load the map in my update function, the map flickers on ...

Opting for a .catch over a try/catch block

Instead of using a traditional try/catch to manage errors when initiating requests like the example below: let body; try { const response = await sendRequest( "POST", "/api/AccountApi/RefundGetStatus", JSON.stringify(refundPara ...

What is the reason for the find() method not displaying the most recent data from a MongoDB database in an Express.js application?

Upon calling the app.post('/form-submit', funtion(req, res)) method, my expectation is for it to first save the data using save(). This works fine, but then when I call the find() method, it shows all the data from the mongoDB database except for ...

Tips on how to automatically resize the browser window to a specific width and height once it has been minimized

If a JSP page is minimized onload, we need to find a way to restore it through a JavaScript call. Are there any other methods available for achieving this? The restoration should be to the height and width selected by the user. I have attempted the followi ...

Automatically open the first panel of the Jquery Accordion

Is there a way to automatically have the first panel in my JQuery accordion open when all panels are initially closed? Here is the HTML code for my accordion: <div class="accordionx"> <div class="acitemx"> <h3>First Panel</h3> ...

What factors influence the speed of an Ajax request?

It is common knowledge that the amount of data transmitted to the server, as well as the volume of information returned in a call can greatly affect its speed. However, what I am curious about is whether the following factors might also impact the transmi ...

Retrieve information from an express server using the fetch API

I am attempting to use the alert function to display a variable string in Express's .get() method and then send it using res. I want the alert to show "I am working fetch". This is my server.js var express = require('express'); var app = e ...