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?
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
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:
I got the answer by changing the size of the iframe , i am cool now! Thank you
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.
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.
Some util functions about auto-resizing: