chopster44/Parachute-SVG-Generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

?

Browse Source
This commit is contained in:
Oscar Giacalone
2026-07-22 21:15:12 +01:00
parent 59a7c1c12b
commit 1aeecbf8ca
7 changed files with 138 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.idea/.gitignore generated vendored Normal file
View File

@@ -0,0 +1,10 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/
# Ignored default folder with query files
/queries/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

8
.idea/Parachute-SVG-Generator.iml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml generated Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/Parachute-SVG-Generator.iml" filepath="$PROJECT_DIR$/.idea/Parachute-SVG-Generator.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

12
index.html
View File

@@ -7,15 +7,25 @@
<h1>Parachute Panel Generator</h1> <h1>Parachute Panel Generator</h1>
<p>Generate the SVG outline of a parachute panel for an elliptical parachute. Find out more <a>here</a>.</p> <p>Generate the SVG outline of a parachute panel for an elliptical parachute. Find out more <a>here</a>.</p>
<br> <br>
<label for="u">Units:</label>
<select id="u">
<option value="px">Pixels</option>
<option value="mm">Millimetres</option>
<option value="cm">Centimetres</option>
<option value="in">Inches</option>
</select> <br>
<label for="h">Height of parachute (h):</label> <label for="h">Height of parachute (h):</label>
<input type="number" id="h" min="0"/><br> <input type="number" id="h" min="0"/><br>
<label for="r">Radius of parachute (r):</label> <label for="r">Radius of parachute (r):</label>
<input type="number" id="r" min="0"/><br> <input type="number" id="r" min="0"/><br>
<label for="rs">Radius of spill hole (r<sub>s</sub>): (leave blank to use 0.05r)</label> <label for="rs">Radius of spill hole (r<sub>s</sub>): (leave blank to use 5% of the radius)</label>
<input type="number" id="rs" /><br> <input type="number" id="rs" /><br>
<label for="np">Number of panels (n<sub>p</sub>): </label> <label for="np">Number of panels (n<sub>p</sub>): </label>
<input type="number" id="np" min="3" ><br> <input type="number" id="np" min="3" ><br>
<label for="steps">Number of steps: </label>
<input type="number" id="steps" min="10" /><br>
<button onclick="generatePanel()">Generate!</button> <button onclick="generatePanel()">Generate!</button>
<p id="len"></p>
<div id="output"></div> <div id="output"></div>
<script src="index.js" lang="js"></script> <script src="index.js" lang="js"></script>
</body> </body>

84
index.js
View File

