Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added 3D Surface Plotter Calculator #1444

Merged
merged 8 commits into from
Jul 1, 2024
Merged

Added 3D Surface Plotter Calculator #1444

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ea7e71c
Added 3D Surface Plotter
pandeyji711 Jun 25, 2024
364ccff
added necessary changes.
pandeyji711 Jun 28, 2024
b390a13
added necessary changes.
pandeyji711 Jun 28, 2024
433a458
Update README.md
Rakesh9100 Jul 1, 2024
7133c83
Update index.html
Rakesh9100 Jul 1, 2024
84fac07
Update script.js
Rakesh9100 Jul 1, 2024
7c25380
Update style.css
Rakesh9100 Jul 1, 2024
feae83f
Update index.html
Rakesh9100 Jul 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions Calculators/3D Surface Plotter/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
function plotSurface() {
const func = document.getElementById("function").value;
const plotDiv = document.getElementById("plot");

const xRange = [...Array(50).keys()].map((i) => -5 + i * 0.2);
const yRange = [...Array(50).keys()].map((i) => -5 + i * 0.2);
const zValues = xRange.map((x) =>
yRange.map((y) => eval(func.replace(/x/g, x).replace(/y/g, y)))
);

const data = [
{
z: zValues,
x: xRange,
y: yRange,
type: "surface",
},
];

Plotly.newPlot(plotDiv, data);
}

plotSurface();
20 changes: 20 additions & 0 deletions Calculators/3D Surface Plotter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Surface Plotter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<h1>3D Surface Plotter</h1>
<label for="function">Function:</label>
<input type="text" id="function" value="x*x + y*y">
<button onclick="plotSurface()">Plot</button>
<div id="plot"></div>
</div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="app.js"></script>
</body>
</html>
71 changes: 71 additions & 0 deletions Calculators/3D Surface Plotter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.calculator {
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
padding: 30px;
text-align: center;
max-width: 500px;
width: 100%;
}

h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}

label {
display: block;
font-weight: bold;
margin-top: 15px;
color: #555;
}

input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
}

button {
background: #ff7e5f;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin-top: 20px;
transition: background 0.3s, box-shadow 0.3s;
}

button:hover {
background: #feb47b;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#plot {
width: 100%;
height: 500px;
margin-top: 20px;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
overflow: hidden;
}

15 changes: 14 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,20 @@ <h1>Search Calculator</h1><br>
<input type="text" id="calculatorSearch" placeholder="Enter Calculator Name" oninput="filterCalculators()">
</div>
</div>

<div class="box">
<div class="content">
<h2>3D Surface Plotter</h2>
<h3>Plot 3D surfaces for given functions.</h3>
<div class="card-footer">
<a href="./Calculators/3D Surface Plotter/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/3D Surface Plotter" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>2D Distance Calculator</h2>
Expand Down