p5.js | sin()函数

p5.js 是一个用于创作艺术和表现性交互设计的 JavaScript 库。它简化了使用 HTML 和 JavaScript 创建图形、动画和交互性的过程。其中的 sin() 函数是一个非常有用的函数，可用于创建各种动态效果和动画。

简介

sin() 函数是一个数学函数，用于计算给定角度的正弦值。正弦函数是一个周期性的函数，它在 0 到 360 度之间循环，并以连续的波形变化。在图形编程中，sin() 函数经常用于创建平滑动画、波浪效果、周期性移动等效果。

使用 sin() 函数

在 p5.js 中，你可以通过以下方式使用 sin() 函数：

let angle = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  let sinValue = sin(angle);  // 使用 sin() 函数计算正弦值
  let y = map(sinValue, -1, 1, 0, height);  // 对正弦值进行映射以适应画布高度
  
  ellipse(width/2, y, 50, 50);  // 在画布上绘制一个椭圆
  
  angle += 0.05;  // 增加角度以使动画更流畅
}

这段代码通过 sin() 函数计算正弦值，并将其映射到画布的高度上。然后，使用 ellipse() 函数在画布上绘制一个椭圆，其 y 坐标值与正弦值相关。通过每帧增加 angle 变量的值，可以实现流畅的动画。

参数

sin() 函数接受一个参数，单位为弧度。在 p5.js 中，角度可以通过 radians() 函数将角度转换为弧度。

let angleInDegrees = 45;
let angleInRadians = radians(angleInDegrees);

let sinValue = sin(angleInRadians);

结论

通过使用 p5.js 的 sin() 函数，你可以轻松地在你的项目中创建各种动态效果和动画。通过改变参数和调整其他相关数值，你可以创建出更多有趣的效果。

p5.js 是一个功能强大的工具，提供了许多其他有用的函数和功能，值得继续探索和学习。参考 p5.js 的官方文档以获取更多有关 sin() 函数和其他函数的详细信息。