Mojo - Never ending, constantly moving ambient music...

It's (slightly) different every time! This p5.js program has three elements, represented by red, green & blue squares that wander randomly around the screen. The pitch and audio is affected depending on the location of the three elements.

You can watch the animation here:

http://mattmadethis.co.uk/p5/mojo/

Try refreshing the page and see how it develops, or leave it for a while and see where it's at. It's quite soothing to leave it playing in the background. The program uses three layers of sound, which were originally created for a theatre performance of Mojo, by Jez Butterworth, hence the name.

If you want to poke around the script it's below. Visit https://p5js.org/ to checkout the programming language used.

var w;
var w2;
var w3;

var song;
var song2;
var song3;

var img1;
var img2;
var img3;

function preload() {
  // Load a sound file
  song = loadSound('../media/mp3/mojoambientclock.mp3');
  song2 = loadSound('../media/mp3/mojoambient1.mp3');
  song3 = loadSound('../media/mp3/mojoambient2.mp3');
}

function setup() {
  canvas = createCanvas(windowWidth,windowHeight);
 
  w = new Walker();
  w2 = new Walker();
  w3 = new Walker();
  
  img1 = loadImage("../media/images/scratch.png");  
  img2 = loadImage("../media/images/scratch.png");  
  img3 = loadImage("../media/images/scratch.png");  
  
  song.loop();
  song2.loop();
  song3.loop();  
}

function draw() {
// background(255);
  w.walk();
  w2.walk();
  w3.walk();
  w.display();
  w2.display2();
  w3.display3();
  
  
  print(w.pos.x);
  
    // Set the volume to a range between 0 and 1.0
  var volume = map(w.pos.x, 0, width, 0, 1);
  volume = constrain(volume, 0, 1);
  song.amp(volume);
  
  var speed = map(w.pos.x, 0.1, height, 0, 1);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
  
  var volume2 = map(w2.pos.x, 0, width, 0, 1);
  volume2 = constrain(volume2, 0, 1);
  song2.amp(volume2);
  
  var speed2 = map(w2.pos.x, 0.1, height, 0, 1);
  speed2 = constrain(speed2, 0.01, 4);
  song2.rate(speed2);
  
  var volume3 = map(w3.pos.x, 0, width, 0, 1);
  volume3 = constrain(volume3, 0, 1);
  song3.amp(volume3);
  
  var speed3 = map(w3.pos.x, 0.1, height, 0, 1);
  speed = constrain(speed, 0.01, 4);
  song3.rate(speed3);
  
}

function Walker() {
  this.pos = createVector(width/2, height/2);

  
  this.walk = function(){
    this.pos.x = this.pos.x + random(-5, 5);
    this.pos.y = this.pos.y + random(-5, 5);
    
    if (this.pos.x > width){
      this.pos.x = this.pos.x-5;
    }
    
    if (this.pos.y > height){
    this.pos.y = this.pos.y-5;
    }
    
    if (this.pos.x < 0){
    this.pos.x = this.pos.x+5;
    }
    
    if (this.pos.y < 0){
    this.pos.y = this.pos.y+5;
    }
  }
  
  this.display = function() {
    fill(random(0), random(127, 255), random(0));
//    rect(this.pos.x, this.pos.y, 60, 60);
//    rect(this.pos.x, this.pos.y, 60, 60);
tint(0, 255, 0, 25);

image(img1, this.pos.x-windowWidth/4, this.pos.y-windowHeight/4, windowWidth/2, (windowWidth/2)*.66);
  }
  
  this.display2 = function() {
    fill(random(127, 255), random(0), random(0));
//    rect(this.pos.x, this.pos.y, 60, 60);
tint(255, 0, 0, 25);

image(img2, this.pos.x-windowWidth/4, this.pos.y-windowHeight/4, windowWidth/2, (windowWidth/2)*.66);

  }
  
  this.display3 = function() {
    fill(random(0), random(0), random(127, 255));
//    rect(this.pos.x, this.pos.y, 60, 60);
tint(0, 0, 255, 25);
image(img3, this.pos.x-windowWidth/4, this.pos.y-windowHeight/4, windowWidth/2, (windowWidth/2)*.66);

  }

}

window.onresize = function() {
  canvas.size(windowWidth, windowHeight);
};

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}