load image

Shows how to load an image. Needs to be on a server.

sketch.js

var img = null;
// getting started with p5js
function setup() {
  // executed once
  img = loadImage("black.png");
  colorMode(HSB,360,100,100,100);
  var canvas = createCanvas(600, 600);
  canvas.parent('sketch');
  imageMode(CENTER);
}


function draw() {
  // executed all the time
  background(360,23,100);
  image(img, width/2,height/2);

}

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{page.title}</title>
    <meta name="description" content="something">
    <meta name="author" content="me">
  </head>
  <body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
    <script type="text/javascript" src="sketch.js"></script>
    <div id="sketch"></div>
  </body>
</html>