Matephis Plotting System

Questa pagina serve come test e documentazione per il sistema di grafici generati via codice (JSON). Tutti i grafici sono renderizzati da matephis-plot.js.

Documentazione opzioni JSON

Opzioni globali

Griglia e assi

Serie dati (data: [...])

1. Esempi base e layout

Grafico semplice (seno e coseno)

Usa il tema di default (accent) e dimensioni standard.

{
  "xlim": [-7, 7],
  "ylim": [-1.5, 1.5],
  "legend": true,
  "data": [
    { "fn": "sin(x)", "label": "sin(x)" },
    { "fn": "cos(x)", "label": "cos(x)", "dash": "5,5" }
  ]
}

{
  "xlim": [-7, 7],
  "ylim": [-1.5, 1.5],
  "legend": true,
  "data": [
    { "fn": "sin(x)", "label": "sin(x)" },
    { "fn": "cos(x)", "label": "cos(x)", "dash": "5,5" }
  ]
}

Full width & aspect ratio

Usa fullWidth: true per grafici responsive che occupano tutta la larghezza, con un rapporto aspetto specifico (es. 3:1).

{
  "fullWidth": true,
  "aspectRatio": "3:1",
  "xlim": [-20, 20],
  "ylim": [-2, 2],
  "data": [
    { "fn": "sin(x)/x", "label": "Sinc(x)" }
  ]
}

{
  "fullWidth": true,
  "aspectRatio": "3:1",
  "xlim": [-20, 20],
  "ylim": [-2, 2],
  "data": [
    { "fn": "sin(x)/x", "label": "Sinc(x)" }
  ]
}

2. Temi e stili

Tema black e frecce assi

Utile per stampe o stili minimali. axisArrows: true aggiunge le frecce.

{
  "theme": "red",
  "axisArrows": true,
  "xlim": [-5, 5],
  "data": [
    { "fn": "x^2", "label": "Parabola" },
    { "fn": "-x^2", "label": "Parabola Inv." },
  ]
}

{
  "theme": "black",
  "axisArrows": true,
  "xlim": [-5, 5],
  "data": [
    { "fn": "x^2", "label": "Parabola" },
    { "fn": "-x^2", "label": "Parabola Inv." }
  ]
}

Tema Sunburst

Uno dei nuovi temi disponibili.

{
  "theme": "sunburst",
  "xlim": [-5, 5],
  "data": [
    { "fn": "sin(x)", "label": "Seno" },
    { "fn": "cos(x)", "label": "Coseno" },
    { "fn": "sin(2*x)", "label": "Seno 2x" }
  ]
}

{
  "theme": "sunburst",
  "xlim": [-5, 5],
  "data": [
    { "fn": "sin(x)", "label": "Seno" },
    { "fn": "cos(x)", "label": "Coseno" },
    { "fn": "sin(2*x)", "label": "Seno 2x" }
  ]
}

Colori personalizzati e opacità

Dimostra come sovrascrivere i colori del tema e usare l’opacità per sovrapposizioni.

{
  "xlim": [-3, 3],
  "ylim": [-2, 2],
  "gridOpacity": 0.3,
  "data": [
    { "fn": "sin(x)", "width": 8, "color": "red", "opacity": 0.3, "label": "Opaco 30%" },
    { "fn": "cos(x)", "width": 8, "color": "blue", "opacity": 0.7, "label": "Opaco 70%" }
  ]
}

{
  "xlim": [-3, 3],
  "ylim": [-2, 2],
  "gridOpacity": 0.3,
  "data": [
    { "fn": "sin(x)", "width": 8, "color": "red", "opacity": 0.3, "label": "Opaco 30%" },
    { "fn": "cos(x)", "width": 8, "color": "blue", "opacity": 0.7, "label": "Opaco 70%" }
  ]
}

3. Tipi di dati avanzati

Equazioni implicite (cerchi e coniche)

Usa implicit per equazioni non funzioni. equalAspect (o un aspectRatio corretto) è raccomandato per non distorcere le forme.

{
  "xlim": [-6, 6],
  "aspectRatio": "1:1",
  "data": [
    { "implicit": "x^2 + y^2 = 16", "color": "purple", "label": "r=4" },
    { "implicit": "x^2/9 - y^2/4 = 1", "color": "orange", "label": "Iperbole" }
  ]
}

