Algorithm for Generating Cubes

Question

Algorithm for Generating Cubes

My current task involves working with a dynamically generated array of cubes, each having its distinct position and color. These cubes are situated on a 5x5 field, where each cube is connected to at least one other cube. Now, I am looking to introduce a new "floating cube feature". This entails randomly incorporating a cube that does not have any other cube above or below it but remains connected to another cube on one side (refer to the image).

Here is the visual representation of what needs to be added: https://i.sstatic.net/ChFxS.png

Below is the array showcasing the cubes on the image:

var cube_arr = [{posX: -2, posY: 0, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 1, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 2, posZ: 1, color: "green", row: 1},
{posX: -2, posY: 3, posZ: 1, color: "purple", row: 1},
...
{posX: 2, posY: 2, posZ: 0, color: "yellow", row: 5}]

javascript algorithm random three.js 3d

Answer 1

Answer №1

Testing this out can be difficult without visualization. It's important to test the code properly to ensure it works as expected.

The function randomFloatingCube takes in an array of cubes, as well as minimum and maximum values for posX and posZ to prevent the floating cube from being generated outside a specific area.

At the end of the randomFloatingCube function, a single random cube is returned. If you want all possible floating cubes, return the array floatingCubes instead.

If you try out the code, please let me know if it meets your expectations.

// Function to get a floating cube within a specified range
function randomFloatingCube(A, x0, x1, z0, z1){
  let floatingCubes = [];
  
  const B = A.sort((a, b) => b.posY - a.posY).filter((b) => b.posY > 0);
  
  for(let i=0; i<B.length; i++){
    const a = B[i];
    
    let adjacent = getAdjacentCubes(a.posY, a.posX, a.posZ);
    
    let candidates = adjacent.filter((c) => {
    
      if(c.posX < x0 && c.posX > x1 && c.posZ < z0 && c.posZ > z1){
        return false;
      }
      for(let j=0; j<A.length; j++){
        const b = A[j];
        
        if(b.posY >= c.posY - 1 && b.posY <= c.posY + 1 && c.posX == b.posX && c.posZ == b.posZ){
          return false;
          break;
        } else if(b.posY == c.posY && b.posZ == c.posZ && b.posX == c.posX) {
          return false;
          break;
        }
      }
      
      return true;
      
    });
    
    floatingCubes.push(...candidates);
  }

  return floatingCubes[ Math.round(Math.random() * (floatingCubes.length - 1)) ];
}

function getAdjacentCubes(posY, posX, posZ){
  let ret = [];
  
  [posX-1, posX+1].forEach((x)=>{
    ret.push({
      posY,
      posX: x,
      posZ
    });
  });
  [posZ-1, posZ+1].forEach((z)=>{
    ret.push({
      posY,
      posX,
      posZ: z
    });
  });

  return ret;
}

// Array of cube objects
var cube_arr = [{posX: -2, posY: 0, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 1, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 2, posZ: 1, color: "green", row: 1},
{posX: -2, posY: 3, posZ: 1, color: "purple", row: 1},
...

console.log(randomFloatingCube(cube_arr, -2, 2, -1, 2));

Answer 2

Testing this out can be difficult without visualization. It's important to test the code properly to ensure it works as expected.

The function randomFloatingCube takes in an array of cubes, as well as minimum and maximum values for posX and posZ to prevent the floating cube from being generated outside a specific area.

At the end of the randomFloatingCube function, a single random cube is returned. If you want all possible floating cubes, return the array floatingCubes instead.

If you try out the code, please let me know if it meets your expectations.

// Function to get a floating cube within a specified range
function randomFloatingCube(A, x0, x1, z0, z1){
  let floatingCubes = [];
  
  const B = A.sort((a, b) => b.posY - a.posY).filter((b) => b.posY > 0);
  
  for(let i=0; i<B.length; i++){
    const a = B[i];
    
    let adjacent = getAdjacentCubes(a.posY, a.posX, a.posZ);
    
    let candidates = adjacent.filter((c) => {
    
      if(c.posX < x0 && c.posX > x1 && c.posZ < z0 && c.posZ > z1){
        return false;
      }
      for(let j=0; j<A.length; j++){
        const b = A[j];
        
        if(b.posY >= c.posY - 1 && b.posY <= c.posY + 1 && c.posX == b.posX && c.posZ == b.posZ){
          return false;
          break;
        } else if(b.posY == c.posY && b.posZ == c.posZ && b.posX == c.posX) {
          return false;
          break;
        }
      }
      
      return true;
      
    });
    
    floatingCubes.push(...candidates);
  }

  return floatingCubes[ Math.round(Math.random() * (floatingCubes.length - 1)) ];
}

function getAdjacentCubes(posY, posX, posZ){
  let ret = [];
  
  [posX-1, posX+1].forEach((x)=>{
    ret.push({
      posY,
      posX: x,
      posZ
    });
  });
  [posZ-1, posZ+1].forEach((z)=>{
    ret.push({
      posY,
      posX,
      posZ: z
    });
  });

  return ret;
}

// Array of cube objects
var cube_arr = [{posX: -2, posY: 0, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 1, posZ: 1, color: "red", row: 1},
{posX: -2, posY: 2, posZ: 1, color: "green", row: 1},
{posX: -2, posY: 3, posZ: 1, color: "purple", row: 1},
...

console.log(randomFloatingCube(cube_arr, -2, 2, -1, 2));

Algorithm for Generating Cubes

Answer №1

Similar questions

What is the best way to prevent clicking and scrolling on a webpage?

Issues with AngularJS have arisen, as it is currently unable to recognize and access variables as needed

Create a basic single page application with Node.js and Express

Sending all form input data to Ajax for GET request

MUI React - Issue with changing SvgIcon color using override

Searching in binary for the number closest to the target float value

Leveraging Vue 3 Composition API with accessors

Submitting information in a Node.js application

Retrieving data from MySQL through AJAX does not yield any information

Disconnection between client and server communications

Setting the default value in setState in React Native allows you to initialize state

Utilize the inherited background color for a linear-gradient effect

Turn on the text field when the enter key is pressed

Tips for defining a distinct series of key-value pairs in typescript

Arrange an array in JavaScript according to the value of its keys

Learn how to send data from a MySQL server to a Node.js application using Socket.IO

What is the process for validating dates using JavaScript?

Numerous images with clickable features

The concept of JavaScript variable scope

Creating multiple instances of an object