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 / wavelength。这意味着角度必须除以波长。

例如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>

正弦函数可改变P5.js中的对象高度

1 个答案: