# Responsive sketch mouse issue

**URL:** https://discourse.processing.org/t/responsive-sketch-mouse-issue/4546
**Category:** Coding Questions
**Created:** [October 16, 2018, 7:58pm UTC](https://discourse.processing.org/t/responsive-sketch-mouse-issue/4546 "2018-10-16T19:58:18Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)
#### Post date: [October 16, 2018, 7:58pm UTC](https://discourse.processing.org/t/responsive-sketch-mouse-issue/4546/1 "2018-10-16T19:58:19Z")

</div>

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

```auto
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);
  };
}

```

---

<div class="post-metadata">

### Author: ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)
#### Post date: [October 18, 2018, 8:35am UTC](https://discourse.processing.org/t/responsive-sketch-mouse-issue/4546/2 "2018-10-18T08:35:47Z")

</div>

No one listen to techno?

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [October 24, 2018, 8:13pm UTC](https://discourse.processing.org/t/responsive-sketch-mouse-issue/4546/3 "2018-10-24T20:13:36Z")

</div>

@chanof – you might be interested in reaching out to:

> [@A hypnotic, music-reactive Techno visuals show designed for staring at at a party (Part 2)](https://discourse.processing.org/t/a-hypnotic-music-reactive-techno-visuals-show-designed-for-staring-at-at-a-party-part-2/4140):
>
> Hi everyone, [https://www.youtube.com/watch?v=j7a22PSjxfE&t=17m53s](https://www.youtube.com/watch?v=j7a22PSjxfE&t=17m53s) Just sharing my work here again. I made a post on the old Processing forum and it seemed to go down reasonably well. I’ve made some updates now and thought it would be cool to share them! As the first post said: ‘I coded this system for minimal techno visuals in Processing. It involves 3D graphics, beat detection and other techniques! Been working on it on and off for a long time. I have used it live at a clubnight [a few time…

That is not p5.js, but very related.