@@ -1,8 +1,11 @@
let uInput = document.getElementById("u");
let hInput = document.getElementById("h"); let hInput = document.getElementById("h");
let rInput = document.getElementById("r"); let rInput = document.getElementById("r");
let rsInput = document.getElementById("rs"); let rsInput = document.getElementById("rs");
let npInput = document.getElementById("np"); let npInput = document.getElementById("np");
let outputdiv = document.getElementById("output"); let outputdiv = document.getElementById("output");
let stepInput = document.getElementById("steps");
let lenOutput = document.getElementById("len");
let height = 0; let height = 0;
let radius = 0; let radius = 0;
@@ -12,7 +15,7 @@ let numberOfPanels = 0;
let multiplier = 1; let multiplier = 1;
let accuracy = 8; let accuracy = 8;
const step = 0.001 * multiplier; let step = 0.001 * multiplier;
// const offset = 3*10**-15 * multiplier; // const offset = 3*10**-15 * multiplier;
const offset = 4 * 10 ** -5 * multiplier; const offset = 4 * 10 ** -5 * multiplier;
@@ -23,10 +26,12 @@ let distances = [];
let panelPoints = []; let panelPoints = [];
let n = 0; let n = 0;
let unit = "px";
let strokeWidth = 1;
// maths // maths
function approx(x) { function approx(n) {
return Math.round(x*(10**accuracy))/(10**accuracy); return Math.round(n * (10 ** accuracy)) / (10 ** accuracy);
} }
function f(x) { function f(x) {
@@ -69,6 +74,7 @@ function getValues() {
radius = /* Math.floor */(parseFloat(rInput.value) * multiplier); radius = /* Math.floor */(parseFloat(rInput.value) * multiplier);
spillRadius = /* Math.floor */(parseFloat(rsInput.value) * multiplier); spillRadius = /* Math.floor */(parseFloat(rsInput.value) * multiplier);
numberOfPanels = /* Math.floor */(parseFloat(npInput.value) * multiplier); numberOfPanels = /* Math.floor */(parseFloat(npInput.value) * multiplier);
step = radius / parseInt(stepInput.value);
if (isNaN(spillRadius)) { if (isNaN(spillRadius)) {
spillRadius = /* Math.floor */(0.05 * radius); spillRadius = /* Math.floor */(0.05 * radius);
rsInput.value = 0.05 * radius / multiplier; rsInput.value = 0.05 * radius / multiplier;
@@ -117,32 +123,80 @@ function generateCoordinates() {
function plotSVG() { function plotSVG() {
let maxY = 0; let maxY = 0;
let maxX = 0;
let minX = 1000;
panelPoints.forEach((point) => { panelPoints.forEach((point) => {
if (maxY < point.y) { if (maxY < point.y) {
maxY=point.y maxY = point.y;
}
if (minX > point.x) {
minX = point.x;
}
if (maxX < point.x) {
maxX = point.x;
} }
}) })
let pointsA = []; let pointsA = "";
let pointsB = []; let pointsB = "";
for (let i = 0; i < panelPoints.length; i++) { for (let i = 0; i < panelPoints.length; i++) {
let point = panelPoints[i]; let point = panelPoints[i];
pointsA.push(`${approx(point.x*10)},${(maxY*10)-approx(point.y*10)}`) pointsA += `${approx(point.x)},${(maxY) - approx(point.y)} `;
pointsB.push(`${approx(point.x*10)},${approx((point.y+maxY)*10)}`); pointsB +=`${approx(point.x)},${approx((point.y + maxY))} `;
} }
outputdiv.innerHTML = ` outputdiv.innerHTML = `
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg"> <svg width="297mm"
<line x1="${approx(panelPoints[0].x*10)}" x2="${panelPoints[0].x*10}" y1="${maxY*10-approx(panelPoints[0].y*10)}" y2="${approx((panelPoints[0].y+maxY)*10)}" fill="none" stroke="black" stroke-width="0.05" /> height="210mm"
<line x1="${approx(panelPoints[panelPoints.length-1].x*10)}" x2="${panelPoints[panelPoints.length-1].x*10}" y1="${maxY*10-approx(panelPoints[panelPoints.length-1].y*10)}" y2="${approx((panelPoints[panelPoints.length-1].y+maxY)*10)}" fill="none" stroke="black" stroke-width="0.05" /> xmlns="http://www.w3.org/2000/svg">
<line x1="${approx(panelPoints[0].x*10)}" x2="${panelPoints[panelPoints.length-1].x*10}" y1="${(maxY*10-approx(panelPoints[0].y*10)+approx((panelPoints[0].y+maxY)*10))/2}" y2="${(maxY*10-approx(panelPoints[panelPoints.length-1].y*10)+approx((panelPoints[panelPoints.length-1].y+maxY)*10))/2}" fill="none" stroke="black" stroke-width="0.05" /> <g id="layer1">
<polyline points="${pointsA}" fill="none" stroke="black" stroke-width="0.05" /> <line
<polyline points="${pointsB}" fill="none" stroke="black" stroke-width="0.05" /> x1="${approx(panelPoints[0].x)}${unit}"
x2="${panelPoints[0].x}${unit}"
y1="${maxY - approx(panelPoints[0].y)}${unit}"
y2="${approx((panelPoints[0].y + maxY))}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<line
x1="${approx(panelPoints[panelPoints.length - 1].x)}${unit}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}"
y1="${maxY - approx(panelPoints[panelPoints.length - 1].y)}${unit}"
y2="${approx((panelPoints[panelPoints.length - 1].y + maxY))}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<line
x1="${approx(panelPoints[0].x)}${unit}"
x2="${panelPoints[panelPoints.length - 1].x}${unit}"
y1="${(maxY - approx(panelPoints[0].y) + approx((panelPoints[0].y + maxY))) / 2}${unit}"
y2="${(maxY - approx(panelPoints[panelPoints.length - 1].y) + approx((panelPoints[panelPoints.length - 1].y + maxY))) / 2}${unit}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<polyline
points="${pointsA}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
<polyline
points="${pointsB}"
fill="none"
stroke="black"
stroke-width="${strokeWidth}"
/>
</g>
</svg> </svg>
` `;
lenOutput.innerText = `Recommended length: ${approx(maxX - minX)} ${unit}`;
} }
// main func // main func
function generatePanel() { function generatePanel() {
unit=uInput.value;
getValues(); getValues();
getPoints(); getPoints();
getPointsOfTangentIntersection(); getPointsOfTangentIntersection();

2
package.json
View File

@@ -7,7 +7,7 @@
"url": "git@git.emaker.limited:chopster44/Parachute-SVG-Generator.git" "url": "git@git.emaker.limited:chopster44/Parachute-SVG-Generator.git"
}, },
"license": "SEE LICENSE IN LICENSE", "license": "SEE LICENSE IN LICENSE",
"author": "chopster44", "author": "Oscar Giacalone",
"type": "commonjs", "type": "commonjs",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {