* p5.mapper

* create mapped surfaces (quad, tri, line, masks)

* 

* Jenna deBoisblanc

* jdeboi.com

* 11/16/2021

* 

*/

​

let pMapper;

let quadMap, triMap, lineMap, maskMap;

​

let img;

let x = 0;

​

//remember to "let vid;" for each video you have

​

let vid1;

let vid2;

let vid3;

​

function preload() {

    img = loadImage("logo.png");

}

​

function setup() {

    createCanvas(windowWidth, windowHeight, WEBGL);

​

    // create mapper object

    pMapper = createProjectionMapper(this);

    // create mapping surfaces (width / height). 

    // *** STEP 4 ***: Add more mapping surfaces here.

    // The order of this is determined here. From top to bottom = from behind to front. Masks will always be on top.

    triMap = pMapper.createTriMap(300, 300);

    quadMap = pMapper.createQuadMap(400, 400);

  quadMap1 = pMapper.createQuadMap(400, 300);

    quadMap2 = pMapper.createQuadMap(240, 300);

  quadMap3 = pMapper.createQuadMap(240, 300);

    lineMap = pMapper.createLineMap();

​

    // creates a black mask with 5 moveable pointsc

    maskMap = pMapper.createMaskMap(5);

    maskMap1 = pMapper.createMaskMap(5);

  maskMap2 = pMapper.createMaskMap(5);

  maskMap3 = pMapper.createMaskMap(5);

  maskMap4 = pMapper.createMaskMap(5);

  maskMap5 = pMapper.createMaskMap(5);

  maskMap6 = pMapper.createMaskMap(5);

  maskMap7 = pMapper.createMaskMap(5);

​

    // loads calibration in the "maps" directory

    pMapper.load("maps/map.json");

    // load your video here

    vid1 = createVideo(

      ['earth.mp4'],

      vidLoad

    );

​

    vid2 = createVideo(

      ['hellfire.mp4'],

      vidLoad

    );

  vid3 = createVideo(

      ['heaven.mp4'],

      vidLoad

    );

}

​

//function to allow video to loop

function vidLoad() {

  vid1.loop();

  vid1.volume(0);

  vid2.loop();

  vid2.volume(0);

  vid3.loop();

  vid3.volume(0);

}

​

function draw() {

    background(0);

​

    displayFrameRate();

​

    // display order from back to front is determined in setup, not draw. 

    // *** STEP 5 ***: copy the corresponding code for any extra QUADs, TRIs, LINEs or MASKs that you've created in maps/map.json.

      quadMap2.clear();

    quadMap2.imageMode(CENTER);

    quadMap2.background(255, 0, 0);

    quadMap2.image(vid3, 0, 0, 300, 300);

    quadMap2.fill(255);

      quadMap.clear();

    quadMap.imageMode(CENTER);

    quadMap.background(255, 0, 0);

    quadMap.image(vid1, 0, 0, 500, 400);

    quadMap.fill(255);

   quadMap1.clear();

    quadMap1.imageMode(CENTER);

   quadMap1.background(255, 0, 0);

    quadMap1.image(vid2, 0, 0, 500, 400);

    quadMap1.fill(255);

  //quadMap3.clear();

    //quadMap3.imageMode(CENTER);

   //quadMap3.background(255, 0, 0);

    //quadMap3.image(img, 0, 0, 500, 400);

    //quadMap3.fill(255);

​

​

   // triMap.clear();

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

    //triMap.imageMode(CENTER);

    //triMap.image(vid1, 0, 0, 500, 300);

​

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

​

    maskMap.display();

    maskMap1.display();

    maskMap2.display();

    maskMap3.display();

    maskMap4.display();

    maskMap5.display();

    maskMap6.display();

    maskMap7.display();

}

​

function keyPressed() {

    switch (key) {

        case 'c':

            // enter/leave calibration mode, where surfaces can be warped 

            // and moved

            pMapper.toggleCalibration();

            break;

        case 'f':

            // enter/ exit fullscreen mode

            let fs = fullscreen();

            document.getElementById("header").style.display = "none";

            fullscreen(!fs);

            break;

        case 'l':

            // load calibration file

            pMapper.load("maps/map.json");

            break;

​

        case 's':

            // saves the calibration to map.json

            // change browser download location as needed

            pMapper.save("map.json");

            break;

    }

​

}

​

function mousePressed() {

    pMapper.onClick();

}

​

function mouseDragged() {

    pMapper.onDrag();

}

​

function mouseReleased() {

    pMapper.onRelease();

}

​

function windowResized() {

    resizeCanvas(windowWidth, windowHeight);

}

​

function displayFrameRate() {

    fill(255);

    noStroke();

    text(round(frameRate()), -width / 2 + 20, -height / 2 + 20);

}