Aquí te presento un ejemplo básico que utiliza la librería p5.js para dibujar la onda en un lienzo HTML.
let angle = 0;
let amplitude = 100;
let frequency = 5;
let wavelength = 50;
function setup() {
createCanvas(400, 400, WEBGL);
}
function draw() {
background(255);
noFill();
// Dibujar la onda en el eje x
stroke(0, 0, 255);
beginShape();
for (let x = 0; x < width; x++) {
let y = amplitude * sin(angle + TWO_PI * frequency * x / width);
vertex(x - width/2, y, 0);
}
endShape();
angle += TWO_PI / wavelength;
}
Este código define algunas variables que controlan los parámetros de la onda, como su amplitud, longitud de onda, velocidad de propagación y período. En la función draw(), se utiliza un bucle para dibujar puntos a lo largo del eje X y calcular los valores de la onda para cada punto. El tiempo se actualiza en cada iteración del bucle para que la onda parezca estar en movimiento.
Código HTML
Aquí te muestro cómo puedes agregar el código JavaScript a un archivo HTML para visualizar la onda electromagnética en un navegador:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Onda Electromagnética</title>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js
http://sketch.js
</head>
<body>
</body>
</html>Este código HTML es muy simple y consta de una sección <head> que incluye referencias a la librería p5.js y al archivo JavaScript sketch.js donde se encuentra el código de la simulación. En la sección <body> no hay nada, ya que todo el dibujo se hace en el lienzo HTML generado por p5.js.
Es importante tener en cuenta que para que este código funcione, se debe descargar la librería p5.js y colocarla en el mismo directorio que el archivo HTML. Además, el archivo JavaScript debe llamarse exactamente sketch.js para que se pueda cargar correctamente en el navegador.
CULTURA en CIENCIA 
Deja un comentario