Skip to content

Commit 449256f

Browse files
bigBrodyGclaude
bigBrodyG
and
claude
committed
simplify visualizer to beginner level
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 257c502 commit 449256f

3 files changed

Lines changed: 142 additions & 294 deletions

File tree

‎functons/architecture.puml‎

Lines changed: 13 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,21 @@
1-
@startuml FunctionVisualizer
1+
@startuml VisualizzatoreFunzioni
22

3-
class FunctionVisualizer {
4-
- selectedFunction: string
5-
- rangeMin: number
6-
- rangeMax: number
7-
- parameters: Map
8-
- chart: google.visualization.LineChart
9-
- data: google.visualization.DataTable
10-
+ init(): void
11-
+ updateGraph(): void
12-
+ onFunctionChange(name: string): void
13-
+ onParameterChange(name: string, value: number): void
14-
+ onRangeChange(min: number, max: number): void
15-
- generateDataPoints(): Array
16-
- initializeChart(): void
17-
- attachEventListeners(): void
3+
class Retta {
4+
+ m: number
5+
+ b: number
6+
+ calcola(x: number): number
187
}
198

20-
class Function {
21-
# name: string
22-
# parameters: Map
23-
+ getName(): string
24-
+ getParameters(): Map
25-
+ calculate(x: number): number
26-
+ setParameter(name: string, value: number): void
27-
{abstract} + evaluate(x: number): number
9+
class Parabola {
10+
+ a: number
11+
+ b: number
12+
+ c: number
13+
+ calcola(x: number): number
2814
}
2915

30-
class LinearFunction {
31-
- m: number
32-
- b: number
33-
+ evaluate(x: number): number
34-
}
35-
36-
class ParabolaFunction {
37-
- a: number
38-
- b: number
39-
- c: number
40-
+ evaluate(x: number): number
41-
}
42-
43-
class ExponentialFunction {
44-
- base: number
45-
- exponent: number
46-
+ evaluate(x: number): number
47-
}
16+
note "funzioneCorrente punta\na Retta o Parabola" as N1
4817

49-
FunctionVisualizer --> Function
50-
Function <|-- LinearFunction
51-
Function <|-- ParabolaFunction
52-
Function <|-- ExponentialFunction
18+
Retta .. N1
19+
Parabola .. N1
5320

5421
@enduml

‎functons/index.html‎

Lines changed: 63 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,76 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="it">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Function Visualizer</title>
5+
<title>Visualizzatore di Funzioni</title>
76
<script src="https://www.gstatic.com/charts/loader.js"></script>
8-
<script src="https://cdn.tailwindcss.com"></script>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 30px;
11+
}
12+
13+
h1 {
14+
color: #333;
15+
}
16+
17+
.contenitore {
18+
display: flex;
19+
gap: 30px;
20+
margin-top: 20px;
21+
}
22+
23+
.controlli {
24+
width: 180px;
25+
}
26+
27+
.controlli label {
28+
display: block;
29+
margin-top: 12px;
30+
font-size: 14px;
31+
}
32+
33+
.controlli input,
34+
.controlli select {
35+
width: 100%;
36+
padding: 4px;
37+
margin-top: 3px;
38+
box-sizing: border-box;
39+
}
40+
41+
#grafico {
42+
flex: 1;
43+
height: 480px;
44+
}
45+
</style>
946
</head>
10-
<body class="bg-gray-50">
11-
<div class="min-h-screen p-8">
12-
<div class="max-w-6xl mx-auto">
13-
<h1 class="text-4xl font-bold text-gray-900 mb-2">Function Visualizer</h1>
14-
<p class="text-gray-600 mb-8">Explore mathematical functions interactively</p>
47+
<body>
48+
49+
<h1>Visualizzatore di Funzioni</h1>
50+
51+
<div class="contenitore">
52+
<div class="controlli">
1553

16-
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
17-
<!-- Controls Panel -->
18-
<div class="lg:col-span-1">
19-
<div class="bg-white rounded-lg shadow p-6 space-y-6">
20-
<!-- Function Selection -->
21-
<div>
22-
<label class="block text-sm font-medium text-gray-700 mb-2">
23-
Function
24-
</label>
25-
<select id="functionSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
26-
<option value="linear">Linear (y = mx + b)</option>
27-
<option value="parabola">Parabola (y = ax² + bx + c)</option>
28-
<option value="exponential">Exponential (y = base^x)</option>
29-
</select>
30-
</div>
54+
<label>Funzione:
55+
<select id="sceltaFunzione">
56+
<option value="retta">Retta (y = mx + b)</option>
57+
<option value="parabola">Parabola (y = ax² + bx + c)</option>
58+
</select>
59+
</label>
3160

32-
<!-- Range Controls -->
33-
<div>
34-
<label class="block text-sm font-medium text-gray-700 mb-2">
35-
Range
36-
</label>
37-
<div class="space-y-2">
38-
<div>
39-
<label class="text-xs text-gray-600">Min X</label>
40-
<input type="number" id="rangeMin" value="-10" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
41-
</div>
42-
<div>
43-
<label class="text-xs text-gray-600">Max X</label>
44-
<input type="number" id="rangeMax" value="10" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
45-
</div>
46-
</div>
47-
</div>
61+
<label>X minimo:
62+
<input type="number" id="xMin" value="-10">
63+
</label>
4864

49-
<!-- Parameters -->
50-
<div id="parametersContainer" class="space-y-3">
51-
<!-- Dynamically populated based on function type -->
52-
</div>
53-
</div>
54-
</div>
65+
<label>X massimo:
66+
<input type="number" id="xMax" value="10">
67+
</label>
68+
69+
<div id="parametri"></div>
5570

56-
<!-- Chart Panel -->
57-
<div class="lg:col-span-3">
58-
<div class="bg-white rounded-lg shadow p-6">
59-
<div id="chart" style="width: 100%; height: 500px;"></div>
60-
</div>
61-
</div>
62-
</div>
6371
</div>
72+
73+
<div id="grafico"></div>
6474
</div>
6575

6676
<script src="script.js"></script>

0 commit comments

Comments
 (0)