{
  "xlim": [-6, 6],
  "aspectRatio": "1:1",
  "data": [
    { "implicit": "x^2 + y^2 = 16", "color": "purple", "label": "r=4" },
    { "implicit": "x^2/9 - y^2/4 = 1", "color": "orange", "label": "Iperbole" }
  ]
}

Punti e linee verticali

Disegna punti specifici e rette verticali (x: val).

{
  "xlim": [-2, 5],
  "data": [
    { "points": [[1,1], [2,4], [3,9]], "radius": 4, "fillColor": "black" },
    { "x": 2.5, "color": "green", "dash": "2,2", "label": "x=2.5" }
  ]
}

{
  "xlim": [-2, 5],
  "data": [
    { "points": [[1,1], [2,4], [3,9]], "radius": 4, "fillColor": "black" },
    { "x": 2.5, "color": "green", "dash": "2,2", "label": "x=2.5" }
  ]
}

4. Interattività

Il sistema supporta due livelli di interattività: Manipolazione Vista (Zoom/Pan) e Parametri Dinamici (Slider).

Grafico zoomabile e riorientabile

Imposta "interactive": true.

• Zoom: Rotella del mouse, o pulsanti (+/-) in basso a sinistra. Pinch su mobile.
• Pan: Trascina con il mouse o dito.
• Reset: Pulsante (↺) per tornare alla vista iniziale.

{
  "xlim": [-10, 10],
  "ylim": [-10, 10],
  "interactive": true,
  "fullWidth": true,
  "gridOpacity": 0.5,
  "data": [
      { "fn": "sin(x)*x", "label": "x*sin(x)" },
      { "fn": "log(x)"},
      { "fn": "1/x"}
  ]
}

{
  "xlim": [-10, 10],
  "ylim": [-10, 10],
  "interactive": true,
  "fullWidth": true,
  "gridOpacity": 0.5,
  "data": [
      { "fn": "sin(x)*x", "label": "x*sin(x)" },
      { "fn": "log(x)"},
      { "fn": "1/x"}
  ]
}

Asintoti e domini

Esempio di funzione con asintoti (tan(x)) e dominio limitato (sqrt(16-x^2) in [-4, 4]).

{
  "aspectRatio": "2:1",
  "xlim": [-10, 10], 
  "ylim": [-5, 5],
  "data": [
    { "fn": "tan(x)", "color": "#007bff", "label": "tan(x)" },
    { "fn": "sqrt(16 - x^2)", "domain": [-4, 4], "color": "#dc3545", "label": "Domain [-4, 4]" }
  ]
}

{
  "aspectRatio": "2:1",
  "xlim": [-10, 10], 
  "ylim": [-5, 5],
  "data": [
    { "fn": "tan(x)", "color": "#007bff", "label": "tan(x)" },
    { "fn": "sqrt(16 - x^2)", "domain": [-4, 4], "color": "#dc3545", "label": "Domain [-4, 4]" }
  ]
}

Slider (parametri)

Definisci params per creare slider. Le variabili (es. k) possono essere usate nelle funzioni. Le opzioni border e sliderBorder possono essere usate per aggiungere bordi al contenitore e agli slider.

{
  "cssWidth": "80%",
  "align": "left",
  "aspectRatio": "2:1",
  "xlim": [-10, 10],
  "ylim": [-2, 2],
  "interactive": true,
  "border": true,
  "sliderBorder": true,
  "params": {
    "k": { "min": 0.1, "max": 5, "step": 0.1, "val": 1 },
    "w": { "min": 0, "max": 10, "step": 0.1, "val": 0 }
  },
  "data": [
    { "fn": "sin(k*x + w)", "label": "Onda Variabile" }
  ]
}

{
  "cssWidth": "80%",
  "align": "left",
  "aspectRatio": "2:1",
  "xlim": [-10, 10],
  "ylim": [-2, 2],
  "interactive": true,
  "border": true,
  "sliderBorder": true,
  "params": {
    "k": { "min": 0.1, "max": 5, "step": 0.1, "val": 1 },
    "w": { "min": 0, "max": 10, "step": 0.1, "val": 0 }
  },
  "data": [
    { "fn": "sin(k*x + w)", "label": "Onda Variabile" }
  ]
}

