p5.fab Primer #

This page provides an introduction to using p5.fab. If you’re new to digital fabrication and/or creative code and want some more context for the information presented here, check out the digital fabrication and creative coding introductions.

Anatomy of a p5.fab Sketch #

p5.fab adds to the default setup() and draw() functions a fabDraw() function. fabDraw() is run once, immediately after setup and before the first draw loop, and is where any code which generates toolpath should go! A typical sketch will look something like this:

let fab;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL); // we need to use WEBGL mode to draw 3D things
    fab = createFab(); // fab represents our machine
}

function fabDraw() {
    // fabDraw will be run immediately after the setup function!
    // Machine control commands will go here
}

function draw() {
    background(255); // a solid white background
    fab.render();
}

In this example sketch, we declare a fab variable and use createFab to instantiate a fab object. By default, this will use default values for a Creality Ender3 3D printer. In createCanvas, we use WEBGL mode to support 3D shapes; then in draw(), we use the built-in fab.render() to show a simple visualization of our toolpaths. Since our fabDraw() loop is empty, this sketch would show and empty work envelope for now.

Moving, Grooving, and Extruding #

Let’s send some toolpath commands for 3D printing! Most of the time, we’ll want to send a few starting commands:

function fabDraw() {
    // Set the machine up for printing
    fab.setAbsolutePosition(); // set all axes (x/y/z/extruder) to absolute
    fab.setERelative(); // put extruder in relative mode, independent of other axes
    fab.autoHome();
    fab.setTemps(205, 60); // (nozzle, bed) °C - you should use a temperature best suited for your material
}

Now we’re ready to send some movement commands! Let’s move to the point (100, 100, 0.2) on the bed; we choose 0.2 for the height because this is approximately a good starting height to lay filament down on the bed¹:

function fabDraw() {
    // Set the machine up for printing
    fab.setAbsolutePosition();
    fab.setERelative();
    fab.autoHome();
    fab.setTemps(205, 60);
 
    // Now move around!
    fab.move(100, 100, 0.2); // (x, y, z)
}

function fabDraw() {
    // Set the machine up for printing
    fab.setAbsolutePosition();
    fab.setERelative();
    fab.autoHome();
    fab.setTemps(205, 60);
    
    // Now move around!
    let center = createVector(fab.maxX/2, fab.maxY/2)
    fab.move(center.x, center.y, 0.2); // (x, y, z)
}

where createVector is a handy p5.js function.While moving, we might find that a bit of filament oozes out of the nozzle. This is because filament might melt and fall out of the hot nozzle. To prevent this, we can instead use a moveRetract() command which will pull the filament away from the nozzle. We can also try moving a bit faster:

function fabDraw() {
    // Set the machine up for printing
    fab.setAbsolutePosition();
    fab.setERelative();
    fab.autoHome();
    fab.setTemps(205, 60);
    
    // Now move around!
    let center = createVector(fab.maxX/2, fab.maxY/2)
    fab.moveRetract(center.x, center.y, 0.2, 30); // (x, y, z, speed in mm/s)
}

moveRetract will pull the filament away from the nozzle before moving, and then restore the position (or ‘prime’) once it arrives at its destination. By contrast, moveExtrude will lay down filament along the specified path. By default, it will calculate the amount of filament needed based on the distance and the nozzle & filament diameter:

function fabDraw() {
    // Set the machine up for printing
    fab.setAbsolutePosition();
    fab.setERelative();
    fab.autoHome();
    fab.setTemps(205, 60);
    
    // Now move around!
    let center = createVector(fab.maxX/2, fab.maxY/2)
    fab.moveRetract(center.x, center.y, 1, 30); // (x, y, z, speed in mm/s)
    fab.moveExtrude(center.x + 100, center.y, 1, 30); // (x, y, z, speed in mm/s)

    fab.presentPart();
}

Now, we should have a 100mm line of filament printed on the bed! The presentPart() command will push the bed plate out and the hotend up so that it’s easy to grab the printed part when complete.

Next Steps #

We’re ready to 3D print an object now! Jump to the printing a cube tutorial for some more details on 3D printing with p5.fab.