[英]Understanding How a Circle is Formed in Processing
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軸上? 最后,為什么需要變量“角度”? 當我將其取出時,我注意到可視化器並不像看起來象限之間的划分那樣平滑。
我一直在玩這段代碼,找不到太多帶有詳細說明的示例,因此將不勝感激。 謝謝。
您需要做的第一件事是更好地了解基本三角函數。 那里有大量資源:嘗試搜索“ sin cos教程”或“用於游戲開發的sin and cos”或“ sohcahtoa”以獲得大量結果。
但基本上,如果您有一個起點,一個旋轉點和一個距離,則可以找出終點在哪里使用sin
和cos
。 計算終點的基本公式是:
endX = startX + cos(rotation)*distance;
endY = startY + sin(rotation)*distance;
您的代碼使用此公式在圓周圍找到點,以便可以在它們之間繪制直線以繪制圓。 圓的每個線段都是2個端點。
angle
變量用於指定這些點的距離。 制作的越小,看起來越“圓”。 制作的越大,越能看到構成圓圈的直線。
使用一個更簡單的示例可能會更容易:
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);
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.