let img; // Declare variable 'img'.

let font,
  fontsize = 20;

function preload() {
  // Ensure the .ttf or .otf font stored in the assets directory
  // is loaded before setup() and draw() are called

}


function setup() {
  createCanvas(300, 400);
  // Starts in the middle
    img =loadImage('https://upload.wikimedia.org/wikipedia/commons/5/52/17th_century_ivory_skull.jpg'); // Load the image

  image(img,0,0,width,height);

  textSize(12);
  textAlign(CENTER, CENTER);
 ;
}


function draw() {
 // Align the text in the center
  // and run drawWords() in the middle of the canvas

  frameRate(1); 
     blendMode(BLEND)
  image(img,0,0,width,height);

  background(random(0,255),random(0,255),random(0,255),random(0,255));
  image(img,0,0,width,height);
   blendMode(DIFFERENCE)
  background(random(0,255),random(0,255),random(0,255),random(0,255));
   image(img,0,0,width+random(0,5),height+random(0,5));
   blendMode(OVERLAY)
  background(random(0,255),random(0,255),random(0,255),random(0,255));
   image(img,0,0,width+random(0,4),height+random(0,4));
   blendMode(BLEND);
    textAlign(CENTER);
  drawWords(width * 0.5);
  //saveFrames('out', 'png', 1, 25 )
  

}

function drawWords(x) {
  // The text() function needs three parameters:
  // the text to draw, the horizontal position,
  // and the vertical position
  
  fill(random(0,255),random(0,255),random(0,255),random(0,255));
  text('JOHN', x, 80);

  fill(random(0,255),random(0,255),random(0,255),random(0,255));
  text('JANE', x, 110);

  fill(random(0,255),random(0,255),random(0,255),random(0,255));
  text('DOE', x, 140);


}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js