Функция синуса для изменения высоты объекта в P5.js - PullRequest
Новая
       22

Функция синуса для изменения высоты объекта в P5.js

0 голосов
/ 26 января 2019

У меня есть набросок в P5.js, который близок к работе по назначению, за исключением того, что я не могу понять, как управлять периодом или длиной волны.Как вы увидите, если вы запустите код, анимация создает длинные широкие волны, но я хотел бы иметь возможность устанавливать длину волны на основе параметра.Это всего лишь упражнение по кодированию - любая помощь будет принята с благодарностью!

Обратите внимание, что код не работает непосредственно на SO, но может быть запущен здесь, 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
  }
}

1 Ответ

0 голосов
/ 27 января 2019

При обработке параметр для функции sin должен быть установлен в градусах.

Если вы распределите 360 градусов по всем Bar объектам (распределите по arr.length), то вы сгенерируете 1 полную кривую синуса: 

this.move = function(i){

    var alpha = 360.0*i/arr.length;

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

Частота волны 1.0 / wavelength. Это означает, что угол должен быть разделен на длину волны.

например. 4 полных синусоидальных кривых можно сгенерировать с помощью wavelength = 0.25. 

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>
...