p5.js atan2()用法及代码示例

p5.js中的atan2()函数用于计算从指定的原点开始的角度，该角度是从x轴正方向开始测量的。这些值在PI到-PI的范围内作为浮点返回。通常用于将几何体定位到光标的位置。

用法:

atan2(y, x)

参数：该函数接受上面提到和下面描述的两个参数。

y:它是一个数字，用于指定点的y坐标。
x:它是一个数字，用于指定点的x坐标。

返回值：它返回一个数字，该数字表示给定点的反正切。

以下示例说明了p5.js中的atan2()函数：

范例1：

function setup() { 
  createCanvas(500, 200); 
  textSize(18); 
  
  text("Move the slider to observe the effects"
         + " of the atan2() function", 20, 30); 
  
  sliderXPos = createSlider(-200, 200, 0, 1); 
  sliderXPos.position(20, 50); 
  
  sliderYPos = createSlider(-200, 200, 0, 1); 
  sliderYPos.position(20, 80); 
} 
  
function draw() { 
  clear(); 
  text("Move the slider to observe the effects"
         + " of the atan2() function", 20, 30); 
  
  sliderXVal = sliderXPos.value(); 
  sliderYVal = sliderYPos.value(); 
  
  atan2Val = atan2(sliderXVal, sliderYVal); 
  
  text("The X position value is:" + sliderXVal, 20, 140); 
  text("The Y position value is:" + sliderYVal, 20, 160); 
  text("The atan2 value is:" + atan2Val, 20, 180); 
}

输出：
slider-values

范例2：

function setup() { 
  createCanvas(500, 400); 
  textSize(18); 
   
  text("Move the mouse to see the rectangle"
        + " align to it.", 20, 30); 
} 
   
function draw() { 
  clear(); 
  text("Move the mouse to see the rectangle"
        + " align with the mouse.", 20, 30); 
   
  // Move the rectangle to the 
  // middle of the screen 
  translate(width / 2, height / 2); 
   
  // Use the atan2() function to find 
  // the value according to the mouse 
  // coordinates 
  let adjustedValue = atan2(mouseY - height / 2, 
                            mouseX - width / 2); 
  rotate(adjustedValue); 
   
  // Draw a rectangle 
  rect(0, 0, 50, 25); 
   
  text(adjustedValue.toFixed(4), 100, 20); 
}

输出：
mouse-align

在线编辑： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/atan2

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | atan2() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。