sketch.js

var screen = 1;
var numberOfPages = 7;

// fonts
var miniver;
var loveLetter
var muliReg;
var muliRegI;
var muliBold;
var muliBoldI;
var muliEBold;
var muliEBoldI;



function preload() {
    miniver = loadFont("assets/Miniver-Regular.ttf");
    loveLetter = loadFont("assets/loveletter.ttf");
    muliReg = loadFont("assets/Muli-Regular.ttf");
    muliRegI = loadFont("assets/Muli-Italic.ttf");
    muliBold = loadFont("assets/Muli-Bold.ttf");
    muliBoldI = loadFont("assets/Muli-BoldItalic.ttf");
    song1 = loadSound('assets/audio_clip2.mp3');
    song2 = loadSound('assets/audio_clip4.mp3');
    song7 = loadSound('assets/townSounds.mp3')
}

let button;

function setup() {
    // put setup code here
    var canv = createCanvas(550, 550);
    button = createButton('next');
    button.position(800, 800);
    button.mousePressed(next);


    button = createButton('prev');
    button.position(300, 800);
    button.mousePressed(previous);



    //   button = createImg('Downloads/PF_7283_SITE_Category_Tile_BDAY_021319_1800x1800_01.jpg');
    //   button.position(200, 200);
    // make div#canvas-container the parent of the created canvas
    canv.parent("canvas-container");
    textAlign(CENTER, BASELINE);

    //   button.mousePressed(changeBG);
}

function previous() {
    if(screen!=1){
        screen--;
    }
}
function next() {
    screen++;
    // if(screen > numberOfPages){
    //     screen = 1;
    // }
}

function changeBG() {
    var val = random(255);
    background(val);
}

let bx = 95;
let by = 500;
let boxSize = 72;
let overBox = false;
let locked = false;
let xOffset = 0.0;
let yOffset = 0.0;
let e;

let screen2x = 300;
let screen2y = 200;


function inside(point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

    var x = point[0], y = point[1];

    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];

        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }

    return inside;
};


