Poker Die : 3D shape picker

let pokerdice = function (p) {

​

    p.preload = function () {

        img0 = p.loadImage('poker_dice_faces_0.png');

        img1 = p.loadImage('poker_dice_faces_1.png');

    }

​

    p.setup = function () {

        /* Let's create the "real" canvas */

        let p5canvas = p.createCanvas(480, 480, p.WEBGL);

        // Now create the 3D shape picker buffer

        p.picker = new PickBuffer3D(p5canvas, p);

        p.dX = -0.00543, p.dY = 0.00711, p.dZ = 0.00111;

        p.faceName = ['Ace', '9', 'King', 'Jack', '10', 'Queen'];

        p.cube = new Cube(new p5.Vector(), 160, p.getFaces(img0), p.getFaces(img1));

        p.picker.register(p.cube);

        /* These are just to show the canvas in the example 

                We can comment these two lines in production */

        // picker.buffer().show();

        // picker.buffer().style("display", "inline");

​

    }

​

    // Convert image into tiles

    p.getFaces = function (img) {

        let s = img.height;

        let f = [];

        f.push(img.get(5 * s, 0, s, s)); // A

        f.push(img.get(0, 0, s, s));     // 9

        f.push(img.get(4 * s, 0, s, s)); // K

        f.push(img.get(2 * s, 0, s, s)); // J

        f.push(img.get(1 * s, 0, s, s)); // T

        f.push(img.get(3 * s, 0, s, s)); // Q

        return f;

    }

​

    p.draw = function () {

        p.picker.init();

        p.background(48, 128, 48);

        p.rotateX(p.frameCount * p.dX);

        p.rotateY(p.frameCount * p.dY);

        p.rotateZ(p.frameCount * p.dZ);

        p.cube.draw(p.picker, p);

    }

​

    p.mouseClicked = function () {

        let pick = p.picker.getObject(p.mouseX, p.mouseY);

        if (pick.hit)

            pick.hit.selected(pick.part);

        else

            p.cube.clearSelected();

    }

}

​

let pokerDiceSketch = new p5(pokerdice);