Is it possible to show p5js program in Google Sites web site?

[kkchau]

please format code with </> button * homework policy * asking questions

I have a web page that is build by google sites, and i want to show some p5js program graphic in it.

i have seen people discuss to use iframe to do so, but i only use google drive so is it possible some how to add the p5js graphic to the google sites page?

Thank you

[mcintyre]

Hi @kkchau! It’s definitely possible using the p5.js Editor. Here’s one way to do it.

Step 1. Create a sketch

Step 2. Share the sketch

Step 3. Copy the embed code

Step 4. Paste the embed code in your Google Site

Step 5. Insert with correct dimensions

Step 6. Tweak

Step 7. Profit

[kkchau]

Thanks for the information! This opens my eyes to look at p5js in a next level,
but there is one problem, i had a 1200x200 frame, but i cant do step 7 right , it always shows the left corner of it. Can you also help me with that?

the link is:

https://editor.p5js.org/kkchau6/present/UvFlerWDP

Thank you

[kkchau]

I got the answer by changing the size of the iframe , i am cool now! Thank you

[kkchau]

Wait, i have a real problem, is it possible that i scale the canvas size according with the size of the iframe, or dynamically with the size of the web page? there is a problem with the size different when i view it on the computer and the phone.

it was ok to have 800x200 on computer, and when i see it on phone, it only got a corner, i doesn’t make sense.

[kkchau]

with setting the canvas size to “windowWidth, windowHeight”
and windowResized to “windowWidth, windowHeight”

and in the iframe, to width="100%"and height=“100%”

i have solve the problem.

Thank you

[GoToLoop]

Some util functions about auto-resizing:

windowResized()

Expands Current iFrame Element to Fit Body's Size