Scribd
Upload
7 views8 pages

Gibberish

Uploaded by

the.guest.joke
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views8 pages

Gibberish

Uploaded by

the.guest.joke
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Variables for colors and theme */
:root {
--primary: #2196F3;
--background: #121212;
--surface: #1e1e1e;
--text: #ffffff;
--text-secondary: #aaaaaa;
--error: #cf6679;
--grid: #2c2c2c;
--axis: #404040;
--button: #2c2c2c;
--button-hover: #383838;
}

/* Reset and global styles */


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: system-ui, -apple-system, sans-serif;
background-color: var(--background);
color: var(--text);
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}

.container {
max-width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}

.header {
text-align: center;
padding: 12px;
background-color: var(--surface);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}

.input-container {
background-color: var(--surface);
padding: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
position: relative;
}
.input-group {
display: flex;
gap: 8px;
margin-bottom: 12px;
}

input {
width: 100%;
padding: 12px;
font-size: 16px;
background-color: var(--button);
border: 1px solid var(--axis);
border-radius: 8px;
color: var(--text);
transition: all 0.3s ease;
}

.plot-button {
padding: 12px 24px;
font-size: 16px;
background-color: var(--primary);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0.5px;
}

.canvas-container {
flex-grow: 1;
position: relative;
}

#graph3D {
width: 100%;
height: 100%;
}

.error {
color: var(--error);
margin-top: 8px;
font-size: 14px;
display: none;
animation: fadeIn 0.3s ease;
}

/* Keyboard styles */
.keyboard {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px;
background-color: var(--surface);
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
overflow-y: auto;
max-height: 40vh;
}

.key {
padding: 8px;
font-size: 16px;
background-color: var(--button);
color: var(--text);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
user-select: none;
flex: 1 0 18%;
}

.key:hover {
background-color: var(--button-hover);
}

.key:active {
transform: scale(0.95);
}

.key.function {
background-color: #1e3a5f;
}

.key.operator {
background-color: #2c3a47;
}

.key.control {
background-color: #4a1e1e;
}

