how to create responsive canvas?

zltm

i have been triying this for 2 days now, nothing works here is my last attempt using a div and css: https://codepen.io/zltm/pen/gXbZbJ

im going mad here, any help?

blindfish

search is your friend... It often leads to an answer ;)

kfrajer

Are you referring to resizing your window or your effect responding to your mouseX?

Unrelated to your question but for you to consider the following small changes:

Kf

function Star() {
  this.x = random(-width/2, width/2);
  this.y = random(-height/2, height/2);
  this.z = random(width);
  this.pz = this.z;

  this.update = function() {
    this.z = this.z - speed;
    if (this.z < 1) {
      this.z = width;
      this.x = random(-width/2, width/2);
      this.y = random(-height/2, height/2);
      this.pz = this.z;
    }
  }

Keyword: stars-flying

zltm

yeah, tried to follow the demo example but it does not seems to be working, run out of tutorials on the web and discussions to follow

kfrajer

I am able to see the speed changes of the stars based on mouse position. Is that what you are referring to?

Kf

zltm

No, I would like to improve that but the problem is another one when I resize my screen the canvas dont resize, it only picks a size when the page is loaded and never again making it not responsive.

GoToLoop

https://p5js.org/reference/#/p5/windowResized

https://Forum.Processing.org/two/discussions/tagged?Tag=windowresized()

blindfish

@zltm - did you try the solution I linked to above?

zltm

@blindfish yeah, didnt worked, this is really weird, if i create a canvas just to show a rectangle it resizes but it does not work with the animation at all

zltm

if this is the case I'm thinking it will be easier to just do it on plain CSS and js instead of p5

blindfish

@zltm your codepen demo has a number of issues:

1. don't call draw() in res() - bad for performance and unnecessary!
2. consider throttling resize 2a. the CSS solution doesn't require listening to the resize event*
3. typos - e.g. 'aouto' in your css; 'widht' and 'windowWidht' in your JS...

* I don't have time to debug properly now; but may find time to figure this out later today...

blindfish

@zltm - assuming you're using the same code as in the codepen link I've just spotted the main problem: your CSS does nothing since it's not being applied to the sketch canvas...:

index.html

<div class="can">
    <!-- this canvas tag is redundant since p5 creates its own canvas: remove it! -->
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>
 </div>

sketch

// snip
// this variable is not used in setup...
var canv = getElementById("c")

function setup() {
   // here you overwrite the canv variable created above
  canv=createCanvas(windowWidth, windowHeight);
  //...
}

What you're presumably trying to do is get the sketch canvas inside <div class="can">. You can do that with the DOM library:

function setup () {
  var canv = createCanvas(windowWidth, windowHeight);
  // make div#can the parent of the created canvas
  canv.parent("can");
  //...
}

Now in your CSS:

/* you can reference the wrapping div */
#can {
  background: #f90;
}
/* ...and the canvas inside it */
#can > canvas {
  width: 100%;
  height: auto;
}