const Canvas = {

    // Real Width and Height in Pixels

    width: 2100,

    height: 2100,

    // A function to calculate the aspect ratio

    prop() {return this.height/this.width},

    // Desired PixelDensity

    pixelDensity: 2,

    // A function to check if our canvas will be restricted by window height or by window width

    isLandscape() {return window.innerHeight <= window.innerWidth * this.prop()},

    // A function to resize our canvas on the fly

    resize () {

        if (this.isLandscape()) {

            // These two are values that we will use for our loading and drawing secondary canvases

            this.fitWidth = window.innerHeight / this.prop();

            this.fitHeight = window.innerHeight;

            // Here I resize the canvas to fit the screen by changing the CSS style

            document.getElementById("mainCanvas").style.height = "100%";

            document.getElementById("mainCanvas").style.removeProperty('width');

          } else {

            this.fitWidth = window.innerWidth;

            this.fitHeight = window.innerWidth * this.prop();

            document.getElementById("mainCanvas").style.removeProperty('height');

            document.getElementById("mainCanvas").style.width = "100%";

        }

        // This is the resize multiplier which will be needed when capturing mouse coordinates

        this.fitMult = this.height / this.fitHeight;

    },

};

​

​

// Instanced P5 Canvas where we will show the shape while drawing and from which we will get the Mouse Coordinates. 

// This is basically a secondary P5 Canvas that we execute from within our main one

const handBuffer = function(p) {

    // This is the setup function for the secondary canvas

    p.setup = function() {

        // We create the canvas with the resized dimensions that we calculated above, not the real ones

        let hand = p.createCanvas(floor(Canvas.fitWidth), floor(Canvas.fitHeight));

        // We assign an id to be able to apply CSS styles

        hand.id('drawingCanvas');

    };

    // This is the draw function for the secondary canvas, executing at 60fps (standard)

    p.draw = function() {

        // We want to capture the mouse coordinates with this canvas, which has real size. 

        // We can also multiply the coordinates by our resize multiplier to know the real position in pixels.

        // We repeatedly store these two values on the global object

        Canvas.mouseX = int(p.mouseX * Canvas.fitMult);

        Canvas.mouseY = int(p.mouseY * Canvas.fitMult);

        // Here we show the Doodle while the user is drawing.

        if (Sketch.isDrawing) {

            // Draw a black dot in current mouse position

            p.strokeWeight(2)

            p.stroke(0)

            p.circle(p.mouseX,p.mouseY,2)

        }

        // When drawing is done, we clear the canvas

        else {

            p.clear();

        }

    };

    // On resize, we want to resize the canvas to fit the screen again

    p.windowResized = function() {

        p.resizeCanvas(floor(Canvas.fitWidth), floor(Canvas.fitHeight));

    };

}

​

​

// WE TALK ABOUT THIS LATER

​

const Sketch = {};

​

function mousePressed() {

  Sketch.isDrawing = true;

}

​

function mouseReleased() {

  Sketch.isDrawing = false;

}

​

​

// P5 BASIC FUNCTIONS

​

function windowResized () {

    // Fit canvas to screen on Resize

    Canvas.resize();

}

​

function setup () {

    Canvas.main = createCanvas(Canvas.width,Canvas.height);

    pixelDensity(Canvas.pixelDensity), Canvas.main.id('mainCanvas');

    // Fit Canvas to Screen at start

    Canvas.resize();

    // Create Secondary Canvas for Drawing Management

    Canvas.handBuffer = new p5(handBuffer)

    background(155,200,150)

}