Export

Pixels

The purpose of learning about how to build design with code, is so we can quickly generate complex shapes and patterns to use in other design processes. So far our output format was a pixel based image. To export our pixels into a convenient PNG format, simply call the save() command:

function draw() {
  // drawing code
  noLoop();
  save();
}

When calling the save command from the draw-loop, make sure you use noLoop(). Otherwise the save function will be called continously. Otherwise you could also use an event:

function keyReleased() {
  save();
}

You can also define the name of the saved file:

save("myImage.png");

If you wan to export a series of images its best to properly number them. In the following we will use a variable to number the images. You will learn more about those variables in the next sections:

let counter = 1;
function draw() {
  // drawing code
  if (count < 10) {
    // use the if to stop after 10
    save("image" + counter + ".png");
  }
  counter += 1;
}

Vectors

While pixels are a good start, we cannot easily modify our designs once they are stored in pixels. The best alternative are vectors, which we can export as SVGs. SVGs are a standard for vector graphics and they can be displayed in the browser and easily imported into any graphics software (e.g. Illustrator, Sketch, Figma, etc.). To do so, we need to tell p5js that we want to switch from pixels to vectors. So upon initializing our canvas, we need to define the correct render-engine:

function setup() {
  createCanvas(400, 400, SVG);
}

Not all functions work (or make sense to use), when working with vectors. But all 2D-commands work just fine.

If you are creating your own p5js vector project, make sure you include the SVG-library in your index.html. Our boilerplate has this already included.

Export

Pixels

Vectors

Further reading