5. Layout avanzato

Liste nidificate e allineamento

Usa marginLeft negativo per allineare visivamente un grafico all’interno di una lista puntata.

1. Livello 1
   • Livello 2 (Indentato)

     {
       "width": 400,
       "height": 200,
       "marginLeft": "-25px",
       "data": [{"fn": "x", "color": "#777"}]
     }
     

     {
       "width": 400,
       "height": 200,
       "marginLeft": "-25px",
       "data": [{"fn": "x", "color": "#777"}]
     }
     

Auto steps (griglia dinamica)

Se xStep non è definito, viene calcolato automaticamente. Prova a zoomare nel grafico interattivo sopra per vedere la griglia adattarsi.

{
  "xlim": [0.01, 0.02], 
  "ylim": [0, 0.005],
  "fullWidth": true,
  "aspectRatio": "3:1",
  "data": [{"fn": "x^2", "label": "Zoom (Auto Grid)"}]
}

{
  "xlim": [0.01, 0.02], 
  "ylim": [0, 0.005],
  "fullWidth": true,
  "aspectRatio": "3:1",
  "data": [{"fn": "x^2", "label": "Zoom (Auto Grid)"}]
}

6. Qualità e performance

Alta definizione (sampleStep)

Per funzioni ad alta frequenza o dettagli fini, usa sampleStep: 1 per forzare il campionamento pixel-per-pixel. Di default è 2.

{
  "sampleStep": 1,
  "xlim": [-5, 5],
  "ylim": [-1.5, 1.5],
  "fullWidth": true,
  "aspectRatio": "4:1",
  "data": [
    { "fn": "sin(30*x)", "label": "Alta Frequenza (1px step)", "width": 1 }
  ]
}

7. Interattività Avanzata e Nuove Funzioni

Selezione Punti, Pendenze e Tangenti

Nuove modalità per esplorare le funzioni. Le modalità sono mutuamente esclusive.

• pointSelection: Abilita il trascinamento di un punto sulla curva.
• slopeSelection: Calcola la pendenza media tra due punti (triangolo).
• tangentSelection: Calcola la retta tangente e la derivata in un punto.
• specifySlope: Se true, mostra la formula completa (es. $\Delta y / \Delta x$).

{
  "interactive": true,
  "pointSelection": true,
  "slopeSelection": true,
  "tangentSelection": true,
  "specifySlope": true,
  "slopeLabel": "m",
  "axisLabels": ["t", "s"],
  "axisUnitMeasures": ["sec", "m"],
  "data": [{ "fn": "0.5*x^2" }]
}

{
  "interactive": true,
  "pointSelection": true,
  "slopeSelection": true,
  "tangentSelection": true,
  "specifySlope": true,
  "slopeLabel": "m",
  "axisLabels": ["t", "s"],
  "axisUnitMeasures": ["sec", "m"],
  "data": [{ "fn": "0.5*x^2" }]
}

Interpolazione (Smoothing)

Il tipo interpolation permette di disegnare curve che passano per una serie di punti.

• smoothness: 0 (linee spezzate) fino a 1 (curve morbide, Catmull-Rom).

{
  "legend": true,
  "data": [
    { 
      "type": "interpolation", 
      "points": [[-2,0], [-1,1], [0,0], [1,1], [2,0]], 
      "smoothness": 1, 
      "color": "red", 
      "label": "Smooth (1.0)" 
    },
    { 
      "type": "interpolation", 
      "points": [[-2,-1], [-1,0], [0,-1], [1,0], [2,-1]], 
      "smoothness": 0, 
      "color": "blue", 
      "label": "Linear (0.0)" 
    }
  ]
}

