// Object for creation and real-time resize of canvas

// Good function to create canvas and resize functions. I use this in all examples.

const C = {

    loaded: false,

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

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

    resize () {

        if (this.isLandscape()) {

          console.log("yes")

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

            document.getElementById(this.css).style.removeProperty('width');

        } else {

            document.getElementById(this.css).style.removeProperty('height');

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

        }

    },

    setSize(w,h,p,css) {

        this.width = w, this.height = h, this.pD = p, this.css = css;

    },

    createCanvas() {

        this.main = createCanvas(this.width,this.height,WEBGL), pixelDensity(this.pD), this.main.id(this.css), this.resize();

    }

};

C.setSize(250,250,4,'mainCanvas')

​

function windowResized () {

    C.resize();

}

​

//////////////////////////////////////////////////

// The example really starts here

​

let palette = ["#7b4800", "#002185", "#003c32", "#fcd300", "#ff2702", "#6b9404"]

​

function setup () {

    C.createCanvas()

    angleMode(DEGREES)

    background("#fffceb")

    translate(-width/2,-height/2)  

  brush.scale(2)

    brush.set("charcoal","green",1) 

    brush.line(0,250,250,0)

}