Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A way of having the canvas fill the entire widget? #60

Open
JobLeonard opened this issue Jun 30, 2016 · 2 comments
Open

A way of having the canvas fill the entire widget? #60

JobLeonard opened this issue Jun 30, 2016 · 2 comments

Comments

@JobLeonard
Copy link

I was wondering if there was a way to make the widget work similar to the visualisations in this article by Mike Bostock about visualising algorithms:

https://bost.ocks.org/mike/algorithms/

... I'm sure I can do what with vanilla p5.js if I put in some effort (instance mode with a bit of extra work would probably do it), but wouldn't it be amazing if we could just write something like the following inline into an HTML page?

<script type="text/p5" canvas-only>
function setup() {
  //createCanvas(widgetWidth, widgetHeight); //implicit?
  background(255, 0, 200);
}

function draw() {
// something spectacular
}
</script>

or alternatively:

<script type="text/p5" canvas-only href='/js/widgetSketch.js' />

The canvas-only, widgetWidth and widgetHeight names are just placeholder ideas of course. I suppose the tricky parts would be calculating the size of these variables. Also, ideally there would be an implicit resizing event for the canvas if the window size changes, similar to windowResized for plain p5.js.

(if there already is a simple way to do this with p5 that I'm not aware of, please tell me!)

@weegreenblobbie
Copy link

+1

@KevinWorkman
Copy link

Does windowWidth and windowHeight work for you?

This works for me:

<script type="text/p5" data-p5-version="1.0.0" data-preview-width="400" data-height="480">
function setup() {
  createCanvas(windowWidth, windowHeight);
}
  
function draw() {
  background(220);
  circle(200, 200, 300);
}
</script>

Note that you need to add 80 to the data-height to get the desired windowHeight in the preview. So the above example uses data-height="480" to create a canvas that's 400 pixels wide.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants