Question

import ddf.minim.*;

Minim minim;
AudioPlayer player;
PImage img;

void setup() {
  size(728, 546);

  minim = new Minim(this);

  player = minim.loadFile("Bassnectar_-_Magical_World_feat.wav");
  player.play();
  img= loadImage("cat-in-shades-.jpg");
}

void draw() {


  image(img, 0, 0);
  tint(0, 100, 150);
  stroke(255);

  strokeWeight(4);
  float a = 0;

  float angle = (2*PI) / 200;


  for(int i=0; i < player.bufferSize() - 1; i++) {

   //player.mix.get(i) is a value between [-1,1]

    float x = 250 + cos(a) * (20 * player.mix.get(i) + 100);
    float x2 = 540 + cos(a) * (20 * player.mix.get(i) + 100);    

    float y = 230 + sin(a) * (20 * player.mix.get(i) + 100);
    float y2 = 240 + sin(a) * (20 * player.mix.get(i) + 100);


    float xFinal = 250 + cos(a+angle) * (20 * player.mix.get(i+1) + 100);
    float x2Final = 540 + cos(a+angle) * (20 * player.mix.get(i+1) + 100);


    float yFinal = 230 + sin(a+angle) * (20 * player.mix.get(i+1) + 100);    
    float y2Final = 240 + sin(a+angle) * (20 * player.mix.get(i+1) + 100);    


    line(x,y,xFinal,yFinal);
    line(x2,y2,x2Final,y2Final);

    a += angle;

  }

}

void stop() {
  player.close();
  minim.stop();

  super.stop();
}

以上代码用于在使用Minim库处理中创建音频可视化工具。出于某种原因，我很难看到如何在代码的for循环中形成一个圆。总的来说，我也试图分解代码并更深入地了解正在发生的事情。我对以下内容感到困惑： 'float x = 250 + cos（a）*（20 * player.mix.get（i）+ 100）;' 20倍和100倍用于扩大样本吗？如果是这样的话那么为什么当我摆脱20次并且只有20000时，圆形可视化器不显示？ 250是否用于在背景图像中的x轴上放置线的起点？最后，为什么需要变量'angle'？当我拿出它时，我注意到可视化器不像在象限之间看起来那样平滑我一直在玩这个代码，并没有找到太多的详细解释的例子，所以任何帮助将不胜感激。谢谢。

Answer 1

您需要做的第一件事是更好地理解基本的三角学。那里有大量资源：尝试谷歌搜索＆＃34; sin cos教程＆＃34;或者＆＃34;游戏开发的罪恶和成本;＃34;或＆＃34; sohcahtoa＆＃34;一堆结果。

但基本上，如果你有一个起点，一个旋转和一个距离，你可以找出终点在sin和cos的位置。计算终点的基本公式是：

endX = startX + cos(rotation)*distance;
endY = startY + sin(rotation)*distance;

您的代码使用此公式查找圆周围的点，以便它们可以在它们之间绘制线条以绘制圆圈。圆的每个线段都是2个端点。

angle变量用于指定这些点之间的距离。你制作的越小，圈子越多＆＃34;它会看起来。你做得越大，你就能越多地看到构成圆圈的直线。

使用更简单的示例可能更容易：

void setup(){
  size(500, 500);
}

void draw(){
  background(0);

  //draw white
  stroke(255);

  //the start point- try changing this to mouseX and mouseY
  float centerX = width/2;
  float centerY = height/2;

  //the distance from the start point
  float radius = 100;

  //how far apart the points are
  float angleIncrement = 30;

  //loop to go around the circle. Try changing it to 180 to see what happens.
  for(float angleInDegrees = 0; angleInDegrees <= 360; angleInDegrees+=angleIncrement){

    //the first "end point" is the start point of the line
    float startX = centerX + cos(radians(angleInDegrees))*radius;
    float startY = centerY + sin(radians(angleInDegrees))*radius;

    //the second "end point" is the end point of the line
    //notice that we're adding the angleIncrement to the angle to get the next point
    float endX = centerX + cos(radians(angleInDegrees+angleIncrement))*radius;
    float endY = centerY + sin(radians(angleInDegrees+angleIncrement))*radius;

    //draw the line
    line(startX, startY, endX, endY);

  }
}

了解如何在处理中形成圆

1 个答案: