Creating a grid in JavaScript using a formula

Question

Creating a grid in JavaScript using a formula

I'm looking to create a grid of objects using JavaScript. Unfortunately, I can't remember the formula and I haven't been able to find it online:

            var width = 113;
            var height = 113;
            var col = 10;
            var row = 10;

            for (var j = 0; j < col; j++) {
                 var object = new object();
                 object.position.x = 0 + width * j
                 // Do I need another loop here?
                 // Add object to....
             }

Currently, this code will give me a row of 10 objects spaced according to their width. However, I also want to create columns to form a 10x10 grid. Any ideas on how to achieve this using JavaScript?

javascript three.js

Answer 1

Answer №1

To achieve this, you can utilize two nested for loops:

var width = 113;
var height = 113;
var col = 10;
var row = 10;

var space = ...;

// Loop through rows
for ( j = 0; j < row; j ++ ) {
     // Loop through columns in each row
     for ( i = 0; i < col; i ++ ) {
         // j represents the row index and i represents the column index
         var object = new object();
         object.position.x = (width + space) * i;
         object.position.y = (height + space) * j;
         // Add object to...
     }
 }

Answer 2

To achieve this, you can utilize two nested for loops:

var width = 113;
var height = 113;
var col = 10;
var row = 10;

var space = ...;

// Loop through rows
for ( j = 0; j < row; j ++ ) {
     // Loop through columns in each row
     for ( i = 0; i < col; i ++ ) {
         // j represents the row index and i represents the column index
         var object = new object();
         object.position.x = (width + space) * i;
         object.position.y = (height + space) * j;
         // Add object to...
     }
 }

Creating a grid in JavaScript using a formula

Answer №1

Similar questions

Utilizing a function as an argument in another function (with specified parameters)

What are some potential causes of webpack-dev-server's hot reload feature not working properly?

Getting the Height and Width of an Image during the upload process in a React application

Issue with character encoding in jQuery-ui tabs

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Transmission of state modifications in React

How can I retrieve the offset top of a td element in relation to its parent tr element?

Implementing the jquery mobile data-native-menu feature in a select element dynamically generated from jeditable

Ensuring the presence of an attribute within an AngularJS Directive

Choose particular spreadsheets from the office software

No information is being emitted by the subject

Discovering the right place to establish global data in Nuxt JS

Locating the save directory with fileSystem API

Creating JSON arrays with JavaScript and jQuery

What is preventing me from returning the result of $.ajax, but I can return the result of $http.post?

Creating a large JSON file (4 GB) using Node.js

What is the best way to apply a hover effect to a specific element?

Using React to pass a value through state when handling changes

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

My Node.js script seems to be experiencing some issues