Grazie Alka, ChatGPT è davvero uno spettacolo.
Sono riuscito a farmi scrivere un codice ma c'è un solo problema che non sono riuscito a risolvere. Quando eseguo uno zoom della pagina le onde perdono di definizione.
Sapresti come risolvere?
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Onde Irregolari con Linea Curva Morbida</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #0099ff; /* Colore di sfondo che richiama il mare */
}
canvas {
display: block;
background-color: #0099ff; /* Colore di sfondo del canvas */
}
</style>
</head>
<body>
<canvas id="ocean"></canvas>
<script>
// Otteniamo il canvas e il contesto 2D
const canvas = document.getElementById('ocean');
const ctx = canvas.getContext('2d');
// Funzione per aggiornare la dimensione del canvas
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Impostiamo la dimensione del canvas all'inizio
resizeCanvas();
// Funzione per generare un valore casuale in un intervallo
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
// Parametri per le onde (modificato wavelength per onde più ampie)
const waves = [
{ baseAmplitude: 100, wavelength: 0.008, speed: 0.0005, color: 'rgba(255, 255, 255, 0.6)' }, // Onde più ampie
{ baseAmplitude: 80, wavelength: 0.01, speed: 0.0004, color: 'rgba(255, 255, 255, 0.4)' }, // Onde più ampie
{ baseAmplitude: 150, wavelength: 0.006, speed: 0.0003, color: 'rgba(255, 255, 255, 0.3)' }, // Onde più ampie
{ baseAmplitude: 50, wavelength: 0.012, speed: 0.0006, color: 'rgba(255, 255, 255, 0.5)' } // Onde più ampie
];
// Funzione per la linea curvata di separazione tra mare e cielo, con meno "dune"
function getCurvedLine(x) {
return Math.sin(x * 0.003) * 100 + canvas.height / 2; // Linea curva più irregolare
}
// Funzione per disegnare tutte le onde
function drawWaves() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Pulisce il canvas
// Disegnare ogni onda
waves.forEach(wave => {
ctx.beginPath();
// Iniziamo dalla curva di separazione
ctx.moveTo(0, getCurvedLine(0)); // Partenza dell'onda dalla curva
// L'ampiezza varia nel tempo in modo irregolare
const amplitude = wave.baseAmplitude + Math.sin(Date.now() * wave.speed) * 100; // Ampiezza che oscilla
for (let x = 0; x < canvas.width; x++) {
let y = Math.sin(x * wave.wavelength) * amplitude + getCurvedLine(x); // Aggiungiamo la curvatura della linea base
ctx.lineTo(x, y);
}
ctx.lineTo(canvas.width, canvas.height); // Scende fino al fondo del canvas
ctx.lineTo(0, canvas.height); // E torna al lato sinistro
ctx.closePath();
ctx.fillStyle = wave.color; // Colore dell'onda
ctx.fill(); // Riempie l'onda con il colore
});
requestAnimationFrame(drawWaves); // Rende l'animazione fluida
}
// Aggiungi un evento di ridimensionamento per ridimensionare il canvas
window.addEventListener('resize', function() {
resizeCanvas(); // Aggiorna la dimensione del canvas
});
drawWaves(); // Avvia l'animazione
</script>
</body>
</html>