0
97
ViewsDibujar una onda sinusoidal de arriba a la derecha a abajo a la izquierda
Estoy tratando de diseñar un pequeño proyecto usando lienzo y quiero diseñar una onda sinusoidal de tal manera que la onda se genere desde la esquina superior derecha hasta la esquina inferior izquierda infinitamente si es posible.
Algo así como un gráfico de seno inverso.
Todo lo que puedo hacer es hacer que la onda sinusoidal vaya de izquierda a derecha, pero hacer que esto funcione de arriba a la derecha hacia abajo a la izquierda es muy difícil.
Este es mi código en este momento.
se ve muy triste...
const canvas = document.querySelector(".canvas"); const ctx = canvas.getContext("2d"); canvas.width = window.innerWidth - 5; canvas.height = window.innerHeight - 5; window.addEventListener("resize", () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); const wave = { y: canvas.height / 2, length: 0.02, amplitude: 100, frequency: 0.01, yOffSet: canvas.height, }; let increment = wave.frequency; function animate() { requestAnimationFrame(animate); ctx.fillStyle = "rgb(0,0,0)"; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(0, canvas.height); for (let i = 0; i < canvas.width; i++) { ctx.lineTo(Math.sin(i / wave.length + increment) * wave.amplitude + wave.yOffSet, 0); } ctx.stroke(); increment += wave.frequency; } animate(); body { margin: 0; padding: 0; } <div> <canvas class="canvas"></canvas> </div> Salida deseada
1 answers
Answer question0
El problema está en esta línea:
ctx.lineTo(Math.sin(i / wave.length + increment) * wave.amplitude + wave.yOffSet, 0);Solo te estás moviendo en la coordenada x. Agregué el movimiento en la coordenada y y lo reescribí en tres líneas solo para mayor claridad.
x=i+wave.amplitude*Math.sin(i/wave.length); y=canvas.height-(i-(wave. amplitude * Math.sin(i/wave.length))); ctx.lineTo(x,y);El resultado que produce es como el que describes, si entendí bien. Hay muchas más ondas de las que muestra en el dibujo, pero eso se puede cambiar con el parámetro wave.length.