MyNoiceNoisewithNoise

/*

Der Auftrag war, ein Projekt zu gestalten, welches Perlin Noise nutzt. Das ist mir grundsätzlich gelungen. 

Mein Ansatz war eine umgekehrte Sound visualization, die ein Perlin Noise Graph in eine Hörbare Frequenz umwandelt.

Das ist mir nicht gelungen, zumindest nicht so, dass ich damit zufrieden war. Ich habe daher alles was damit zu

tun hatte, auskommentiert. 

​

Autor: Yannis Bontempi

Datum: 02.11.2021

Attribution: Die Graphen basieren grundsätzlich auf Beispielen aus dem Tutorial.

*/

​

​

let nOffset = 0;

let step = 3;

let sampling = 0.01;

let waves = [];

let count = 1;

let freq;

let amp;

let osc;

let playing;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  osc = new p5.Oscillator();

  background(0);

  strokeWeight(2);

  stroke(255);

  noFill();

  frameRate(60);

​

  soundWaveFreq = new soundWave(2);

  soundWaveAmp = new soundWave(1);

  osc.start();

//push(new soundWave(0));

}

​

function draw() {

  clear();

​

  /*

    for (j = 0; j < waves.length; j++) {

      waves[j].wave();

    }

  */

​

  soundWaveFreq.wave();

  soundWaveAmp.wave();

​

osc.freq(freq);

  freq = soundWaveFreq.freq;

  osc.amp(amp);

  amo = soundWaveAmp.amp;

  //  soundWaveFreq.freq = freq;

  //soundWaveAmp.amp = amp;

​

  if (playing) {

    // smooth the transitions by 0.1 seconds

    osc.freq(freq, 1);

    osc.amp(amp, 1);

  }

  //print(freq);

​

  stroke(255);

  line(width / 2, 0, width / 2, height);

}

/*

function keyPressed() {

  if (keyCode === SHIFT) {

    waves.push(new soundWave(count));

    count++;

  }

​

  if (keyCode === BACKSPACE) {

    waves.splice(waves.length - 1, 1);

  }

​

}

*/

​

class soundWave {

  constructor(spot) {

    this.spot = spot;

    this.nOffset = 0;

    this.step = 3;

    this.sampling = 0.01;

    this.freq = 0;

    this.amp = amp;

​

    this.detailSlider = createSlider(1, 8, 4, 0.001);

    this.falloffSlider = createSlider(0, 1, 0.5, 0.001);

    this.stepSlider = createSlider(1, 10, 3, 0.001);

    this.samplingSlider = createSlider(0.001, 0.1, 0.05, 0.00001);

    this.speedSlider = createSlider(0.0001, 1, 0.01, 0.0001);

​

    this.detailSlider.position(150 * this.spot, 20);

    this.falloffSlider.position(150 * this.spot, 50);

    this.stepSlider.position(150 * this.spot, 80);

    this.samplingSlider.position(150 * this.spot, 110);

    this.speedSlider.position(150 * this.spot, 140);

  }

​

  wave() {

    if (this.spot % 2 == 0) {

      stroke(255, 0, 0);

    } else {

      stroke(0, 0, 255);

    }

​

    this.nOffset += this.speedSlider.value();

    noiseDetail(this.detailSlider.value(), this.falloffSlider.value());

    this.step = this.stepSlider.value();

    this.sampling = this.samplingSlider.value();

​

    beginShape()

    for (let i = 0; i <= width; i = i + this.step) {

      let noiseVal = map(noise(i * this.sampling + this.nOffset), 0, 1, height, 0);

      /*

            if (i == width / 2 && this.spot % 2 == 0) {

              this.freq = constrain(map(noiseVal, 0, height, 20, 1000))

            } else if (i == width / 2) {

              */

​

      curveVertex(i, noiseVal);

    }

    endShape();

​

    if (this.spot%2 == 0) {

      this.freq = constrain(map(noise(width/2 * this.sampling + this.nOffset), 0, 1, 0, height),40,3000);

    }else {

      this.amp = constrain(map(map(noise(width / 2 * this.sampling + this.nOffset), 0, 0, height, 1), 0, height, 0, 1),0,1);

    }

​

  }

}