Холст синусоида

Question

Я пытаюсь нарисовать простую синусоидальную волну на холсте, но не могу изменить направление анимации на вертикальное (сверху вниз).Подскажите, как мне это сделать?

Javascript code

var c = document.getElementById('canv');
var $ = c.getContext('2d');

var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

var lineOffset = 60;

var draw = function(a, b, t) {

  $.clearRect(0, 0, w, h);
  $.lineWidth = 0.2;

  for (var i = -70; i < 70; i += 1) {
    $.strokeStyle = 'red';
    $.beginPath();
    $.moveTo(0, h / 2);
    
    for (var j = 0; j < w; j += 10) {
      $.lineTo(lineOffset * Math.sin(i / 10) +
        j + 0.008 * j * j,
        Math.floor(h / 2 + j / 2 *
          Math.sin(j / 50 - t / 50 - i / 118) +
          (i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
    };

    $.stroke();
  }

}
var t = 0;

var run = function() {
	window.requestAnimationFrame(run);
	t += 2;
	draw(33, 52 * Math.sin(t / 2400), t);
};
run();

<canvas id='canv'></canvas>

Answer 1

В функции рисования я изменил w с помощью h и наоборот.

Я изменил $.moveTo(0,h / 2) на $.moveTo(w / 2,0);

в цикле for я изменил значение для x на значение для y и наоборот.

Надеюсь, это то, что вам нужно.

var c = document.getElementById('canv');
var $ = c.getContext('2d');

var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

var lineOffset = 60;

var draw = function(a, b, t) {

  $.clearRect(0, 0, w, h);
  $.lineWidth = 0.2;

  for (var i = -70; i < 70; i += 1) {
    $.strokeStyle = 'red';
    $.beginPath();
    $.moveTo(w / 2,0);
    
    
    /*
    for (var j = 0; j < w; j += 10) {
      $.lineTo(lineOffset * Math.sin(i / 10) +
        j + 0.008 * j * j,
        Math.floor(h / 2 + j / 2 *
          Math.sin(j / 50 - t / 50 - i / 118) +
          (i * 0.9) * Math.sin(j / 25 - (i + t) / 65)));
    };
    */
    
    for (var j = 0; j < h; j += 10) {
      let y = lineOffset * Math.sin(i / 10) +
        j + 0.008 * j * j;
      
      let x = Math.floor(w / 2 + j / 2 *
          Math.sin(j / 50 - t / 50 - i / 118) +
          (i * 0.9) * Math.sin(j / 25 - (i + t) / 65))
      $.lineTo(x,y);
    };
    
    

    $.stroke();
  }

}
var t = 0;

var run = function() {
	window.requestAnimationFrame(run);
	t += 2;
	draw(33, 52 * Math.sin(t / 2400), t);
};
run();

<canvas id='canv'></canvas>