//

// By Jon Froehlich

// http://makeabilitylab.io

​

let imgOpenMouth;

let imgClosedMouth;

​

function preload(){

  // we need to preload images as they are not immediately 

  // available after calling loadImage

  // see : https://p5js.org/reference/#/p5/loadImage

  this.imgOpenMouth = loadImage('assets/JonOpenMouth_200x229.png');

  this.imgClosedMouth = loadImage('assets/JonClosedMouth_200x229.png');

}

​

function setup() {

  createCanvas(400, 400);

  frameRate(8);

}

​

function draw() {

  background(220);

  let img = this.imgOpenMouth;

  if(frameCount % 4 == 0){ // close mouth every fourth frame

    img = this.imgClosedMouth;

  }

  image(img, 50, 50); //draw image at point 50,50

}