Arranging misshapen circles on the exterior of a sphere

Question

Arranging misshapen circles on the exterior of a sphere

My current project involves utilizing Three.js to position circles of various sizes evenly across the surface of a sphere, inspired by the concept seen in the periodic table of elements example.

Despite extensive research efforts, I've come to the realization that achieving this seemingly simple task is much more complex than anticipated.

For reference, here are some demonstrations showcasing a similar idea:

Vimeo

Picture

circlePack Java applet

I am searching for an algorithm that can facilitate this task efficiently, without requiring an overly high packing ratio. Ideally, this algorithm would be easily implementable in JavaScript for rendering in Three.js, utilizing either the Cartesian or Coordinate system.

The sizes of the circles vary significantly. To illustrate, consider this demonstration using the periodic table code:

javascript algorithm three.js geometry circle-pack

Answer 1

Answer №1

Consider this unique approach: implementing an iterative search technique utilizing a simulated repulsive force.

Strategy

To begin, set up the dataset by positioning the circles on the surface in an algorithmic manner for initialization purposes. This initial arrangement does not need to be precise, so a simple periodic table layout will suffice. Additionally, assign each circle a "mass" equivalent to its radius.

Next, start the iteration process in order to converge towards a solution. For each cycle through the primary loop, follow these steps:

Calculate repulsive forces for each circle, resembling the formula for gravitational force but with adjustments: (a) objects are repelled rather than attracted, and (b) adjust the "force constant" according to the model's scale. It may be beneficial to pre-determine a suitable constant or experiment initially to find an optimal value.
Upon determining the total forces on each circle (refer to the n-body problem if needed), displace each circle along the direction of the total force vector, with the vector's magnitude as the distance to traverse. It might be necessary to fine-tune the force constant to ensure movements are less than 5% of the circle's radius initially.
Due to the movements in the previous step, circles may be pushed off the surface of the sphere. Return each circle to the surface, moving towards the sphere's center.
Compute the distance between the circle's previous and new positions to determine the iteration's movement length.

Continue iterating through the main loop until movement length diminishes, indicating stabilized circle positions that meet the criteria. Terminate the loop when the movement length falls below a minute threshold.

Adjustments

To achieve convergence, adjustments to the force calculation may be necessary. The modifications depend on the desired outcome. Initially, modify the force constant. If ineffective, adjust the mass values or alter the exponent in the force calculation. For instance, instead of:

f = ( k * m[i] * m[j] ) / ( r * r );

Consider experimenting with:

f = ( k * m[i] * m[j] ) / pow( r, p );

Explore varying values for p during experimentation.

Additionally, test out alternate algorithms for the initial arrangement.

The level of trial and error will hinge on your specific design objectives.

Answer 2

Consider this unique approach: implementing an iterative search technique utilizing a simulated repulsive force.

Strategy

To begin, set up the dataset by positioning the circles on the surface in an algorithmic manner for initialization purposes. This initial arrangement does not need to be precise, so a simple periodic table layout will suffice. Additionally, assign each circle a "mass" equivalent to its radius.

Next, start the iteration process in order to converge towards a solution. For each cycle through the primary loop, follow these steps:

Calculate repulsive forces for each circle, resembling the formula for gravitational force but with adjustments: (a) objects are repelled rather than attracted, and (b) adjust the "force constant" according to the model's scale. It may be beneficial to pre-determine a suitable constant or experiment initially to find an optimal value.
Upon determining the total forces on each circle (refer to the n-body problem if needed), displace each circle along the direction of the total force vector, with the vector's magnitude as the distance to traverse. It might be necessary to fine-tune the force constant to ensure movements are less than 5% of the circle's radius initially.
Due to the movements in the previous step, circles may be pushed off the surface of the sphere. Return each circle to the surface, moving towards the sphere's center.
Compute the distance between the circle's previous and new positions to determine the iteration's movement length.

Continue iterating through the main loop until movement length diminishes, indicating stabilized circle positions that meet the criteria. Terminate the loop when the movement length falls below a minute threshold.

Adjustments

To achieve convergence, adjustments to the force calculation may be necessary. The modifications depend on the desired outcome. Initially, modify the force constant. If ineffective, adjust the mass values or alter the exponent in the force calculation. For instance, instead of:

f = ( k * m[i] * m[j] ) / ( r * r );

Consider experimenting with:

f = ( k * m[i] * m[j] ) / pow( r, p );

Explore varying values for p during experimentation.

Additionally, test out alternate algorithms for the initial arrangement.

The level of trial and error will hinge on your specific design objectives.

Answer 3

Answer №2

Here is a starting point for you to work with. This code will help in distributing your spheres randomly along a larger sphere. The goal is to eventually achieve an even distribution by iterating over the initial setup.

// Random point on sphere of radius R
var sphereCenters = []
var numSpheres = 100;
for(var i = 0; i < numSpheres; i++) {
    var R = 1.0;
    var vec = new THREE.Vector3(Math.random(), Math.random(), Math.random()).normalize();
    var sphereCenter = new THREE.Vector3().copy(vec).multiplyScalar(R);
    sphereCenter.radius = Math.random() * 5; // Varying sphere sizes can be added here.
    sphereCenters.push(sphereCenter);

    // Create a Three.js sphere at sphereCenter
    ...
}

To efficiently pack the spheres, run the following code multiple times:

