我在 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
}
}
最佳答案
正在处理 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>
关于javascript - 在 P5.js 中改变物体高度的正弦函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54382624/