xxxxxxxxxx
49
//////////////////////////////////////////////////
// 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)
}