function draw() {
    if (screen == 1) {
        //draw first screen
        background(250);
        //draw second screen

        textFont(muliReg);
        textSize(15);
        text("ack of country", width / 2, height / 2);

        if (
            mouseX > bx - boxSize &&
            mouseX < bx + boxSize &&
            mouseY > by - boxSize &&
            mouseY < by + boxSize
        ) {
            overBox = true;

            if (locked) {
                overBox = false;
            }
        }

        if (mouseIsPressed == true) {
            // Draw the circle
            fill(79, 34, 0);
            ellipse(bx, by, boxSize-40, boxSize-40);
        }
        else{
            fill(79, 34, 0);
            ellipse(bx, by, boxSize, boxSize);
        }
        song1.play();

        } else if (screen == 2) {
            background(250);
            //mission name
            textFont(muliReg);
            textSize(15);
            text("Warangesde Aboriginal Mission Site", width / 2, height / 1.2);

            //dates
            textFont(muliRegI);
            textSize(10);
            text("1880s-1930s", width / 2, height / 1.155);


            beginShape(LINES);
            vertex(190, 231);
            vertex(203, 143);
            vertex(203, 143);
            vertex(298, 153);
            vertex(298, 153);
            vertex(365, 231);
            vertex(365, 231);
            vertex(365, 413);
            vertex(365, 413);
            vertex(251, 413);
            vertex(251, 413);
            vertex(190, 231);
            endShape();

            // var polygon = [ [190,231], [203, 143 ], [203 , 143 ], [ 298, 153 ], [298, 153], [365, 231], [365, 231], [363, 413], [365, 413], [251, 413], [251, 413], [190, 231]];
            // var point = [bx, by];

            // a = inside(point, polygon);
            // print(a);


            if (
                mouseX > bx - boxSize &&
                mouseX < bx + boxSize &&
                mouseY > by - boxSize &&
                mouseY < by + boxSize
            ) {
                overBox = true;
    
                if (locked) {
                    overBox = false;
                }
            }

            if (mouseIsPressed == true) {
                // Draw the circle
                fill(79, 34, 0);
                ellipse(bx, by, boxSize-60, boxSize-60);
            }
            else {
                fill(79, 34, 0);
                ellipse(screen2x, screen2y, boxSize-40, boxSize-40);
            }
 
            song2.play();

            // ***** Text Rotation *****



        } else if (screen == 3) {
            background(250);
            //draw third screen
            textFont(muliReg);
            textSize(15);
            text("Wellington Convict and Misson Site", width / 2, height / 1.2);

            //dates
            textFont(muliRegI);
            textSize(10);
            text("1870-1345", width / 2, height / 1.155);

            beginShape(LINES);
            vertex(180, 200);
            vertex(243, 173);
            vertex(243, 173);
            vertex(222, 130);
            vertex(222, 130);
            vertex(286, 107);
            vertex(286, 107);
            vertex(350, 230);
            vertex(350, 230);
            vertex(370, 400);
            vertex(370, 400);
            vertex(225, 380);
            vertex(225, 380);
            vertex(180, 200);
            endShape();

        } else if (screen == 4) {
            background(250);

            //mission name
            textFont(muliReg);
            textSize(15);
            text("The Spring Flat Black Camp", width / 2, height / 1.2);

            //dates
            textFont(muliRegI);
            textSize(10);
            text("1870-1345", width / 2, height / 1.155);

            beginShape(LINES);
            vertex(104, 227);
            vertex(330, 136);
            vertex(330, 136);
            vertex(440, 350);
            vertex(440, 350);
            vertex(356, 369);
            vertex(356, 369);
            vertex(104, 227);
            endShape();

        } else if (screen == 5) {
            background(250);
            //draw fifth screen
            textFont(muliReg);
            textSize(15);
            text("Bomaderry Aboriginal Childern Home", width / 2, height / 1.2);

            //dates
            textFont(muliRegI);
            textSize(10);
            text("1870-1345", width / 2, height / 1.155);

            beginShape(LINES);
            vertex(225, 133);
            vertex(430, 206);
            vertex(430, 206);
            vertex(327, 398);
            vertex(327, 398);
            vertex(123, 321);
            vertex(123, 321);
            vertex(225, 133);
            endShape();

        } else if (screen == 6) {
            background(250);
            //draw fifth screen
            textFont(muliReg);
            textSize(15);
            text("La Perouse Mission Chruch", width / 2, height / 1.2);

            //dates
            textFont(muliRegI);
            textSize(10);
            text("1870-1345", width / 2, height / 1.155);

            beginShape(LINES);
            vertex(225, 142);
            vertex(424, 250);
            vertex(424, 250);
            vertex(326, 382);
            vertex(326, 382);
            vertex(241, 352);
            vertex(241, 352);
            vertex(137, 258);
            vertex(137, 258);
            vertex(225, 142);
            endShape();
        } else if (screen == 7) {
            background(250);
            //draw seventh screen
            textFont(muliReg);
            textSize(15);
            text("Page 7", width / 2, height / 2);
            if (
                mouseX > bx - boxSize &&
                mouseX < bx + boxSize &&
                mouseY > by - boxSize &&
                mouseY < by + boxSize
            ) {
                overBox = true;
    
                if (locked) {
                    overBox = false;
                }
            }
    
            if (mouseIsPressed == true) {
                // Draw the circle
                fill(255);
                ellipse(bx, by, boxSize-40, boxSize-40);
            }
            else{
                fill(255);
                ellipse(bx, by, boxSize-40, boxSize-40);
            }
            song7.play();

        }

    }

    // function mousePressed () {

      // >> loop code begin  >>
      // use this code to loop the pages

      // << loop code end <<

      // >> read once code begin >>
      // use this code to stop on the last page
      /*
      if(screen < numberOfPages){
        screen ++;
      }
      */
      // << read once code end <<

    // }

    // function mouseDragged(){

    //     if (screen == 2){
    //     }
    //     }


    function mousePressed() {
              // >> loop code begin  >>
      // use this code to loop the pages

    //   screen++;
    //   if(screen > numberOfPages){
    //     screen = 1;
    //   }
      // << loop code end <<

      // >> read once code begin >>
      // use this code to stop on the last page
      /*
      if(screen < numberOfPages){
        screen ++;
      }
      */
      // << read once code end <<

      print(screen);
    
        if (screen == 1) {
            if (overBox) {
                locked = true;
            } else {
                locked = false;
            }
            xOffset = mouseX - bx;
            yOffset = mouseY - by;
            }

        if (screen == 2) {
            if (overBox) {
                locked = true;
            } else {
                locked = false;
            }
            xOffset = mouseX - bx;
            yOffset = mouseY - by;
            
        }

        if (screen == 7) {
            if (overBox) {
                locked = true;
            } else {
                locked = false;
            }
            xOffset = mouseX - bx;
            yOffset = mouseY - by;
            
        }
    }

    function mouseDragged() {
        if (locked) {
            bx = mouseX - xOffset;
            by = mouseY - yOffset;
        }
    }

    function mouseReleased() {
        locked = false;
    }