p5.mapper

p5.mapper is a projection mapping library for p5.js. This library makes it easy to code and keystone interactive, algorithmic sketches. Created by Jenna deBoisblanc.

• Examples
• Reference

You'll find the library, p5.mapper.min.js, in the dist folder of this repo. Include the library in your index.html (after loading p5.js).

<script type="text/javascript" src="p5.mapper.min.js"></script>

Alternatively, you can get the library through jsDelivr:

<script src="https://cdn.jsdelivr.net/gh/jdeboi/p5.mapper/dist/p5.mapper.min.js"></script>

Inside the sketch.js:

let pMapper;
let quadMap, triMap, lineMap, maskMap;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);

    // create mapper object
    pMapper = createProjectionMapper(this);

    // create mapping surfaces
    triMap = pMapper.createTriMap(300, 300);
    quadMap = pMapper.createQuadMap(400, 400);
    lineMap = pMapper.createLineMap();

    // creates a black mask with 5 moveable points
    maskMap = pMapper.createMaskMap(5);
}

function draw() {
    background(0);

    // display order from back to front is determined in setup, not draw
    quadMap.clear();
    quadMap.background(255, 0, 0);

    triMap.clear();
    triMap.background(255, 255, 0);

    lineMap.display(color(0, 255, 0));

    maskMap.display();
}

function keyPressed() {
    switch (key) {
        case 'c':
            // enter/leave calibration mode
            pMapper.toggleCalibration();
            break;
        case 'l':
            // load calibration file
            pMapper.load("maps/map.json");
            break;
        case 's':
            // saves the calibration to map.json
            pMapper.save("map.json");
            break;
    }
}

Acknowledgements

The logic of this library builds upon and/or adapts:

• David Bouchard's (Java) Processing Keystone Library
• Jenny Louthan, projection transform algorithms