{
  "legend": true,
  "data": [
    { 
      "type": "interpolation", 
      "points": [[-2,0], [-1,1], [0,0], [1,1], [2,0]], 
      "smoothness": 1, 
      "color": "red", 
      "label": "Smooth (Default Sampling)",
      "showPoints": true
    },
    { 
      "type": "interpolation", 
      "points": [[-2,-1.5], [-1,-0.5], [0,-1.5], [1,-0.5], [2,-1.5]], 
      "smoothness": 1, 
      "sampling": 3,
      "color": "orange", 
      "label": "Low Sampling (3)",
      "showPoints": true,
      "pointColor": "black",
      "pointRadius": 6
    },
    { 
      "type": "interpolation", 
      "points": [[-2,-3], [-1,-2], [0,-3], [1,-2], [2,-3]], 
      "smoothness": 0, 
      "color": "blue", 
      "label": "Linear (0.0)",
      "showPoints": true,
      "pointStroke": "blue",
      "pointStrokeWidth": 2,
      "pointColor": "white"
    }
  ]
}

Opzioni Interpolazione Avanzate

• sampling: (Default 10) Controlla la risoluzione della curva spline (segmenti per coppia di punti). Valori bassi (2-5) per performance, valori alti (20+) per curve perfette.
• showPoints: Se true, disegna i punti originali sopra la curva.
• pointColor, pointRadius, pointOpacity: Stile dei punti.
• pointStroke, pointStrokeWidth: Bordo dei punti.

Vincoli di Navigazione

• constrainView: Se true, impedisce di zoomare o traslare oltre i limiti definiti da xlim e ylim.

{
  "interactive": true, 
  "constrainView": true,
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "data": [{ "fn": "sin(x)" }]
}

## 8. Analisi Derivata

