Hi there i try to write a simple responsive menu just for fun, or perhaps if it is good enough for a site…
I understand that to redraw in the correct position a button after browser window resizing i need to declare button object and set fullscreen inside draw.
By put canvas size and object decraration inside draw i get the respossive behaviour but i im now unable to click the button, i can’t understand how to correct it, im a beginner of p5 i need a point of view of someone with more experience about the right setup the work…
Thanks in advance
var start;
var block;
function setup() {
createCanvas(windowWidth,windowHeight);///////
// Create the canvas
block = 40;//windowWidth/16;
//fill(200);
noStroke();
noSmooth();
start = new startButt(windowWidth-block,0);///////
}
function draw() {
//createCanvas(windowWidth,windowHeight);
//start = new startButt(windowWidth-block,0);
background(0);
fill(255);
rect(0,0,windowWidth,block)
rect(0,windowHeight - block,windowWidth, block)
start.click();
start.display();
}
function startButt(x, y){
var clicked;
var ready;
this.click = function() {
if(mouseIsPressed){
if (ready && mouseX > x && mouseX < x + block && mouseY > y && mouseY < y + block) {
clicked = !clicked;
ready = false;
}
}else{
ready=true;
}
}
this.display = function() {
if(clicked){
fill(63);
}else{
fill(255);
}
rect(x,y,block,block);
fill(0,255,0);
rect(x+block/10*2.5,block/10*2.5,block/10*5,block/10*1);
rect(x+block/10*2.5,block/10*4.5,block/10*5,block/10*1);
rect(x+block/10*2.5,block/10*6.5,block/10*5,block/10*1);
};
}