3 Ways of Worldmaking: Procedural Environments

Generative Strategies

Randomness – Generative Starfield

A simple random starfield background with objects:

 function makeStar(){
    var star = createSprite(random(width), 0, 2, 2);
    star.velocity.x = 0;
    star.velocity.y = random(3,10);
    star.life = 200;
    star.shapeColor = color(255,255,255,150);
    stars.add(star);
  } 

Perlin Noise

Sound

First we have to load the sound library in HTML:

       <script src="P5/addons/p5.sound.min.js"> </script>

Loading MP3 Files

Free songs from youtube studio:
Beside Me - Patrick Patrikios
Elegy - Asher Fulero

loading MP3 in the preload() function.

  var song;

    function preload(){
        song = loadSound('yourFile.mp3');
    }

  function setup() {
    
    song.loop();
    createCanvas(640, 100);
    background(200);
  }

  function draw(){

  }

  function mousePressed() {
    if (song.isPlaying()) {
      song.stop();
    } else {
      song.play();
    }
  }

Volume and speed at playback

 var song;

  function preload() {
      song = loadSound('oregano.mp3');
    
  }

  function setup() {
    //song.loop();
    createCanvas(640, 400);
    background(200);
    stroke(255);
  }

  function draw(){
    background(30);
    speed = map(mouseY, 0.1, height, 0, 2);
    speed = constrain(speed, 0.01, 4);
    song.rate(speed);
    line(mouseX, 0, mouseX, height);
    line(0, mouseY, width, mouseY)
  }

  function mousePressed() {
    if (song.isPlaying()) {
      song.stop();
    } else {
      song.play();
    }
  }

Hint
Free sound FX can be found at freesound.org

function setup() {
  createCanvas(640, 200);
  background(100);
  stroke(150);
  fft = new p5.FFT();
  ns = new p5.Noise()
  ns.amp(0.5);
  ns.start();
}

function draw(){
  background(100);
  var spectrum = fft.analyze();
  noStroke();
  fill(200);

  for (var i = 0; i< spectrum.length; i++){
    var x = map(i, 0, spectrum.length, 0, width*3);
    var h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h )
  }
}

https://editor.p5js.org/ear___sand/sketches/g7HUrzLlH

var mic;
        var isOn = false;

function setup() {
  createCanvas(690, 400);
  mic = new p5.AudioIn();
}


function draw() {
  noStroke();
  fill(235, 30);
  rect(0, 0, width, height);
  fill(0);
  text("Press mouse to start tracking mic.", 10, 10)
  var vol = mic.getLevel();
  fill(127);
  stroke(0);

  // Draw an ellipse with height based on volume
  //if(vol > 0.02){
  var r = map(vol, 0, 1, 0, width * 30);
  ellipse(width / 2, height / 2, r + 40, r + 40);
  //}
}

function mousePressed() {

  if (isOn) {
    mic.stop();
    isOn = false;
  } else {
    mic.start();
    isOn = true;
  }
}

Using sound features for game design

Exampple: Vib Ribbon (Playstation, 1999). Gameplay oriented on sonic parameters of Music.

Exampple: 140 (2013)

FFT: Analyzing more sound features

var song;

function preload(){
  song = loadSound('oreo.mp3');
  fft = new p5.FFT();
}

function setup() {
  
  song.rate(1);
  createCanvas(690, 400);
  background(100);
  stroke(150);
}

function draw(){
  background(230);
  fill(0);
  text("Press mouse to start/stop track.",10,10);
  var spectrum = fft.analyze();
  noStroke();
  fill(200,0,0,100);

  for (var i = 0; i< spectrum.length; i++){
    var aktuellerWert = spectrum[i];
    //var x = map(i, 0, spectrum.length, 0, width*3);
    //var h = -height + map(aktuellerWert, 0, 255, height, 0);
    var x = i*4;
    var h = aktuellerWert;
    rect(x, height, 1, -h );
  }
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}