Working with images/SVG files

In this example, we'll take a look at how we can display images and SVG files. You've learned all about this in Chapter 2, Drawing Text, Curves, and Shapes in 2D, but just like the fonts example, we'll need to do some extra things to make it work.

Getting ready

Add an image and an SVG file to the data folder of your Processing sketch, by dragging them on the Processing editor.

How to do it...

This is the full code for the sketch. We'll just load the image and the SVG file and display them on the canvas element.

PImage img;
PShape shapes;
  
void setup()
{
  size( 640, 480 );
    
  img = loadImage("osaka-fluo.jpg");
    
  shapes = loadShape("shapes.svg");
  
  shapeMode( CENTER );
}
  
void draw()
{
  background( 255 );
  
  image( img, 0, 0 );
  
  translate( width/2, height/2 );
  shape( shapes, 0, 0 );
}

Before you run the sketch, you need to add a directive to preload the image. Go to JavaScript | Playback Settings (Directives) and open the Directives Editor...