.key.erase {
background-color: #8b0000;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

@media (max-width: 600px) {


.keyboard {
gap: 2px;
padding: 4px;
}

.key {
padding: 6px;
font-size: 14px;
flex: 1 0 18%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>3D Graph Calculator</h2>
</div>

<div class="input-container">
<div class="input-group">
<input type="text" id="function" placeholder="Enter function" readonly />
<button class="plot-button" onclick="updateGraph()">Plot</button>
</div>
<div id="error" class="error"></div>
</div>

<div class="canvas-container">
<div id="graph3D"></div>
</div>

<!-- Enhanced keyboard with extra operators and placeholders -->


<div class="keyboard" id="keyboard">
<!-- Numbers and basic operators -->
<button class="key" onclick="appendToInput('7')">7</button>
<button class="key" onclick="appendToInput('8')">8</button>
<button class="key" onclick="appendToInput('9')">9</button>
<button class="key operator" onclick="appendToInput('+')">+</button>
<button class="key operator" onclick="appendToInput('-')">−</button>

<button class="key" onclick="appendToInput('4')">4</button>


<button class="key" onclick="appendToInput('5')">5</button>
<button class="key" onclick="appendToInput('6')">6</button>
<button class="key operator" onclick="appendToInput('*')">×</button>
<button class="key operator" onclick="appendToInput('/')">÷</button>

<button class="key" onclick="appendToInput('1')">1</button>


<button class="key" onclick="appendToInput('2')">2</button>
<button class="key" onclick="appendToInput('3')">3</button>
<button class="key operator" onclick="appendToInput('^')">^</button>
<button class="key operator" onclick="appendToInput('√(')">√</button>

<button class="key" onclick="appendToInput('0')">0</button>


<button class="key" onclick="appendToInput('.')">.</button>
<button class="key operator" onclick="appendToInput('(')">(</button>
<button class="key operator" onclick="appendToInput(')')">)</button>
<button class="key erase" onclick="eraseChar()">⌫</button>

<!-- Row for common math operators -->


<button class="key operator" onclick="appendToInput('=')">=</button>
<button class="key operator" onclick="appendToInput('≠')">≠</button>
<button class="key operator" onclick="appendToInput('>')">></button>
<button class="key operator" onclick="appendToInput('<')"><</button>
<button class="key operator" onclick="appendToInput('≥')">≥</button>

<button class="key operator" onclick="appendToInput('≤')">≤</button>


<button class="key operator" onclick="appendToInput('&&')">&&</button>
<button class="key operator" onclick="appendToInput('||')">||</button>
<button class="key operator" onclick="appendToInput('!')">!</button>
<button class="key operator" onclick="appendToInput('%')">%</button>

<!-- More complex placeholders and advanced math functions -->


<button class="key operator" onclick="appendToInput('mod(')">mod</button>
<button class="key operator" onclick="appendToInput('|')">|x|</button>
<button class="key operator" onclick="appendToInput('∫(')">∫</button>
<button class="key operator" onclick="appendToInput('d/dx(')">d/dx</button>
<button class="key operator" onclick="appendToInput('∑(')">Σ</button>

<!-- Letters -->


<button class="key" onclick="appendToInput('x')">x</button>
<button class="key" onclick="appendToInput('y')">y</button>
<button class="key" onclick="appendToInput('z')">z</button>
<button class="key" onclick="appendToInput('e')">e</button>
<button class="key" onclick="appendToInput('i')">i</button>

<!-- Greek Letters -->


<button class="key function" onclick="appendToInput('π')">π</button>
<button class="key function" onclick="appendToInput('θ')">θ</button>
<button class="key function" onclick="appendToInput('φ')">φ</button>
<button class="key function" onclick="appendToInput('α')">α</button>
<button class="key function" onclick="appendToInput('β')">β</button>

<!-- Advanced Functions -->


<button class="key function" onclick="appendToInput('sin(')">sin</button>
<button class="key function" onclick="appendToInput('cos(')">cos</button>
<button class="key function" onclick="appendToInput('tan(')">tan</button>
<button class="key function" onclick="appendToInput('ln(')">ln</button>
<button class="key function" onclick="appendToInput('log(')">log</button>

<!-- Special Operators -->


<button class="key operator" onclick="appendToInput('∞')">∞</button>
<button class="key operator" onclick="appendToInput('±')">±</button>
<!-- We already have ≠, ≥, ≤ from above -->
<!-- Add other symbols if needed -->

<!-- Calculus & Summation Symbols (some placeholders above) -->


<button class="key function" onclick="appendToInput('∂')">∂</button>
<button class="key function" onclick="appendToInput('∏')">∏</button>
<button class="key function" onclick="appendToInput('lim_{')">lim</button>

<!-- Fraction and more Root options -->


<button class="key operator" onclick="appendToInput('frac(')">frac</button>
<button class="key operator" onclick="appendToInput('√(')">√</button>
<button class="key operator" onclick="appendToInput('∛(')">∛</button>
<button class="key operator" onclick="appendToInput('∜(')">∜</button>

<!-- Matrix and Vector Notation -->


<button class="key function" onclick="appendToInput('[[')">[ [</button>
<button class="key function" onclick="appendToInput(']]')">] ]</button>
<button class="key function" onclick="appendToInput('<')">&lt;</button>
<button class="key function" onclick="appendToInput('>')">&gt;</button>
<button class="key function" onclick="appendToInput(',')">,</button>
</div>
</div>

<!-- Include necessary libraries -->


<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- Include OrbitControls -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/
OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.js"></
script>
<!-- Include MathJax for rendering mathematical expressions -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></
script>

<script>
let scene, camera, renderer, graph, controls;
const functionInput = document.getElementById('function');
const errorDiv = document.getElementById('error');

function init() {
// Scene setup
scene = new THREE.Scene();
scene.background = new THREE.Color(0x121212);

// Camera setup
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.set(5, 5, 5);
camera.lookAt(0, 0, 0);

// Renderer setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('graph3D').appendChild(renderer.domElement);

// OrbitControls for rotation and zoom


controls = new THREE.OrbitControls(camera, renderer.domElement);

// Add grid
const gridHelper = new THREE.GridHelper(20, 20, 0x404040, 0x404040);
scene.add(gridHelper);

// Add axes
const axesHelper = new THREE.AxesHelper(10);
scene.add(axesHelper);

animate();
}

function createGraph(expression) {
try {
// Remove existing graph if any
if (graph) {
scene.remove(graph);
}

// Prepare expression for math.js


// Replace symbolic forms with math.js equivalents
expression = expression.replace(/π/g, 'PI');
expression = expression.replace(/∞/g, 'Infinity');
expression = expression.replace(/√\(/g, 'sqrt(');
expression = expression.replace(/∛\(/g, 'cbrt(');
expression = expression.replace(/∜\(/g, 'sqrt(sqrt(');
expression = expression.replace(/ln\(/g, 'log(');
// Replace 'e' with Euler's number E
expression = expression.replace(/\be\b/g, 'E');

const compiled = math.compile(expression);

// Create geometry
const geometry = new THREE.BufferGeometry();
const vertices = [];
const resolution = 100;
const size = 10;

for (let i = 0; i < resolution; i++) {


for (let j = 0; j < resolution; j++) {
const x = (i / resolution) * 2 * size - size;
const y = (j / resolution) * 2 * size - size;

try {
const z = compiled.evaluate({ x: x, y: y });
if (isFinite(z)) {
// x, z, y swap for better 3D orientation
vertices.push(x, z, y);
}
} catch (error) {
continue;
}
}
}

geometry.setAttribute(
'position',
new THREE.Float32BufferAttribute(vertices, 3)
);

// Create material
const material = new THREE.PointsMaterial({
size: 0.05,
color: 0x2196F3,
sizeAttenuation: true
});

// Create points object


graph = new THREE.Points(geometry, material);
scene.add(graph);

errorDiv.style.display = 'none';
} catch (error) {
errorDiv.textContent = 'Invalid function expression. Please check your
syntax.';
errorDiv.style.display = 'block';
}
}

function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}

function updateGraph() {
const expression = functionInput.value;
if (expression) {
createGraph(expression);
}
}

function appendToInput(value) {
functionInput.value += value;
renderMath();
}

function eraseChar() {
functionInput.value = functionInput.value.slice(0, -1);
renderMath();
}

function renderMath() {
// Render the mathematical expression using MathJax
functionInput.innerHTML = functionInput.value;
MathJax.typesetPromise([functionInput]);
}

window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});

// Initialize the scene


init();
</script>
</body>
</html>

You might also like