Creating figures within an elliptical boundary

Question

Creating figures within an elliptical boundary

While this could be phrased as a mathematical problem, I am dealing with a programming challenge.

In my case, I am working with a List containing an unknown number of elements (cluster nodes) that is only revealed once I receive the JSON data from the server. My task is to display these nodes in a circular pattern, which requires me to calculate the values for x and y for each iteration of the loop based on the total number of elements.

I can determine the position of the i-th element along the circle using the formula theta=2*pi*i/(n). To successfully arrange the elements around a circle, I need to find the coordinates by calculating:

x = r*cos(theta)
y = r*sin(theta)

In this scenario, where I must maximize elements within a landscape layout on a computer screen, the nodes are positioned around an ellipse with a radius r that falls between two specific radii, r1 and r2.

The question then becomes: How do I calculate the coordinates when given the angle theta, and the radii r1 and r2?

javascript

Answer 1

Answer №1

Here's a slight modification to my previous response on Positioning divs in a circular pattern.

The formula for calculating the coordinates on an ellipse is:

(x, y) = (r<sub>x</sub> * cos(θ), r<sub>y</sub> * sin(θ))

where rx represents the radius along the X-axis and ry represents the radius along the Y-axis.

The function generate(n, rx, ry, id) accepts four parameters: n - number of divs, rx and ry - radii along the X and Y axes respectively, and id - the ID of the target div where you want your elliptically arranged divs to be appended.

Check out the demo on Fiddle

HTML Code:

<div id="main"></div>

JavaScript Code:

var theta = [];

var setup = function (n, rx, ry, id) {
    var main = document.getElementById(id);
    var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2));
    var circleArray = [];
    var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey'];
    for (var i = 0; i < n; i++) {
        var circle = document.createElement('div');
        circle.className = 'circle number' + i;
        circleArray.push(circle);
        circleArray[i].posx = Math.round(rx * (Math.cos(theta[i]))) + 'px';
        circleArray[i].posy = Math.round(ry * (Math.sin(theta[i]))) + 'px';
        circleArray[i].style.position = "absolute";
        circleArray[i].style.backgroundColor = colors[i];
        circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
        circleArray[i].style.left = ((mainHeight/ 2 ) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';
        main.appendChild(circleArray[i]);
    }
};

var generate = function(n, rx, ry, id) {
    var frags = 360 / n;
    for (var i = 0; i <= n; i++) {
        theta.push((frags / 180) * i * Math.PI);
    }
    setup(n, rx, ry, id)
}
generate(16, 150, 50, 'main');

CSS Styling:

div {
  box-sizing: border-box;
}

div#main {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 0%;
  top: 0%;
}

div.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Answer 2

Here's a slight modification to my previous response on Positioning divs in a circular pattern.

The formula for calculating the coordinates on an ellipse is:

(x, y) = (r<sub>x</sub> * cos(θ), r<sub>y</sub> * sin(θ))

where rx represents the radius along the X-axis and ry represents the radius along the Y-axis.

The function generate(n, rx, ry, id) accepts four parameters: n - number of divs, rx and ry - radii along the X and Y axes respectively, and id - the ID of the target div where you want your elliptically arranged divs to be appended.

Check out the demo on Fiddle

HTML Code:

<div id="main"></div>

JavaScript Code:

var theta = [];

var setup = function (n, rx, ry, id) {
    var main = document.getElementById(id);
    var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2));
    var circleArray = [];
    var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey'];
    for (var i = 0; i < n; i++) {
        var circle = document.createElement('div');
        circle.className = 'circle number' + i;
        circleArray.push(circle);
        circleArray[i].posx = Math.round(rx * (Math.cos(theta[i]))) + 'px';
        circleArray[i].posy = Math.round(ry * (Math.sin(theta[i]))) + 'px';
        circleArray[i].style.position = "absolute";
        circleArray[i].style.backgroundColor = colors[i];
        circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
        circleArray[i].style.left = ((mainHeight/ 2 ) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';
        main.appendChild(circleArray[i]);
    }
};

var generate = function(n, rx, ry, id) {
    var frags = 360 / n;
    for (var i = 0; i <= n; i++) {
        theta.push((frags / 180) * i * Math.PI);
    }
    setup(n, rx, ry, id)
}
generate(16, 150, 50, 'main');

CSS Styling:

div {
  box-sizing: border-box;
}

div#main {
  height: 500px;
  width: 500px;
  position: absolute;
  left: 0%;
  top: 0%;
}

div.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid black;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Creating figures within an elliptical boundary

Answer №1

Check out the demo on Fiddle

HTML Code:

JavaScript Code:

CSS Styling:

Similar questions

Leveraging Socket.IO server and client on separate subdomains

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

The newly added radio button does not function as a separate group as expected

Uncover the secrets of HTML with JavaScript

Issues have been identified with the capabilities of Vue's Mutations and Actions

The addEventListener function seems to encounter issues in IE11

Utilizing the .finally method on a promise that is already being handled with try/catch statements elsewhere may lead to an UnhandledPromiseRejection

Is there a way to retrieve the previous value in an input field's onChange event?

I'm always puzzled when the 'if' statement is triggered, regardless of whether

Encountering the "Unexpected token SyntaxError" message is a common issue that arises while trying to import express-handlebars

The completion event for Ajax and Json does not activate Google Maps

What is the reason behind the browser not reusing the authorization headers following an authenticated XMLHttpRequest?

The Render function in ReactJS is not getting refreshed

Guide to successfully downloading an xlsx file in angular through express

What is the best way to display a header element in front of an article element?

Challenge with Deploying VueJs: Chrome is stuck on the previous version and not refreshing the application

Triggering an event from a component to its parent module resulting in an exception situation

Tips for organizing data when parsing JSON in Javascript

When a promise is executed, it runs the code synchronously regardless of the promise

Methods for transferring data from an AJAX function