### Tracciamento e Grafico Derivata
Nuovi strumenti per visualizzare la derivata.
*   `traceDerivative`: Se `true` e lo strumento pendenza è attivo, apparirà un pulsante "Trace" che lascia una scia di punti $(x, f'(x))$.
*   `addDerivativePlot`: Aggiunge un secondo grafico sincronizzato sotto il principale per mostrare la derivata.
*   `derivativeYLim`: Limiti Y opzionali per il grafico derivata.
*   `derivativeAutoY`: Se `true`, adatta automaticamente l'asse Y della derivata in base ai dati tracciati.

```json
{
  "xlim": [-4, 4],
  "ylim": [-5, 10],
  "interactive": true,
  "tangentSelection": true,
  "traceDerivative": true,
  "addDerivativePlot": true,
  "derivativeAutoY": true,
  "data": [{ "fn": "x^2", "label": "Parabola" }]
}

{
  "xlim": [-4, 4],
  "ylim": [-5, 10],
  "interactive": true,
  "tangentSelection": true,
  "traceDerivative": true,
  "addDerivativePlot": true,
  "derivativeAutoY": true,
  "derivativeTitle": "Analisi Pendenza (Derivata)",
  "data": [{ "fn": "x^2", "label": "Parabola" }]
}

Curva Derivata (Ghost)

• showDerivative: Mostra la curva della derivata analitica (calcolata numericamente) in background con opacità ridotta.
• Trace UI: Quando la modalità “Tangente” è attiva, appaiono i pulsanti:
  • Trace: Attiva/Disattiva il tracciamento dei punti $(x, f’(x))$.
  • Eraser: Cancella la traccia corrente.

{
  "xlim": [-7, 7],
  "slopeSelection": true,
  "addDerivativePlot": true,
  "showDerivative": true,
  "data": [{ "fn": "sin(x)", "label": "sin(x)" }]
}

{
  "xlim": [-7, 7],
  "slopeSelection": true,
  "addDerivativePlot": true,
  "showDerivative": true,
  "data": [{ "fn": "sin(x)", "label": "sin(x)" }]
}

9. Nuove Funzionalità Sperimentali

Animazione Parametri e Limiti Dinamici

Aggiungi animate: true alla configurazione per abilitare un pulsante play/pause accanto agli slider. Cliccando play, il parametro verrà incrementato automaticamente in base al suo step. Inoltre, i bordi min e max dei parametri possono ora essere definiti come espressioni matematiche, permettendo dipendenze dinamiche tra slider, che si aggiornano in tempo reale.

{
  "aspectRatio": "2:1",
  "xlim": [-10, 10],
  "ylim": [-3, 3],
  "animate": true,
  "params": {
    "A": { "min": 0.5, "max": 2.5, "step": 0.1, "val": 1 },
    "t": { "min": "-A*2", "max": "A*5", "step": 0.05, "val": 0 }
  },
  "data": [
    { "fn": "A * sin(x - t)", "label": "Onda Propagante" }
  ]
}

{
  "aspectRatio": "2:1",
  "xlim": [-10, 10],
  "ylim": [-3, 3],
  "animate": true,
  "params": {
    "A": { "min": 0.5, "max": 2.5, "step": 0.1, "val": 1 },
    "t": { "min": "-A*2", "max": "A*5", "step": 0.05, "val": 0 }
  },
  "data": [
    { "fn": "A * sin(x - t)", "label": "Onda Propagante" }
  ]
}

Griglia Polare

Imposta polar: true per disegnare una griglia radiale e concentrica al posto di quella cartesiana standard. polarUnits può essere impostato su "deg" per i gradi (mostrerà gradi numerici) o lasciato di default / "rad" per etichette in radianti proporzionali a π. Utile per mostrare equazioni in coordinate polari e complessi!

{
  "polar": true,
  "polarUnits": "rad",
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "aspectRatio": 1,
  "params": {
    "k": { "min": 1, "max": 10, "step": 1, "val": 4 },
    "t": { "min": 0, "max": "2*PI", "step": 0.1, "val": "2*PI" }
  },
  "data": [
    { "fn": "4 * cos(k * x)", "domain": [0, "t"], "label": "Rosa Polare" }
  ]
}

{
  "polar": true,
  "polarUnits": "rad",
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "aspectRatio": 1,
  "params": {
    "k": { "min": 1, "max": 10, "step": 1, "val": 4 },
    "t": { "min": 0, "max": "2*PI", "step": 0.05, "val": "2*PI" }
  },
  "data": [
    { "fn": "4 * cos(k * x)", "domain": [0, "t"], "label": "Rosa Polare" }
  ]
}

Supporto Numeri Complessi (Base)

Aggiungi complexMode: true per valutare le funzioni nel campo complesso in modo semplificato. Scrivendo funzioni f(x) e calcolando ad esempio exp(i * x), x viene usato come parametro per muoversi sul piano complesso (Asse X = Reale, Asse Y = Immaginario).

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "data": [
    { "fn": "exp(i * x)", "domain": [0, "2*pi"] }
  ]
}

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "data": [
    { "fn": "exp(i * x)", "domain": [0, "2*pi"] }
  ]
}

Puoi anche definire punti singoli e discreti utilizzando espressioni complesse, sia in forma algebrica a+ib che in forma polare r*exp(i*θ) o r*e^(i*θ).

{
  "complexMode": true,
  "xlim": [-3, 3],
  "ylim": [-3, 3],
  "data": [
    { "fn": "2*exp(i*x)", "domain": [0, "6.28"], "color": "blue" },
    {
      "points": [
        ["1+0.5i", "", "1+0.5i"],
        ["-1+1i", "", "-1+i"],
        ["2*exp(i*PI/2)", "", "2*exp(i*PI/2)"],
        ["1.5*e^(i*PI)", "", "1.5*e^(i*PI)"]
      ],
      "radius": 5,
      "fillColor": "red"
    }
  ]
}

{
  "complexMode": true,
  "xlim": [-3, 3],
  "ylim": [-3, 3],
  "data": [
    { "fn": "2*exp(i*x)", "domain": [0, "6.28"], "color": "blue" },
    {
      "points": [
        ["1+0.5i", "", "1+0.5i"],
        ["-1+1i", "", "-1+i"],
        ["2*exp(i*PI/2)", "", "2*exp(i*PI/2)"],
        ["1.5*e^(i*PI)", "", "1.5*e^(i*PI)"]
      ],
      "radius": 5,
      "fillColor": "red"
    }
  ]
}

Parametri Interni (Curve Parametriche)

Puoi limitare il dominio di valutazione di una funzione e svincolarlo dall’asse X globale specificando un parametro interno con i suoi limiti. Questo approccio, unito a complexMode: true, rende molto facile tracciare curve parametriche e percorsi chiusi (come i cerchi).

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "data": [
    { 
      "fn": "1.5*exp(i*T)", 
      "param": [["T", 0, "2*PI"]],
      "color": "purple"
    }
  ]
}

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "data": [
    { 
      "fn": "1.5*exp(i*T)", 
      "param": [["T", 0, "2*PI"]],
      "color": "purple"
    }
  ]
}

Drag di Punti Parametrici

Se hai un grafico interattivo con dei parametri definiti in params e imposti draggablePoints: true, i punti che dipendono da quel parametro potranno essere trascinati! Questo cambierà sia la posizione del punto sia il valore del parametro nello slider in modo collegato.

{
  "interactive": true,
  "draggablePoints": true,
  "sliderBorder": true,
  "aspectRatio": 1,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "params": {
  "T": { "min": 0, "max": "2*PI", "step": "PI/16", "val": 0, "round": 2 }
  },
  "data": [
    { "fn": "cos(x)", "color": "#ccc", "dash": "5,5" },
    { "points": [["cos(T)", "sin(T)"]], "radius": 6, "fillColor": "red", "label": "Drag me!" },
    { "implicit": "x^2 + y^2 = 1", "color": "blue" }
  ]
}

{
  "interactive": true,
  "draggablePoints": true,
  "sliderBorder": true,
  "aspectRatio": 1,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "params": {
    "T": { "min": 0, "max": "2*PI", "step": "PI/16", "val": 0, "round": 2 }
  },
  "data": [
    { "fn": "cos(x)", "color": "#ccc", "dash": "5,5" },
    { "points": [["cos(T)", "sin(T)"]], "radius": 6, "fillColor": "red", "label": "Drag me!" },
    { "implicit": "x^2 + y^2 = 1", "color": "blue" }
  ]
}

Parametri Trascinabili (Draggable Points)

Se definisci le coordinate di un punto come espressioni matematiche dipendenti da un parametro globale (es. t), puoi trascinare liberamente quel punto lungo il grafico. Il parametro si aggiornerà in tempo reale in base alla posizione più vicina del cursore.

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "params": {
    "t": { "min": 0, "max": "2*PI", "step": 0.05, "val": 0, "round": 2 }
  },
  "draggablePoints": true,
  "data": [
    { 
      "fn": "1.5*exp(i*T)", 
      "param": [["T", 0, "2*PI"]],
      "color": "gray",
      "dash": "5,5"
    },
    {
      "points": [
        ["1.5*exp(i*t)", "", "Trascina"]
      ],
      "radius": 6,
      "fillColor": "blue"
    }
  ]
}

{
  "complexMode": true,
  "xlim": [-2, 2],
  "ylim": [-2, 2],
  "params": {
    "t": { "min": 0, "max": "2PI", "step": 0.05, "val": 0, "round": 2 }
  },
  "draggablePoints": true,
  "data": [
    { 
      "fn": "1.5*exp(i*T)", 
      "param": [["T", 0, "2*PI"]],
      "color": "gray",
      "dash": "5,5"
    },
    {
      "points": [
        ["1.5*exp(i*t)", "", "Trascina"]
      ],
      "radius": 6,
      "fillColor": "blue"
    }
  ]
}

## 10. Punti Liberi e Vettori

### Punto a Coordinate Libere
Aggiungi `"freeCoordinates": true` e un `"name"` a un oggetto `points` per renderlo trascinabile liberamente. Non richiede parametri: il punto si muove dove lo trascini.

```json
{
  "aspectRatio": 1,
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "data": [
    {
      "points": [[2, 1]],
      "freeCoordinates": true,
      "name": "P",
      "label": "P",
      "fillColor": "#d00",
      "radius": 7
    }
  ]
}

{
  "aspectRatio": 1,
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "data": [
    {
      "points": [[2, 1]],
      "freeCoordinates": true,
      "name": "P",
      "label": "P",
      "fillColor": "#d00",
      "radius": 7
    }
  ]
}

Variabili del Punto nelle Espressioni

Se e’ presente un punto libero col nome "A", puoi usare A.x, A.y, A.r e A.theta in qualunque espressione matematica. Trascina il punto per vedere gli altri elementi aggiornarsi in tempo reale!

{
  "aspectRatio": 1,
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "data": [
    {
      "points": [[3, 0]],
      "freeCoordinates": true,
      "name": "A",
      "label": "A",
      "fillColor": "blue",
      "radius": 7
    },
    { "implicit": "(x - A.x)^2 + (y - A.y)^2 = 4", "color": "#888", "dash": "4,4" },
    { "fn": "A.y + (A.theta / PI) * x", "color": "orange", "label": "linea" }
  ]
}

{
  "aspectRatio": 1,
  "xlim": [-5, 5],
  "ylim": [-5, 5],
  "data": [
    {
      "points": [[3, 0]],
      "freeCoordinates": true,
      "name": "A",
      "label": "A",
      "fillColor": "blue",
      "radius": 7
    },
    { "implicit": "(x - A.x)^2 + (y - A.y)^2 = 4", "color": "#888", "dash": "4,4" },
    { "fn": "A.y + (A.theta / PI) * x", "color": "orange", "label": "linea" }
  ]
}

Vettori

Usa "vector": [[da_x, da_y], [a_x, a_y]] (entrambi possono contenere espressioni, incluse variabili di punti liberi). Trascina il punto P per animare il vettore! Puoi anche usare "arrow": false e "dash": "val" per segmenti.

{
  "aspectRatio": 1,
  "xlim": [-4, 4],
  "ylim": [-4, 4],
  "data": [
    {
      "points": [[2, 2]],
      "freeCoordinates": true,
      "name": "P",
      "label": "P.x + iP.y",
      "fillColor": "#c00",
      "radius": 7
    },
    { "vector": [[0, 0], ["P.x", "P.y"]], "color": "#c00", "width": 2, "label": "v" },
    { "vector": [["P.x", "P.y"], ["-P.y + P.x", "P.x + P.y"]], "color": "blue", "width": 2, "label": "v perp" },
    { "vector": [[0, 2], [2, 0]], "color": "green", "arrow": false, "dash": "4,4", "label": "no arrow" }
  ]
}

{
  "aspectRatio": 1,
  "xlim": [-4, 4],
  "ylim": [-4, 4],
  "data": [
    {
      "points": [[2, 2]],
      "freeCoordinates": true,
      "name": "P",
      "label": "P.x + iP.y",
      "fillColor": "#c00",
      "radius": 7
    },
    { "vector": [[0, 0], ["P.x", "P.y"]], "color": "#c00", "width": 2, "label": "v" },
    { "vector": [["P.x", "P.y"], ["-P.y + P.x", "P.x + P.y"]], "color": "blue", "width": 2, "label": "v perp" },
    { "vector": [[0, 2], [2, 0]], "color": "green", "arrow": false, "dash": "4,4", "label": "no arrow" }
  ]
}

11. Scale Logaritmiche

Log Scale (Assi X/Y)

Impostando xScale: "log" o yScale: "log" la trasformazione delle coordinate usa esponenti in base 10. xMin e yMin sono vincolati a essere maggiori di 0. Il rendering della griglia e numerazione si adatta ai multipli di 10.

{
  "aspectRatio": "3:1",
  "xlim": [1, 1000],
  "ylim": [-3, 3],
  "xScale": "log",
  "data": [
    {
      "fn": "log(x)",
      "color": "blue",
      "label": "log_e(x)"
    },
    {
      "fn": "sin(x)",
      "color": "red",
      "label": "sin(x) on log"
    }
  ]
}

{
  "aspectRatio": "3:1",
  "xlim": [1, 1000],
  "ylim": [-3, 3],
  "xScale": "log",
  "data": [
    {
      "fn": "log(x)",
      "color": "blue",
      "label": "log_e(x)"
    },
    {
      "fn": "sin(x)",
      "color": "red",
      "label": "sin(x) on log"
    }
  ]
}

{
  "aspectRatio": "1:1",
  "xlim": [1, 1000],
  "ylim": [1, 1000000],
  "xScale": "log",
  "yScale": "log",
  "data": [
    {
      "fn": "x^2",
      "color": "purple",
      "label": "y = x^2"
    }
  ]
}

{
  "aspectRatio": "1:1",
  "xlim": [1, 1000],
  "ylim": [1, 1000000],
  "xScale": "log",
  "yScale": "log",
  "data": [
    {
      "fn": "x^2",
      "color": "purple",
      "label": "y = x^2"
    }
  ]
}