javascript - 在 P5.js 中改变物体高度的正弦函数

Question

我在 P5.js 中有一个接近按预期工作的草图，只是我不知道如何控制周期或波长。正如您在运行代码时看到的那样，动画会产生长波，但我希望能够根据参数设置波长。这只是一个编码练习 - 任何帮助将不胜感激!

请注意，代码不直接在 S.O. 上运行。但可以在这里运行，https://editor.p5js.org/knectar/sketches/ONxJGvmJH

var arr = []; //array that holds rectangles
var rectNum; //number of rectangles drawn
var xPos; // horizontal position of rectangle
var yPos; // vertical position of rectangle
var w = 5; // rectangle width
var h; // rectangle height
var rPadding = 4; //space between bars
var amplitude = 40;
var frequency = 2;

function setup() {
  createCanvas(1000, 400);
  angleMode(DEGREES); //slows the animation down (maybe an issue?)

	rectNum = floor(width/(w+rPadding)); //limit array size to width of canvas
  yPos = height*.6; // positions objects in vertical center

  for (var i = 0; i < rectNum+1; i++){
    var bar = new Bar(i*(w+rPadding), yPos, w, -h); //builds out the objects
    arr.push(bar); //loads objects into array
  }
}

function draw() {
  background(1);

  for (var i = 0; i < arr.length; i++){
    arr[i].make();
    arr[i].move(i);
    }
}

function Bar(xPos, yPos, w, h){
  this.xPos = xPos;
  this.yPos = yPos;
  this.width = w;
  this.height = h;

  this.move = function(i){
      this.height = sin(frameCount*frequency+i)*amplitude+(amplitude*2); // sine function to control rectange height
  }

  this.make = function(){
      strokeWeight(0);
      stroke(51);
      fill(160, 0, 124);
      rect(this.xPos, this.yPos, this.width, -this.height); // negative height sets wave to point up
  }
}

Answer 1

正在处理 sin 的参数函数必须以度为单位设置。

如果您在所有 Bar 对象上分布 360 度(在 arr.length 上分布)，那么您将生成 1 条完整的正弦曲线:

this.move = function(i){

    var alpha = 360.0*i/arr.length;

    this.height = sin(alpha) * amplitude + (amplitude*2);
}

波频率为1.0/波长。这意味着 Angular 必须除以波长。

例如wavelength = 0.25可以生成4条完整的正弦曲线。

var wavelength = 0.25;

this.move = function(i){

    var alpha = 360.0*i/arr.length;

    this.height = sin(frameCount*frequency + alpha/wavelength) * amplitude + (amplitude*2);
}

var arr = []; //array that holds rectangles
var rectNum; //number of rectangles drawn
var xPos; // horizontal position of rectangle
var yPos; // vertical position of rectangle
var w = 5; // rectangle width
var h; // rectangle height
var rPadding = 4; //space between bars
var amplitude = 40;
var frequency = 2;

function setup() {
  createCanvas(600, 300);
  angleMode(DEGREES); //slows the animation down (maybe an issue?)

	rectNum = floor(width/(w+rPadding)); //limit array size to width of canvas
  yPos = height*.6; // positions objects in vertical center

  for (var i = 0; i < rectNum+1; i++){
    var bar = new Bar(i*(w+rPadding), yPos, w, -h); //builds out the objects
    arr.push(bar); //loads objects into array
  }
}

function draw() {
  background(1);

  for (var i = 0; i < arr.length; i++){
    arr[i].make();
    arr[i].move(i);
    }
}

function Bar(xPos, yPos, w, h){
  this.xPos = xPos;
  this.yPos = yPos;
  this.width = w;
  this.height = h;

  frequency = arr.length / (2.0 * Math.PI);

var wavelength = 0.25;

this.move = function(i){
    var alpha = 360.0*i/arr.length;
    this.height = sin(frameCount*frequency + alpha/wavelength) * amplitude + (amplitude*2);
}

  this.make = function(){
      strokeWeight(0);
      stroke(51);
      fill(160, 0, 124);
      rect(this.xPos, this.yPos, this.width, -this.height); // negative height sets wave to point up
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>