for(var i = 0; i < sphereCenters.length; i++) {
    for(var j = 0; j < sphereCenters.length; j++) {
        if(i === j)
            continue;

        // Calculate the distance between sphereCenters[i] and sphereCenters[j]
        var dist = new THREE.Vector3().copy(sphereCenters[i]).sub(sphereCenters[j]);
        if(dist.length() < sphereSize) {
             // Adjust the position of the sphere to prevent overlap.

             // Determine the required movement distance
             var mDist = sphereSize - dist.length();

             // Shift the sphere in the direction of dist by magnitude mDist
             var mVec = new THREE.Vector3().copy(dist).normalize();
             mVec.multiplyScalar(mDist);

             // Update the position of the sphere
             sphereCenters[i].add(mVec).normalize().multiplyScalar(R);
        }
    }
}

Repeatedly running the adjustment section will gradually move towards the desired distribution. It is essential to find the optimal balance between speed and accuracy by deciding the number of iterations to perform.

Answer 4

Here is a starting point for you to work with. This code will help in distributing your spheres randomly along a larger sphere. The goal is to eventually achieve an even distribution by iterating over the initial setup.

// Random point on sphere of radius R
var sphereCenters = []
var numSpheres = 100;
for(var i = 0; i < numSpheres; i++) {
    var R = 1.0;
    var vec = new THREE.Vector3(Math.random(), Math.random(), Math.random()).normalize();
    var sphereCenter = new THREE.Vector3().copy(vec).multiplyScalar(R);
    sphereCenter.radius = Math.random() * 5; // Varying sphere sizes can be added here.
    sphereCenters.push(sphereCenter);

    // Create a Three.js sphere at sphereCenter
    ...
}

To efficiently pack the spheres, run the following code multiple times:

for(var i = 0; i < sphereCenters.length; i++) {
    for(var j = 0; j < sphereCenters.length; j++) {
        if(i === j)
            continue;

        // Calculate the distance between sphereCenters[i] and sphereCenters[j]
        var dist = new THREE.Vector3().copy(sphereCenters[i]).sub(sphereCenters[j]);
        if(dist.length() < sphereSize) {
             // Adjust the position of the sphere to prevent overlap.

             // Determine the required movement distance
             var mDist = sphereSize - dist.length();

             // Shift the sphere in the direction of dist by magnitude mDist
             var mVec = new THREE.Vector3().copy(dist).normalize();
             mVec.multiplyScalar(mDist);

             // Update the position of the sphere
             sphereCenters[i].add(mVec).normalize().multiplyScalar(R);
        }
    }
}

Repeatedly running the adjustment section will gradually move towards the desired distribution. It is essential to find the optimal balance between speed and accuracy by deciding the number of iterations to perform.

Answer 5

Answer №3

To achieve a similar effect to the periodic table of elements, you can utilize the code provided. Instead of rectangles that do not touch, you can create circles by adjusting the code appropriately.

Take a look at the code snippet below:

            var vector = new THREE.Vector3();

            for ( var i = 0, l = objects.length; i < l; i ++ ) {

                var phi = Math.acos( -1 + ( 2 * i ) / l );
                var theta = Math.sqrt( l * Math.PI ) * phi;

                var object = new THREE.Object3D();

                object.position.x = 800 * Math.cos( theta ) * Math.sin( phi );
                object.position.y = 800 * Math.sin( theta ) * Math.sin( phi );
                object.position.z = 800 * Math.cos( phi );

                vector.copy( object.position ).multiplyScalar( 2 );

                object.lookAt( vector );

                targets.sphere.push( object );

            }

Answer 6

To achieve a similar effect to the periodic table of elements, you can utilize the code provided. Instead of rectangles that do not touch, you can create circles by adjusting the code appropriately.

Take a look at the code snippet below:

            var vector = new THREE.Vector3();

            for ( var i = 0, l = objects.length; i < l; i ++ ) {

                var phi = Math.acos( -1 + ( 2 * i ) / l );
                var theta = Math.sqrt( l * Math.PI ) * phi;

                var object = new THREE.Object3D();

                object.position.x = 800 * Math.cos( theta ) * Math.sin( phi );
                object.position.y = 800 * Math.sin( theta ) * Math.sin( phi );
                object.position.z = 800 * Math.cos( phi );

                vector.copy( object.position ).multiplyScalar( 2 );

                object.lookAt( vector );

                targets.sphere.push( object );

            }

Arranging misshapen circles on the exterior of a sphere

Answer №1

Answer №2

Answer №3

Similar questions

Can someone provide a description for a field within typedoc documentation?

Clicking on the input triggers the appearance of a border using the OnClick function

What is the process for uploading a single file and an array of files with varying names using multer?

Exploring the possibilities of utilizing classes in testing scenarios with Vue, Cypress, and Cucumber

Is there a way to apply a smooth fade-in effect to an object using Three.js animations?

Change the behavior of a submit button to trigger a custom JavaScript function instead

Ways to transfer information from an axios API to a state in React

Trigger event upon variable modification

Difficulty altering link hover background color

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

Modifying an image or audio using document.getElementByID("...").src=x+".png" is not effective

Obtaining status codes from URLs can be achieved by leveraging various methods

UPDATE: Choosing several classes and then toggling the classes independently for each one

What is the best way to transfer information from a child Angular app to a parent non-Angular app

Adding a class to the body for a specific route in web development

Tips for causing the JavaScript confirm alert to appear just a single time

Arranging the index of an array according to a separate array of objects in JavaScript using Vue

Dynamically access nested objects by utilizing an array of strings as a pathway

What measures can be taken to keep the rightmost element from moving when hovered over?

Effective ways to replace an image using JavaScript