Start image in center then follow mouse?

p5.js Libraries
15

Ok here is my final code, which achieves everything (edit: almost everything, see Play sound on muted iPhone) I’ve wanted to and is my first completed project :grinning:
I’m not sure if it’s properly written but at least it all works. If you see any poorly written or redundant code please let me know!

The image starts out in the center of the screen,
when the mouse is clicked or the screen is touched in draws the image again and plays a sound,
then when the mouse is moved or a touch is moved it re-draws the image across the screen and plays the sound.

let imageVAR;
let soundVAR;


function preload()
{
imageVAR =  loadImage('assets/face.png');
soundVAR = loadSound('assets/soundfx.mp3');
}


function setup() 
{
var cnv = createCanvas(windowWidth, windowHeight);
cnv.style('display', 'block');

imageMode(CENTER);

mX = width/2;
mY = height/2;
frameRate(12);
}

  
function draw() 
{
background(5);

image(imageVAR, mX, mY, imageVAR.width / 2,     
  imageVAR.height / 2);
}


function mousePressed() 
  {
  mX = mouseX;
  mY = mouseY;
  getAudioContext().resume() 
  soundVAR.play();
  }
  
function mouseMoved() 
  {
	mX = mouseX;
    mY = mouseY;
  soundVAR.play();
  }
  
function touchStarted() 
  {
   mX = mouseX;
  mY = mouseY;
  getAudioContext().resume() 
  soundVAR.play();
  }
  
function touchMoved() 
  {
  mX = mouseX;
  mY = mouseY;
  soundVAR.play();
  return false;
  }

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