Как построить спирограф на холсте в круговой манере при наличии аудиовхода? - PullRequest
Новая
       38

Как построить спирограф на холсте в круговой манере при наличии аудиовхода?

0 голосов
/ 10 июля 2019

В настоящее время я создаю аудио-визуализатор, который принимает записанный аудиовход и превращает его в изображение спирографическим способом.

Используемая мной функция аудио взята из метода getPeaks звука p5.js икод чертежа (прилагается ниже) изменен по этой ссылке: https://www.maissan.net/articles/javascript-spirograph, и вот как выглядит код: 

function drawSpirograph(context, cx, cy, radius1, radius2, audio_peaks) {
  var x, y, theta;

  // Move to starting point (theta = 0)
  context.beginPath();
  context.moveTo(cx + radius1 + radius2, cy);

  // Draw segments from theta = 0 to theta = 2PI
  for (theta = 0; theta <= Math.PI * 2; theta += 0.01) {
    let old_x = x;
    let old_y = y

    console.log(Math.floor(theta * 100))

    //Pick from the peaks array
    let newRatio = audio_peaks[Math.floor(theta * 100)] * 3
    //modify here :)

    x = cx + radius1 * Math.cos(theta) + radius2 * Math.cos(theta * newRatio);
    y = cy + radius1 * Math.sin(theta) + radius2 * Math.sin(theta * newRatio);

    context.lineTo(x, y);
    context.moveTo(x, y)
  }

  // Apply stroke
  context.stroke();
}


function plotInSpirograph() {
  var canvas = document.getElementById("defaultCanvas0");
  var context = canvas.getContext("2d");

  drawSpirograph(context, canvas.width/2, canvas.height/2, 100,200, audio_peaks)

}

, поскольку он принимает коэффициент от пиков аудио, полученных из getPeaks.

Я ожидаю, что результирующее изображение будет круглым, но получит четкие изображения.Я хотел бы услышать любое предложение сделать его круглым, а не резкими линиями.

Заранее спасибо.

...