Final Outcome

Note: I thought I had embedded the files correctly in the HTML as it was giving me a preview, however when I published the site it didn’t work. WordPress doesn’t allow for video uploads on a free version. Unfortunately I just have to provide links to p5 as I only discovered this on the morning of the final presentation.

https://editor.p5js.org/19191669/embed/p6UrOs0O

This is a 3D hippo which is responsive to the amplitude of the sound that is played and is meant to be viewed through a holographic lens by adding a holographic prism to the centre. It is activated by pressing the play button and their height reacts to the sound of squeaking. Press play again to stop the sound. This needs to be done in darker setting and the screen should be above eye level.

Pseudocode:

let input;

let analyzer;

let hippo;

let angle = 1;

//We will store the p5.MediaElement

//object in here

let ele;

//while our audio is playing,

//this will be set to true

let sampleIsLooping = false;

function preload

  hippo = loadModel(‘14893_HippoBank_v1.obj’)

//the 3D model of the hippo is quite large so needs to be pre-loaded.

var song;

var button;

var amp;

function setup

 createCanvas

windowWidth, windowHeight, WEBGL);

//WebGL: For the image to be holographic and for the 3D model of the hippo to load, WEBGL (web graphics library) must be selected. This adds the Z plane to the code. 

//x, y, is set to be read on any screen.

 song = loadSound(“squeakytoy.m4a”, loaded);

//loading the sound – it will not play otherwise

  amp = new p5.Amplitude();

  background(0);

function loaded

  button = createButton(“play”);

  button.mousePressed(togglePlaying);

function draw

  background(dark)

//for the holographic effect to work the background  needed to be set at 51.

var vol = amp.getLevel();

//creating a variable to get the amplitude

 var diam = map(vol, 0, 0.3, 10, 200);

//creating a variable to map the amplitude – this is used to plot the amplitude and make the hippo move in time to the volume.

  color(pink)

  specularMaterial(250) 

//geometry with a given colour to add to 3d object

  stroke(242, 68, 132)

  strokeWeight(0);

  ambientLight

//Allows the 3d shape to be seen

  directionalLight

//Adds depth

  rotateX(angle);

  rotateY(angle * 0.1);

  rotateZ(angle * 0.1);

//to create movement with the hippo which calls in the function of the angle = 0. 

  translate(0, 0, diam)

Diam is the variable that uses maths to plot amplitude to create movement according to the amplitude of the hippo. 

  //fill(“pink”);

 scale(;

  model(hippo)

//call the 3D hippo model – this is hard to change the size using a 3d editor so it needs to be scaled.

  angle += 0.01;

}

function togglePlaying

  if (!song.isPlaying

    song.play

    song.setVolume

  else

    song.stop

    button.html(“play”)

Boolean for a button to stop and start the program.

 

Iterations

This is 4 images of a 3D hippos, this was the original version of the holographic image set to 4 planes. However they lacked in the correct amount of depth of movement to be picked up by a dog’s eye. The iteration with one hippo tested better with the dog. https://editor.p5js.org/19191669/full/uSS61qTnhttps://editor.p5js.org/19191669/embed/uSS61qTn

---

https://editor.p5js.org/19191669/full/Y7yoQoWe

This iteration was made with a timer functionality as well. The earlier concept of this was to have a timer/alarm clock functionality for the dog, however with testing, it proved more useful to ditch the alarm clock version and use the lights as a training method instead.

https://editor.p5js.org/19191669/full/ixR2JZj-

This is an early version of turning off the squeaker with sound – this worked well however could not be integrated with the hippo as it the function of starting the microphone negated the functionality of the hippo getting larger with the volume of the squeaking. Both were tested with Alfie and he didn’t see the hologram as well without the variations of size with amplitude.

https://editor.p5js.org/19191669/full/2QnnSZyC

This is the earliest iteration – this was originally an alarm clock that buzzed a high frequency oscillating sound that could be heard for dogs. Tested with Alfie – he didn’t really care.

Programme flow/Pseudocode

START programme

LOAD sound, load 3D object

if button pressed play sound

while sound plays, manipulate object size to amplitude

else press button to stop sound

END

Follow My Blog

Get new content delivered directly to your inbox.