sineSliderKEW23

​

/* 

https://p5js.org/examples/math-sine-wave.html

​

*/

let sliderAmplitude;//Höhe der Sinus Kurve

let sliderPeriod;//Wie lang ist eine ganze Kurve

let sliderXspacing;//Abstand der Kreise

let sliderTheta; //Frequenz

​

let xspacing;// Distance between each horizontal location

let w; // Width of entire wave

let theta=0; // Start angle at 0

let amplitude; // Height of wave

let period; // How many pixels before the wave repeats

let dx; // Value for incrementing x

let yvalues; // Using an array to store height values for the wave

​

​

function setup() {

  sliderAmplitude = createSlider(10, 200, 50,10);

  sliderPeriod = createSlider(10,1000,500,20); //

  sliderxspacing = createSlider(1,50,10,1);

  sliderTheta = createSlider(0.001, 2, 0.01,0.001);

  createCanvas(710, 400);

  w = width + 16;

}

​

function draw() {

  //create all the sliders

  amplitude = sliderAmplitude.value();

  period = sliderPeriod.value();

  xspacing = sliderxspacing.value();

  theta_2 = sliderTheta.value();

​

  background(200);

​

​

  dx = (TWO_PI / period) * xspacing;

  yvalues = new Array(floor(w / xspacing)); //An array to store all the y-Values that are calculated with CalcWave

​

  calcWave(theta_2);

  renderWave();

}

​

function calcWave(sliderval) { 

  theta += sliderval;

  // For every x value, calculate a y value with sine function

  let x = theta; 

  for (let i = 0; i < yvalues.length; i++) {

    yvalues[i] = sin(x) * amplitude;

    x += dx;

  }

}

​

function renderWave() {

  //noFill();

  fill(1);

  // A simple way to draw the wave with an ellipse at each location

  for (let x = 0; x < yvalues.length; x++) {

    ellipse(x * xspacing, height / 2 + yvalues[x], 10,10);

  }

}

​