Creating curved arcs within a polyline by utilizing the bulge feature in THREE.JS

Currently, I am importing a CAD file from a DXF format and I am looking for a way to draw an arc between two arbitrary points with a bulge value. My approach involves using THREE.Line to create segments of the arc.

This resource outlines some of the essential calculations in LISP, but it lacks detailed explanations regarding the center-point calculation. Additionally, I am unsure about the functionality of the angle function in the provided example code (potentially the angle between two points using 0,0 as the origin?). The code snippet in question is as follows:

;; Bulge to Arc  -  Lee Mac
;; p1 - start vertex
;; p2 - end vertex
;; b  - bulge
;; Returns: (<center> <start angle> <end angle> <radius>)

(defun LM:Bulge->Arc ( p1 p2 b / a c r )
    (setq a (* 2 (atan b))
          r (/ (distance p1 p2) 2 (sin a))
          c (polar p1 (+ (- (/ pi 2) a) (angle p1 p2)) r)
    )
    (if (minusp b)
        (list c (angle c p2) (angle c p1) (abs r))
        (list c (angle c p1) (angle c p2) (abs r))
    )
)

While I comprehend the calculation of a (theta) and r (radius), I am struggling with understanding the process of determining the center-point, which I believe is crucial for segmenting my arc accurately. If anyone could shed light on the mathematical concepts involved and possibly offer some JavaScript code, I would greatly appreciate it.

Answer №1

After some collaboration with a colleague, the solution to this puzzle became clear:

Within the lisp code snippet, the variable a (also known as theta) was simplified to 2atan(b) instead of 4atan(b). This modification was made because only half of the angle was necessary for subsequent calculations involving the center point c and radius r, rather than the full angle.

The angle function in lisp determines the angle of a vector (specifically, p1 -> p2) where 0 represents the positive x-axis, pi / 2 represents the positive y-axis, and so on. Combining the angle of the chord with the angle between the chord and vector p1 -> c, which is (pi - pi/2 - a), provided sufficient information to perform a polar coordinate calculation and derive the coordinates of the center point c.

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

AngularJS: incorporating various functionalities within a single controller

I have a basic AngularJS controller that I am working on, and I would like it to include two separate functions: var app = angular.module('searchApp', []); app.controller('searchCtrl', function($scope, $http, $log) { //Function 1 ...

Removing a parameter from a link in Vue.js: A step-by-step guide

I currently have the following list of URLs: http://example.com/post?st=1&plt=123&number=1 http://example.com/post?st=1&plt=[exp]&number=1 http://example.com/post/view/12?ex=1&plt=123 http://example.com/post/edit/12?ex=1&tes ...

What causes my input field to lose focus in React.js after typing just one character?

My react.js component is experiencing an issue where the input field loses focus whenever a character is typed. To continue typing or editing, I have to click on the input field again. What could be causing this problem? Below is the code snippet in quest ...

How can jQuery help me load a lengthy webpage with various backgrounds that change according to the vertical scroll value?

I have been given a design that is 960px wide and approximately 7000px tall, divided into five segments stacked vertically at random points. There is a fixed sidebar that scrolls to each segment when a navigation link is clicked. The layout includes slider ...

Error encountered: "Unable to process Three.js FontLoader due to SyntaxError

I attempted to generate 3D text with FontLoader in Three.js, but encountered an error. My Three.js version is r99. const loader = new THREE.FontLoader(); //https://github.com/mrdoob/three.js/tree/dev/examples/fonts loader.load("./fonts/helvetiker_ ...

JavaScript file slicing leads to generating an empty blob

I am currently working on a web-based chunked file uploader. The file is opened using the <input type="file" id="fileSelector" /> element, and the following simplified code snippet is used: $('#fileSelector').on('change', functio ...

The Node.js application gracefully exited with code 0 with Forever

Running a Node.js Express app on CentOs 6.5 using the root account: root@vps [/home/test/node]# npm start app.js > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aedacbdddaee9e809e809f">[email protected]</a> s ...

The "body" object cannot be accessed in a post request made from an Express router

I am currently utilizing Express router functions to manage some POST requests. Client.js let data = { endpoint: "Blah Blah"; }; return fetch('/api/get-preferences/', { method: 'POST', headers: { 'Content-Type': & ...

Run the JavaScript configuration (Object) prior to converting it to JSON format

Is there a way to implement functions within a JavaScript file (configuration for backend server) that execute before parsing the data to JSON? For example: config.js module.exports = { structure_layout: { BUILDING: "BUILDING", FLOOR: ...

React-spring is causing an increase in the number of hooks rendered compared to the previous render in React

I've encountered a similar issue as discussed on SO, but I'm struggling to resolve the problem detailed below. The scenario This code snippet found at the following link is functional: https://codesandbox.io/s/frosty-water-118xp?file=/src/App. ...

Why is my element still occupying space even though it has been hidden with a display of none?

Currently, I'm working on a dropdown navigation menu where one of the list items causes space issues when the display property is set to none. Specifically, the 'Book A Table' item isn't meant to be visible in the center div when the sc ...

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many? I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked ...

Avoid duplication of elements in Angular applications

Currently, I have a component that loads animated divs based on a datasource. *Note: In the example, I've used a lot of <any> because I haven't finalized the model yet. apiService.ts dataArray: Observable<Array<any>>; constru ...

"Transforming a query into a JSON array - a step-by-step

My query generates the following output: { key:1,label:"R. Bulan"} { key:2,label:"R. Bintang"} { key:3,label:"R. Akasia"} { key:4,label:"R. Guest Room"} This is my SQL query: select '{ '||'key:'||IDMEETINGROOM||''||',l ...

A gojs swim lane diagram requires a date axis to provide accurate time representation

I am currently working on a web application that requires a vertical swim lane activity diagram with a customized date axis displayed alongside it. The nodes in the diagram should be positioned based on their date attribute, and users should have the abili ...

Filter a Vue list based on a checkbox that can be either checked or unchecked

I am currently working on my Vue app and aiming to filter a list to display only entries that have been moderated. However, I am encountering an issue where when the checkbox is checked, I receive all the results that are true, and when the checkbox is un ...

Question about sending multiple Axios POST requests with parameters

I'm new to Stack Overflow and seeking help with a specific issue on my Rails backend and Vue.js frontend website. The challenge I'm facing involves making two POST requests simultaneously when the submit button is clicked. My "Trips" controller ...

What could be causing this code to continuously loop without end?

I've been scratching my head trying to understand why this code isn't working. var refP = []; var calculateDistance = function (p1, p2) { return dist(p1.x, p1.y, p2.x, p2.y); } while (refP.length < 24) { var point = { x: -1, ...

Tips for organizing an object according to specific attributes

Within my table, I have implemented a feature that allows the display of only selected columns at a time. To achieve this, I store the chosen columns (table headings) in an array called selectedTableHeaders. The next step is to filter out a new array bas ...

Obtaining Data from an XML Node Using AJAX

Trying to extract statistics from my XML based on a specific name request, but encountering issues with my JavaScript functionality. XML data: <player> <forward><name>Joe</name><stats>45</stats></forward> <f ...