JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Demo Confidenza e Distanza - Aggiornata con to2DPoint</title>
<style>
  body { font-family: Arial, sans-serif; }
  #canvas { border: 1px solid #ccc; }
  .info { margin-top: 20px; }
  table { width: 100%; border-collapse: collapse; }
  td, th { border: 1px solid #ccc; padding: 8px; text-align: center; }
  .point { fill: red; cursor: pointer; }
</style>
</head>
<body>

<h1>Demo Confidenza e Distanza</h1>
<canvas id="canvas" width="500" height="500"></canvas>

<div class="info">
  <h2>Informazioni</h2>
  <p>Distanza Euclidea: <span id="distance">0</span></p>
  <table>
    <thead>
      <tr>
        <th>Formula</th>
        <th>Confidenza (%)</th>
      </tr>
    </thead>
    <tbody id="confidenceTable">
      <!-- Riempito dinamicamente -->
    </tbody>
  </table>
</div>

<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
const squareSize = width; // Presumiamo un canvas quadrato
let points = [
  { arousal: -0.5, valence: -0.5 },
  { arousal: 0.5, valence: 0.5 }
];
let draggingPoint = null;

function to2DPoint(arousal, valence, squareSize = width) {
  const clipped = (a) => Math.max(-1, Math.min(a, 1));
  let x = squareSize / 2 * (clipped(valence) + 1);
  let y = squareSize / 2 * (1 - clipped(arousal));
  return { x, y };
}

function toPlaneCoords(x, y, squareSize = width) {
  let valence = (x / (squareSize / 2)) - 1;
  let arousal = 1 - (y / (squareSize / 2));
  return {
    arousal: Math.max(-1, Math.min(arousal, 1)),
    valence: Math.max(-1, Math.min(valence, 1))
  };
}

function drawGrid() {
  ctx.clearRect(0, 0, width, height);

  // Draw axes
  ctx.strokeStyle = '#000';
  ctx.beginPath();
  ctx.moveTo(width / 2, 0);
  ctx.lineTo(width / 2, height);
  ctx.moveTo(0, height / 2);
  ctx.lineTo(width, height / 2);
  ctx.stroke();

  // Draw unit circle
  ctx.beginPath();
  ctx.arc(width / 2,...